手把手教你用ECharts画饼图和环形图

蔚落 2023-01-12 04:27 176阅读 0赞

![format_png][]

**导读：**饼图也是一种常用的基本图表，主要用来展示各项的比重。

作者：王大伟

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

下面制作一幅基础的饼图，将Echarts中series的type参数值设置为pie，如图4-14所示。

代码如下：

option = {
        title: {
            text: '各商品销量占比',
            subtext: 'A商场情况分析',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
        },
        series: [
            {
                name: '所售商品',
                type: 'pie',
                data: [
                    {value: 343, name: 'A商品'},
                    {value: 250, name: 'B商品'},
                    {value: 509, name: 'C商品'},
                    {value: 108, name: 'D商品'},
                    {value: 948, name: 'E商品'}
                ],
            }
        ]
    };

![format_png 1][]

▲图4-14 饼图

在上述代码中，将legend设置为vertical，是为了避免水平显示后会与标题重叠。这里将tooltip的显示格式设置为：formatter: '\{a\} <br/>\{b\} : \{c\} (\{d\}%)'，各参数在饼图中的具体含义为：\{a\}（系列名称），\{b\}（数据项名称），\{c\}（数值），\{d\}（百分比）。当鼠标悬停在某块饼上时，该块饼会突出显示且按照formatter的格式显示文字和数值。

需要注意的是，当我们点击饼图的legend时，如点击C商品的legend时，C商品的图例会变为灰色，同时，饼图中将不再显示C商品饼块，且会重新计算百分比，如图4-15所示。

![format_png 2][]

▲图4-15 饼图显示控制

除了基本的饼图，我们也常常会用到环形图。在ECharts中，在series中加上radius参数即可绘制环形图，例如下面代码中的radius: \['50%', '70%'\]，代表环内部半径和外部半径的比例分别为50%、70%。

option = {
        title: {
            text: '各商品销量占比',
            subtext: 'A商场情况分析',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
        },
        series: [
            {
                name: '所售商品',
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    {value: 343, name: 'A商品'},
                    {value: 250, name: 'B商品'},
                    {value: 509, name: 'C商品'},
                    {value: 108, name: 'D商品'},
                    {value: 948, name: 'E商品'}
                ],
            }
        ]
    };

环形图可视化结果如图4-16所示。

![format_png 3][]

▲图4-16 环形图

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

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

![format_png 4][]

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

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

转载请联系微信：DoctorData

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

看看作者怎么说

**????**

**最新！**Apache ECharts 5 将于 2021.01.28 20:00 进行线上发布会。发布会将为大家详细介绍 ECharts 5 的新功能，包括动态排序柱状图（bar-racing）等更高级玩法。**????**

![format_png 5][]

![音符][format_png 6]

**划重点????**

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

*  [终于有人把智能语音处理讲明白了][Link 1]  
    
 *  [终于有人把5G+人工智能讲明白了][5G]  
    
 *  [终于有人把条件概率和贝叶斯公式讲明白了][Link 2]  
    
 *  [手把手教你用ECharts画柱状图][ECharts]

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

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

查看更多优质内容！

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

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

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

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

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

**????**

![format_png 7][]

![format_png 8][]

[format_png]: /images/20221119/51911022f48e413eba2172b81a3d7614.png
[format_png 1]: /images/20221119/c1cf2649b79346e79166580e1b523ef1.png
[format_png 2]: /images/20221119/f171fa16f4ad487ea17d9542f0902f3b.png
[format_png 3]: /images/20221119/1a6a1f9e59be4450bc88ab425467a98c.png
[format_png 4]: /images/20221119/0086d01259464b2bbde12e9749648276.png
[format_png 5]: /images/20221119/385d7bb68e9b4cf3831158b235d75c42.png
[format_png 6]: /images/20221119/9c95cf557eb0476a86b57e98dbeedcd9.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd315dbfb5a031a03fb1965abca4e607e5877ac2a3862be91acfdb1604c01896bca672dc9&idx=2&mid=2247523065&scene=21&sn=46f7b04c4cbfe1dac00ae39e0d3dd5da#wechat_redirect
[5G]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd3d0dbfb5ac6c056c2d572916d6ed3ad48e0eed9fed28ee0e01734c537a01b6683560b40&idx=1&mid=2247522876&scene=21&sn=62604ecf7509b3dd331d19bacfedecef#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd3f3dbfb5ae5495adda5966669fc6b883d0031d2dd49a91e608d5b67deb63091e297ecee&idx=2&mid=2247522847&scene=21&sn=17662ee002ba6bef2cb6b0335f59a719#wechat_redirect
[ECharts]: http://mp.weixin.qq.com/s?__biz=MzI5OTk5OTM2Mw%3D%3D&chksm=ec8cd0fddbfb59eb52cdd04f773a6dbe2b407e73de9576a0fbb497a02135dc95a232f07f28a9&idx=2&mid=2247522577&scene=21&sn=4cfe91bc9cc260434cd8f7f0c0970f0c#wechat_redirect
[format_png 7]: /images/20221119/84c66763c2ec4734bcc90b85b7792abb.png
[format_png 8]: /images/20221119/faa443b9c33a406ebbcf11719e2afd85.png