下面制作一幅基础的饼图，将Echarts中series的type参数值设置为pie，如图4-14所示。
代码如下：
option={title:{text:'各商品销量占比',subtext:'A商场情况分析',left:'center'},tooltip:{trigger:'item',formatter:'{a}br/{b}:{c}({d}%)'},leg:{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商品'}],}]};
▲图4-14饼图
在上述代码中，将leg设置为vertical，是为了避免水平显示后会与标题重叠。这里将tooltip的显示格式设置为：formatter:'{a}br/{b}:{c}({d}%)'，各参数在饼图中的具体含义为：{a}（系列名称），{b}（数据项名称），{c}（数值），{d}（百分比）。当鼠标悬停在某块饼上时，该块饼会突出显示且按照formatter的格式显示文字和数值。
▲图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}%)'},leg:{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所示。
▲图4-16环形图
本文摘编自《ECharts数据可视化：入门、实战与进阶》，经出版方授权发布。
延伸阅读《ECharts数据可视化》
推荐语：ECharts官方推荐，系统全面、由浅入深、注重实操，带领读者快速从新人到高手。
版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报，一经查实，本站将立刻删除。