手把手教你用ECharts画柱状图

蔚落 2022-11-19 09:55 264阅读 0赞

![format_png][]

**导读：**柱状图主要用于表示离散数据的频数，也是一种基础可视化图。

作者：王大伟

来源：大数据DT（ID：hzdashuju）

**01 简单的柱状图**

在ECharts中制作柱状图也十分简单，通过将series中的type设置为bar即可，代码如下：

option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [100, 150, 120, 90, 50, 130, 110],
            type: 'bar'
        }]
    };

可视化结果如图4-8所示。

![format_png 1][]

▲图4-8 简单的柱状图

我们同样可以在代码中添加label以显示具体数值，例如在每个柱子上显示对应数值，代码如下：

可视化结果如图4-9所示。

![format_png 2][]

▲图4-9 简单的柱状图加入label

**02 聚合柱状图**

除了简单的柱状图，在实际场景中也会经常用到聚合柱状图，以更直观地比较各维度信息。例如，在原来的代码中加入legend，再加入一批数据，并将x轴的星期改为不同商场，代码如下：

option = {
        title: {
            text: '产品一周销量情况'
        },
        xAxis: {
            type: 'category',
            data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: ['A产品', 'B产品']
        },
        series: [{
            name: 'A产品',
            data: [100, 150, 120, 90, 50, 130, 110],
            type: 'bar',
            label: {
                    show: true,
                    position: 'top'
                }
        },
        {
            name: 'B产品',
            data: [120, 130, 110, 70, 60, 110, 140],
            type: 'bar',
            label: {
                    show: true,
                    position: 'top'
                }
        }]
    };

可视化结果如图4-10所示。

结合图4-10，我们可以非常直观地比较不同商场的不同产品的销售情况。

![format_png 3][]

▲图4-10 聚合柱状图

有时也会用到水平聚合柱状图，具体要如何实现呢？交换xAxis和yAxis中的内容，同时将数字label中的position由top改为right即可，代码如下：

option = {
        title: {
            text: '产品一周销量情况'
        },
        xAxis: {
            type: 'value'   
        },
        yAxis: {
            type: 'category',
            data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']
        },
        legend: {
            data: ['A产品', 'B产品']
        },
        series: [{
            name: 'A产品',
            data: [100, 150, 120, 90, 50, 130, 110],
            type: 'bar',
            label: {
                    show: true,
                    position: 'right'
                }
        },
        {
            name: 'B产品',
            data: [120, 130, 110, 70, 60, 110, 140],
            type: 'bar',
            label: {
                    show: true,
                    position: 'right'
                }
        }]
    };

可视化结果如图4-11所示。

![format_png 4][]

▲图4-11 水平聚合柱状图

**03 堆叠柱状图**

除上述几种柱状图，堆叠柱状图也是非常常用的。下面我们来制作一个不同产品在不同商场销量的堆叠柱状图，代码如下：

option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {           
                type: 'shadow'
            }
        },
        legend: {
            data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场']
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['A产品', 'B产品', 'C产品', 'D产品', 'E产品', 'F产品', 'G产品']
        },
        series: [
            {
                name: 'A商场',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: 'B商场',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [320, 332, 301, 334, 490, 330, 310]
            },
            {
                name: 'C商场',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'D商场',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
                name: 'E商场',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [420, 532, 501, 234, 290, 330, 320]
            }
        ]
    };

可视化结果如图4-12所示。

![format_png 5][]

▲图4-12 堆叠柱状图

在上述代码中，tooltip中的type为shadow，所以当鼠标悬停在柱子上时，会显示阴影效果。这里的堆叠效果主要是通过stack参数决定的，当我们删除A商场的stack参数，并将B商场和C商场的stack参数改为“总量1”之后，其可视化结果如图4-13所示。所以可以这样理解：stack参数相同的柱子会堆叠在一起，如果没有这个参数，则该部分不堆叠。

![format_png 6][]

▲图4-13 堆叠柱状图调整堆叠效果

关于作者：王大伟，毕业于华东理工大学，硕士学历，目前就职于平安金融壹账通，从事数据挖掘算法工作，擅长ECharts、Python、自然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家（MVP）荣誉称号。

本文摘编自《ECharts数据可视化：入门、实战与进阶》，经出版方授权发布。

延伸阅读《ECharts数据可视化》

长按上方二维码了解及购买

转载请联系微信：DoctorData

**推荐语：**ECharts官方推荐，系统全面、由浅入深、注重实操，带领读者快速从新人到高手。

