本文转载自微信公众号「大数据DT」,作者王大伟 。转载本文请联系大数据DT公众号。
下面制作一幅基础的饼图,将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商品'}
- ],
- }
- ]
- };
▲图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%。
- 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所示。
▲图4-16 环形图
关于作者:王大伟,毕业于华东理工大学,硕士学历,目前就职于平安金融壹账通,从事数据挖掘算法工作,擅长ECharts、Python、自然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家(MVP)荣誉称号。
本文摘编自《ECharts数据可视化:入门、实战与进阶》,经出版方授权发布。
在人工智能、物联网和数据分析等领域加速创新的过程中,近年来智慧城市运动迅速...
前面我们介绍了 WebRTC 音频 3A 中的 声学回声消除 AEC Acoustic Echo Cancellat...
大家好,我是我是Java进阶者,今天给大家分享Java交换变量和字符串的基本知识。 ...
本文作者 李雨前,阿里云弹性计算技术专家,有 5 年的大规模集群资源管理调度实...
本文转载自公众号读芯术(ID:AI_Discovery)。 在数据科学领域找到一份好工作是项...
经常要用到Nginx反向代理,每次都去手动编译安装太麻烦了,使用这个一键安装脚本...
想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...
最近在各个大厂的JD中关于测试平台开发的职位信息频频曝光,有很多同学对该职位...
操作场景 OVA(Open Virtualization Appliance:开放虚拟化设备)是一个单一的压...
????和尚虽然是移动端开发,但对于 Nginx 负载均衡稍稍有些了解,而曾经的毕业论...