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，隱藏冗余的空白部分。