ECharts 环形饼图配置

官网文档：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，隐藏冗余的空白部分。