正文

学会Echarts轻松制作柱状图分组数据：新手入门教程及实战案例

/0 浏览量
0622

了解Echarts

Echarts是一个使用JavaScript实现的开源可视化库，它提供了一套丰富的图表类型，包括但不限于柱状图、折线图、饼图等。柱状图是一种常用的数据展示方式，特别适合用来比较不同类别的数据。

新手入门教程

1. 环境搭建

首先，你需要确保你的电脑上安装了Node.js和npm（Node.js的包管理器）。接着，你可以通过以下命令来安装Echarts：

npm install echarts --save

2. 基础知识

在开始使用Echarts之前，你需要了解一些基本概念：

  • DOM元素：Echarts图表需要被渲染到一个DOM元素中。
  • 配置项：Echarts通过配置项来控制图表的显示效果。
  • 系列：图表中的数据项集合。

3. 创建柱状图

以下是一个简单的柱状图示例：

<!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.1.2/echarts.min.js"></script>
    <script type="text/javascript">
        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>

4. 分组数据

在Echarts中，你可以通过设置series的type属性为bar来创建柱状图。如果你想要分组数据，你可以使用stack属性：

series: [{
    name: '销量',
    type: 'bar',
    stack: '总量',
    data: [5, 20, 36, 10, 10, 20]
}, {
    name: '退货量',
    type: 'bar',
    stack: '总量',
    data: [1, 4, 6, 2, 5, 10]
}]

在上面的代码中，我们创建了两组数据：销量和退货量。这两组数据通过stack属性被堆叠在一起。

实战案例

案例一：销售数据展示

假设你是一家服装店的店长，你需要展示每个月不同服装的销售数据。以下是一个实战案例：

<!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.1.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            title: {
                text: '服装店销售数据'
            },
            tooltip: {},
            legend: {
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月"]
            },
            yAxis: {},
            series: [{
                name: '衬衫',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110]
            }, {
                name: '羊毛衫',
                type: 'bar',
                stack: '总量',
                data: [60, 90, 60, 100, 130, 120]
            }, {
                name: '雪纺衫',
                type: 'bar',
                stack: '总量',
                data: [90, 50, 90, 130, 140, 130]
            }, {
                name: '裤子',
                type: 'bar',
                stack: '总量',
                data: [50, 70, 110, 130, 120, 130]
            }, {
                name: '高跟鞋',
                type: 'bar',
                stack: '总量',
                data: [80, 100, 100, 120, 130, 120]
            }, {
                name: '袜子',
                type: 'bar',
                stack: '总量',
                data: [70, 90, 100, 130, 120, 130]
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

在这个案例中，我们展示了6个月不同服装的销售数据。通过柱状图，我们可以清晰地看到每个月各种服装的销售情况。

案例二：产品退货率分析

假设你是一家电子产品公司的销售经理，你需要分析不同产品的退货率。以下是一个实战案例：

<!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.1.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            title: {
                text: '产品退货率分析'
            },
            tooltip: {},
            legend: {
                data:['产品A','产品B','产品C']
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月"]
            },
            yAxis: {},
            series: [{
                name: '产品A',
                type: 'bar',
                stack: '总量',
                data: [10, 20, 30, 40, 50, 60]
            }, {
                name: '产品B',
                type: 'bar',
                stack: '总量',
                data: [5, 15, 25, 35, 45, 55]
            }, {
                name: '产品C',
                type: 'bar',
                stack: '总量',
                data: [0, 10, 20, 30, 40, 50]
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

在这个案例中，我们展示了3个月不同产品的退货率。通过柱状图，我们可以清晰地看到每个月不同产品的退货情况。

总结

通过本教程，你学会了如何使用Echarts制作柱状图，并且了解了如何分组数据。在实际应用中，你可以根据自己的需求调整图表的样式和配置项。希望这个教程能够帮助你更好地理解和应用Echarts。

-- 展开阅读全文 --