React + Echarts 绘制环形嵌套

我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

Reach + Echarts 模仿完成一个大约相似的。

装置指令

yarn add echarts echarts-for-react

或者

npm install --save echarts echarts-for-react

初始使用

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import './index.css'
export default class Line extends React.Component {
  getOption = () => {
    let option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    return option
  }
  render() {
    return (
      <div className='wrapper'>
        <ReactEcharts option={this.getOption()} style={{ height: '400px' }} />
      </div>
    )
  }
}

要变成这个样子

1.删去 tooltip 和 legend 两个选项。

2.添加颜色

color: ['#7B79FF', '#FFB0E2', '#59CFFF'],

3.改变 radius 宽度

radius: ['95%', '96%'],

4. 修正 itemStyle

itemStyle: {
  normal: {
    label: {
      show: false,
        position: 'outside'
    },
    labelLine: {
      show: false,
        length: 100,
          smooth: 0.5
    },
    borderWidth: '6',
    borderColor: "#7B79FF",
  }
},

5. 修正 data

{
  value: 7,
  name: '入厕人数'
},
{
  value: 3,
  name: '',
  itemStyle: {
    normal: {
      label: {
        show: false,
        position: "center"
      },
      labelLine: {
        show: false
      },
      color: "rgba(255, 255, 255, 0.0)",
      borderColor: "rgba(255, 255, 255, 0.0)",
      borderWidth: 6
    },
    emphasis: {
      color: "rgba(255, 255, 255, 0.0)",
      borderColor: "rgba(255, 255, 255, 0.0)",
      borderWidth: 0
    }
  }
}

这样一个就好了，嵌套环形，只需要复制粘贴一份，然后修正 radius 数据。比方，第二组数据改为 radius: ['85%', '86%']。