当前位置:主页 > 查看内容

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

发布时间:2021-06-24 00:00| 位朋友查看

简介:本文转载自微信公众号「大数据DT」,作者王大伟 。转载本文请联系大数据DT公众号。 下面制作一幅基础的饼图,将Echarts中series的type参数值设置为pie,如图4-14所示。 代码如下: option ={ title:{ text: '各商品销量占比' , subtext: 'A商场情况分析' , l……

本文转载自微信公众号「大数据DT」,作者王大伟  。转载本文请联系大数据DT公众号

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

代码如下:

  1. option = { 
  2.     title: { 
  3.         text: '各商品销量占比'
  4.         subtext: 'A商场情况分析'
  5.         left'center' 
  6.     }, 
  7.     tooltip: { 
  8.         trigger'item'
  9.         formatter: '{a} <br/>{b} : {c} ({d}%)' 
  10.     }, 
  11.     legend: { 
  12.         orient: 'vertical'
  13.         left'left'
  14.         data: ['A商品''B商品''C商品''D商品''E商品'
  15.     }, 
  16.     series: [ 
  17.         { 
  18.             name'所售商品'
  19.             type: 'pie'
  20.             data: [ 
  21.                 {value: 343, name'A商品'}, 
  22.                 {value: 250, name'B商品'}, 
  23.                 {value: 509, name'C商品'}, 
  24.                 {value: 108, name'D商品'}, 
  25.                 {value: 948, name'E商品'
  26.             ], 
  27.         } 
  28.     ] 
  29. }; 

▲图4-14 饼图

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

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

▲图4-15 饼图显示控制

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

  1. option = { 
  2.     title: { 
  3.         text: '各商品销量占比'
  4.         subtext: 'A商场情况分析'
  5.         left'center' 
  6.     }, 
  7.     tooltip: { 
  8.         trigger'item'
  9.         formatter: '{a} <br/>{b} : {c} ({d}%)' 
  10.     }, 
  11.     legend: { 
  12.         orient: 'vertical'
  13.         left'left'
  14.         data: ['A商品''B商品''C商品''D商品''E商品'
  15.     }, 
  16.     series: [ 
  17.         { 
  18.             name'所售商品'
  19.             type: 'pie'
  20.             radius: ['50%''70%'], 
  21.             data: [ 
  22.                 {value: 343, name'A商品'}, 
  23.                 {value: 250, name'B商品'}, 
  24.                 {value: 509, name'C商品'}, 
  25.                 {value: 108, name'D商品'}, 
  26.                 {value: 948, name'E商品'
  27.             ], 
  28.         } 
  29.     ] 
  30. }; 

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

▲图4-16 环形图

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

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


本文转载自网络,原文链接:https://mp.weixin.qq.com/s/1kRCMizaYA4fIB04qlN_0Q
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!
上一篇:如何在 C# 8 中使用默认接口方法 下一篇:没有了

推荐图文


随机推荐