官网文档：https://echarts.apache.org/zh/option.html#series-pie.type
使用案例指导：https://echarts.apache.org/zh/tutorial.html#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F
我的环形图表效果图：
配置：
1 //常用颜色列表
2 colors: string[] = ['#FF767C', '#FFA262', '#9FE11F', '#3ED389', '#71C8FF', '#9EA2FF'];
3 //获取数据及渲染样式
4 getOption = () => {
5 let assembledDatas = this.getAssembledDataList();
6 let option = {
7 //数据加载时间为0，规避初始化时加载动画偏移的问题
8 animationDurationUpdate: 0,
9 title: {
10 text: this.props.commentCount,
11 textStyle: {
12 color: '#333333',
13 fontFamily: 'Microsoft YaHei',
14 fontSize: 24,
15 lineHeight: 26,
16 fontWeight: 'normal',
17 },
18 x: 'center',
19 y: 'center',
20 },
21 //hover提示
22 tooltip: {
23 formatter: '{b}({d}%)',
24 },
25 //标签文本
26 label: {
27 color: '#666666',
28 fontFamily: 'Microsoft YaHei',
29 fontSize: 14,
30 lineHeight: 16,
31 formatter: '{b} {c}',
32 },
33 //标签线条
34 labelLine: {
35 lineStyle: {
36 color: '#666666',
37 },
38 },
39 //定义全局颜色盘
40 color: this.colors,
41 series: [
42 {
43 name: '系列名',
44 type: 'pie',
45 center: ['50%', '50%'], // 饼图的圆心坐标
46 radius: ['24%', '34%'], //内外圆圈
47 data: assembledDatas,
48 hoverOffset: 4,
49 },
50 ],
51 };
52 return option;
53 }
数据：
1 //获取标签数据列表（如果需要在指定data项中添加定制样式，可以往这里加）
2 getAssembledDataList() {
3 let datas: any[] = [];
4 const sourceDatas = this.props.datas;
5 if (sourceDatas) {
6 for (let index = 0; index < sourceDatas.length; index++) {
7 const dataItem = sourceDatas[index];
8 datas.push({
9 value: dataItem.cupCount,
10 name: dataItem.typeName,
11 });
12 }
13 }
14 return datas;
15 }
添加图表：
1 render() {
2 return (
3 <div className="pieChart">
4 <ReactEcharts option={this.getOption()} />
5 </div>
6 );
7 }
一些引用：
1 import React, { Component } from 'react';
2 //导入饼图
3 import 'echarts/lib/chart/pie';
4 import 'echarts/lib/component/tooltip';
5 import 'echarts/lib/component/title';
6 import 'echarts/lib/component/legend';
7 import 'echarts/lib/component/markPoint';
8 import ReactEcharts from 'echarts-for-react';
遇到的几个问题：
1. 数据初始加载时，有一个更新动画，但是是从显示区域的左侧弹出来的。
原因：默认是从左侧出来的。暂时未找到直接设置初始动画位置的属性。如果直接关闭Animation=false，Hover动画也会被禁用（即使设置hoverAnimation也加不回来）
规避：设置数据加载耗时为0，即数据加载时，不设置动画。
2. 图表有个最小高宽，如果小于这个最小高亮，图表会加载不出来。
原因：他们的设计如此，说是需要一个加载的空间。
规避：可以等数据加载完成后，resize图表。或者调整图表的margin，隐藏冗余的空白部分。
