ECharts 实现环形饼图、圆环图

需求

实现环形饼图/圆环图（中间镂空），环形中间空白处显示主标题和副标题。

圆环 radius

series.radius设置为数组类型。例：radius: ['45%', '50%']。

第一项是内半径，第二项是外半径。

将内半径设置为大于0，会显示成圆环图（Donut chart）

option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '50%'],
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

圆环中间文字 graphic

option = {
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: '45%',
      style: {
        text: '测试标题123',
        fontSize: 16,
        fill: '#ff3366'
      },
      draggable: true
    },
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        text: '测试标题123',
        fontSize: 20,
        fontWeight: 'bold',
        fill: '#ff3366'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '54%',
      style: {
        text: '测试副标题123',
        fontSize: 14,
        fill: '#999'
      },
      draggable: 'vertical'
    }
  ],
}

参考

https://echarts.apache.org/zh/option.html#series-pie.radius

https://echarts.apache.org/zh/option.html#graphic.elements-text