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

系列推荐

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

问题概览

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

介绍

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

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

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

与其余图表的不一样

属性	饼图	坐标轴图表（柱图、折线图...）
标签的视觉引导线	有	无
tooltip悬浮提示类型	item、none	item、axis、none

这里就会引入一个概念，类目轴，能够理解为维度（文字）轴。通常指的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：扇区圆心角相同，仅经过半径展现数据大小

项目地址