![音符][format_png 7]

**划重点????**

**干货直达????**

*  [人工智能三大关键能力，终于有人讲明白了][Link 1]  
    
 *  [数据缺失值的3种处理方式，终于有人讲明白了][3]  
    
 *  [5G时代不可或缺的关键技术：详解边缘计算参考架构3.0][5G_3.0]  
    
 *  [6个关键步骤，手把手教你构建图模型][6]

**更多精彩****????**

在公众号对话框输入以下**关键词**

查看更多优质内容！

**PPT** | **读书** | **书单** | **硬核** | **干货**** **| **讲明白 **|** 神操作**

**大数据** | **云计算** | **数据库** | **Python** | **可视化**

**AI** | **人工智能** | **机器学习** | **深度学习** | **NLP**

**5G**** **|** 中台 **|** 用户画像**** **| **1024** | **数学 **|** 算法 **| **数字孪生**

据统计，99%的大咖都完成了这个神操作

**????**

![format_png 8][]

![format_png 9][]

[format_png]: /images/20221119/9fea882b0476428890d836cf78ed215c.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcmV0dW9pYXNYcXcxaWNzbXdLM1pUbUZZMDlEcGlhdXh4YjZlcjJ3SjdrRll5N1liZEY2ODk5ZUZFQS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcmdLbDZiSEdFbWNpY3ZhaldEaWFORUs3eUMyTUpueVptUTdDQ25pYUtzblNndXVxTDJOdmliMmliS2JRLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcldwdWJ5THdDWkJWN2V5azB4ODh2V3JNTnFiY1lNazRMMk1PaWFGVXVTTGh0WjJUV1lMUHVrY0EvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcnBpYnFLdWlickQwN09nd2pUaGpVaGppYTRpYmljUElJSWppY2RDMWVYU3JSbmljVzRIbVRhUEVDOWpCYmcvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcnNVaWFwV2hKMGJTRWljd2lhbXYxOEt2WW5pYmtwOTZ0OWFuVnYyWnZVMFNXeW5mdmVpY0NkbzBaZ2FRLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZlcWRhTEhxSXgxZVFuQXpHaWNsUENMcnlHWVpHeUJSSVJrZ2VtNEpYMEVCZnFSYW1IUmNGWnMxV1F2VXdJT0VHZXRpYUl2MktGRVRGV3cvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L2NaVjJoUnB1QVBpYUpRWFdHeUM5d3JVeklpY2liZ1hheXJnaWJUWWFyVDNBMXl6dHRidGFPMEpsVjIxd01xcm9HWVQzUXRQcTJDN0hNWXN2aWNTQjJwN2RUQmcvNjQw?x-oss-process=image/format,png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd18cdbfb589abf90413a917e0beaaa5a3aeef15a0bf84158d830a152577b95b5e85089f0&idx=1&mid=2247522400&scene=21&sn=5108576e3ac7a96ff7dde61202cc9ab9#wechat_redirect
[3]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd1b3dbfb58a55ab87fcee84c615599b0ff6cd925cddbc29a3b38a3e02c743d44fb5499f9&idx=2&mid=2247522399&scene=21&sn=44137e3f48f2780374ae0aea7702bc32#wechat_redirect
[5G_3.0]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cde8bdbfb579d807cc4cf1b162191f449ee9e7306066b6605e3951e31765858722d6cce1c&idx=2&mid=2247522151&scene=21&sn=cbde889b415a14d0ecfb86d24e50ec1f#wechat_redirect
[6]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cdf25dbfb56337c3dc2e021e2db3eaefecb853e4e21fcbb7371753d5e531be2c32f887d82&idx=2&mid=2247521993&scene=21&sn=c4c4b57f7b862eb9ca01e0f017144d5b#wechat_redirect
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9MU09qeWliNWdpYVZkUFFyOEtxQllFaHlvS2RNc2cwRWxPRjFrMmVOd2dpY2NnanBWbmNWaWJzRGljUk9pY2p2SVpTRndPR0FkM250UzNYQWlhS1U3ME1QSW0wVncvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MU09qeWliNWdpYVZkR2JGdk8wSXRRRDFkM29GaWNPc0hMNFZ6WDFqOHpHTExTaWEzWm9EcHBhRldBRUFZM2VPamlhSkZSZnpaR3BCNXEzendLRlNVb2JMekhnLzY0MA?x-oss-process=image/format,png