正文

学会Echarts，轻松绘制柱状图分组数据，一看就会的实用教程

/0 浏览量
0921

简介

ECharts是一个使用JavaScript实现的开源可视化库，可以轻松地在网页中创建交互式的图表。柱状图是ECharts中非常常见的一种图表类型，它能够清晰地展示不同类别的数据对比。本教程将带你从零开始，学会使用Echarts绘制分组柱状图。

环境准备

在开始之前，请确保你的开发环境中已经安装了Node.js和npm。接下来，你需要安装ECharts库。

npm install echarts --save

基础示例

下面是一个简单的分组柱状图的示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '分组柱状图示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

在上面的代码中，我们首先初始化了一个echarts实例，并设置了一个包含标题、提示框、图例、X轴、Y轴和系列数据的配置项。最后，我们使用setOption方法将配置项和数据应用到图表上。

分组数据

在分组柱状图中，每个系列代表一组数据。以下是一个分组柱状图的示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '分组柱状图示例'
        },
        tooltip: {},
        legend: {
            data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        xAxis: {
            data: ["小王","小李","小张"]
        },
        yAxis: {},
        series: [
            {
                name: '衬衫',
                type: 'bar',
                data: [5, 20, 36]
            },
            {
                name: '羊毛衫',
                type: 'bar',
                data: [10, 15, 25]
            },
            {
                name: '雪纺衫',
                type: 'bar',
                data: [10, 20, 30]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

在上面的代码中，我们定义了三个系列，每个系列代表一组数据。通过设置xAxis.data和series.data，我们可以将不同组的数据展示在X轴上。

总结

通过以上教程，你已经学会了如何使用Echarts绘制分组柱状图。在实际应用中，你可以根据需要调整图表的配置项和数据，以达到最佳的视觉效果。希望这个教程对你有所帮助！

-- 展开阅读全文 --