Echarts数据可视化：图表篇（3）—— 饼图

系列推荐

《JavaScript设计模式与开发实践》最全知识点汇总大全

问题概览

1. 饼图的种类有哪几种，它们之间的区别。如何进行转换？
2. 饼图和柱图、折线图有什么区别？

介绍

饼图种类分为面积饼图、环形饼图、南丁格尔玫瑰图

设置饼图前，需要了解饼图的基本元素构成

1. 饼图的中心（和坐标轴图表不同，饼图可以自定义其在容器中的位置）
2. 饼图的半径（确认饼图的大小，设置两个值时可以将普通饼图转换为环形饼图）
3. roseType（是否为南丁格尔图）

与其他图表的不同

这里就会引入一个概念，类目轴，可以理解为维度（文字）轴。一般指的X轴，条形图中即是Y轴

常见属性

视觉引导线：labelLine

视觉引导线分成两段，只有在标签（label）位置（position）为‘outside’时才会生效。拥有normal（普通）、emphasis（高亮）两个状态

相关属性

1. length：视觉引导线第一段长度
2. length2：视觉引导线第二段长度
3. smooth：是否平滑展示
4. lineStyle：引导线样式（可以设置颜色、宽度、类型...）

标签：label

作为引导线的前置条件，标签。可以说明饼图的一些额外信息，也拥有normal（普通）、emphasis（高亮）两个状态

相关属性

1. position：标签的位置，为‘outside’时，展示在饼图外侧，inside和inner则在饼图内侧。center一般用于环形图，标签位于饼图中心
2. rich：富文本样式，可以自定义一些特殊效果

环形图

将普通饼图转换成环形图，需要将radius（饼图半径）设置两个值，分别代表内半径、外半径

玫瑰图

将普通饼图转换成玫瑰图，需要将roseType设置为‘radius’或者‘area’

模式区别

1. radius：扇区圆心角展示数据百分比，半径展示数据大小
2. area：扇区圆心角相同，仅通过半径展示数据大小

项目地址