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

作者:王大伟

来源:大数据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商品'}],}]
};

▲图4-14 饼图

在上述代码中,将legend设置为vertical,是为了避免水平显示后会与标题重叠。这里将tooltip的显示格式设置为:formatter: '{a} <br/>{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数据可视化:入门、实战与进阶》,经出版方授权发布。

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

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

转载请联系微信:DoctorData

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

看看作者怎么说

????

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

划重点????

干货直达????

  • 终于有人把智能语音处理讲明白了

  • 终于有人把5G+人工智能讲明白了

  • 终于有人把条件概率和贝叶斯公式讲明白了

  • 手把手教你用ECharts画柱状图

更多精彩????

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

查看更多优质内容!

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

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

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

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

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

????

手把手教你用ECharts画饼图和环形图相关推荐

  1. 手把手教你用ECharts画柱状图

    导读:柱状图主要用于表示离散数据的频数,也是一种基础可视化图. 作者:王大伟 来源:大数据DT(ID:hzdashuju) 01 简单的柱状图 在ECharts中制作柱状图也十分简单,通过将serie ...

  2. 手把手教你用ECharts画折线图

    导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:大数据DT(ID:hzdashuju) 在正式学习之前,先来了解一个ECharts官网提供的很好用的 ...

  3. 折线图_手把手教你用ECharts画折线图

    导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:华章科技 在正式学习之前,先来了解一个ECharts官网提供的很好用的功能.该功能可以实时显示代码的 ...

  4. 手把手教你用AI画梵高的《星空》

    导读:有人说,AI会导致失业:也有人说,AI创造大量工作机会,各行各业对AI人才的需求都将日益增加. AI在模仿人类的学习方式,那么,人类又该怎样学习AI?本文就带你了解一本学习AI的神书. 来源:华 ...

  5. python怎么画多重饼状图_Python通过matplotlib画双层饼图及环形图简单示例

    (1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...

  6. 还在到处寻找画图软件?快来用Typora画饼图、时序图、流程图、UML图和状态图吧

    Markdown是我最喜欢的写作格式,现在我的博客.笔记等都是用markdown格式写的,基础的文字编辑相关的语法用的已经很顺手了,本文就来记录一下用Markdown编辑器画图的方法. 我现在使用一款 ...

  7. Tableau画条形图、直方图、折线图、饼图、环形图、箱线图

    Tableau画条形图.直方图.折线图.饼图.环形图.箱线图.雷达图 一.条形图 第一步,打开"豆瓣电影数据.xlsx": 第二步,画各国家电影评分直方图.选择"产地&q ...

  8. vue 使用echarts实现3D饼图和环形图

    记录一下echarts实现3d饼图和环形图功能## 标题 实现效果 首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...

  9. python画环形图_Python通过matplotlib画双层饼图及环形图简单示例

    摘要:这篇Python开发技术栏目下的"Python通过matplotlib画双层饼图及环形图简单示例",介绍的技术点是"matplotlib.Python.简单示例.饼 ...

最新文章

  1. 关于学习Python的一点学习总结(15)
  2. OracleDBConsoleorcl服务无法启动问题(1053错误、发生服务特定错误2)
  3. bazel 链接第三方动态库_Linux 动态库与静态库制作及使用详解
  4. 5G LAN — Overview
  5. Python 【大风号】短视频的自动上传与发布实例演示,同时支持抖音、快手、哔哩哔哩、小红书、微视、西瓜视频、微信视频号等平台的视频自动化同步发布
  6. BZOJ3075[USACO 2013 Mar Gold 3.Necklace]——AC自动机+DP
  7. Puppet 的部署与应用,看这一篇就够了
  8. jdbc mysql分页_JDBC【数据库连接池、DbUtils框架、分页】
  9. 区块链概念——学习笔记
  10. 【原创】查找原始MySQL死锁ID
  11. -lavutil -lavcodec -lavdevice -lavfilter -lavformat链接失败,换用-lffmpeg
  12. 全开源JAVA支付系统/jeepay聚合支付四方支付系统
  13. javascript轮播图超详细
  14. 数据清洗第六章—课后操作题
  15. JAVA基础之Http协议
  16. java设计模式adapter,java设计模式-适配器模式(Adapter)
  17. 【黄啊码】php结合redis实现商城在线秒杀抢购
  18. 用这9个问题来审视自己
  19. php 无限极分销,PHP实现无限极分类的两种方式
  20. 一文全懂,Android程序员最新职业规划

热门文章

  1. C++设计模式-桥接模式
  2. C++多继承与虚继承
  3. C++学习笔记-windows底层粗略认识
  4. docker 安装mysql5.6
  5. 前端图片有时候能显示有时候不显示_web前端基础教程:两种数据存储思路
  6. 信息 按顺序打印commit_提高效率的 10 个 Git 小技巧
  7. linux搭建测试环境常见问题,在Linux环境下搭建CCID测试环境
  8. Linux系统编程19:基础IO之了解Linux中的标准输入和输出以及相关的系统调用接口(如write,read等)
  9. C++使用localtime函数需要注意的地方
  10. 116. 填充每个节点的下一个右侧节点指针