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

我的环形图表效果图：

配置：

  //常用颜色列表
  colors: string[] = ['#FF767C', '#FFA262', '#9FE11F', '#3ED389', '#71C8FF', '#9EA2FF'];
  //获取数据及渲染样式
  getOption = () => {
    let assembledDatas = this.getAssembledDataList();
    let option = {
      //数据加载时间为0，规避初始化时加载动画偏移的问题
      animationDurationUpdate: 0,
      title: {
        text: this.props.commentCount,
        textStyle: {
          color: '#333333',
          fontFamily: 'Microsoft YaHei',
          fontSize: 24,
          lineHeight: 26,
          fontWeight: 'normal',
        },
        x: 'center',
        y: 'center',
      },
      //hover提示
      tooltip: {
        formatter: '{b}({d}%)',
      },
      //标签文本
      label: {
        color: '#666666',
        fontFamily: 'Microsoft YaHei',
        fontSize: 14,
        lineHeight: 16,
        formatter: '{b} {c}',
      },
      //标签线条
      labelLine: {
        lineStyle: {
          color: '#666666',
        },
      },
      //定义全局颜色盘
      color: this.colors,
      series: [
        {
          name: '系列名',
          type: 'pie',
          center: ['50%', '50%'], // 饼图的圆心坐标
          radius: ['24%', '34%'], //内外圆圈
          data: assembledDatas,
          hoverOffset: 4,
        },
      ],
    };
    return option;
  }

数据：

  //获取标签数据列表（如果需要在指定data项中添加定制样式，可以往这里加）
  getAssembledDataList() {
    let datas: any[] = [];
    const sourceDatas = this.props.datas;
    if (sourceDatas) {
      for (let index = 0; index < sourceDatas.length; index++) {
        const dataItem = sourceDatas[index];
        datas.push({
          value: dataItem.cupCount,
          name: dataItem.typeName,
        });
      }
    }
    return datas;
  }

添加图表：

  render() {
    return (
      <div className="pieChart">
        <ReactEcharts option={this.getOption()} />
      </div>
    );
  }

一些引用：

import React, { Component } from 'react';
//导入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';

 

遇到的几个问题：

1. 数据初始加载时，有一个更新动画，但是是从显示区域的左侧弹出来的。

原因：默认是从左侧出来的。暂时未找到直接设置初始动画位置的属性。如果直接关闭Animation=false，Hover动画也会被禁用（即使设置hoverAnimation也加不回来）

规避：设置数据加载耗时为0，即数据加载时，不设置动画。

2. 图表有个最小高宽，如果小于这个最小高亮，图表会加载不出来。

原因：他们的设计如此，说是需要一个加载的空间。
规避：可以等数据加载完成后，resize图表。或者调整图表的margin，隐藏冗余的空白部分。