Echarts 多环饼图实现

实现效果图

实现逻辑

经两个（或以上）的数据种类，通过radius设置图形的半径堆叠出图形，itemStyle隐藏多余图形等方式渲染出图形大致形状，按自身实际业务场景完成配置后，按对应数据结构注入相应的数据即可实现。（具体配置参考如下代码）

具体代码

option = {
  tooltip: {
    trigger: 'item',
    showContent: true
  },
  legend: {
    bottom: '5%',
    left: 'center',
    selectedMode: false, // 控制通过点击图例改变系列的显示状态的功能。false关闭
  },
  series: [
  	// 内层环数据
    {
      name: 'Access From',
      z: 10,
      type: 'pie',
      radius: ['20%', '40%'], 
      avoidLabelOverlap: true, // 若为false，存在两个或以上引导线数据重叠时会有部分不显示
      label: {
        show: true,
        rotate: 0,
        align: 'left'
      },
      labelLine: {
        show: true,
        length: 60,
        length2: 30,
      },
      data: [
        { value: 100, name: '内层1' },
        { value: 500, name: '内层2' },
      ]
    },
    // 外层环数据
    {
      name: 'Access From',
      z: 5,
      type: 'pie',
      radius: ['40%', '60%'],
      label: {
        show: true,
        rotate: 0,
        align: 'left'
      },
      labelLine: {
        show: true,
        length: 40,
        lineStyle: {
          color: 'red'
        }
      },
      data: [
        { value: 65, name: '外层1' },
        { value: 35, name: '外层2' },
        { value: 500, 
          name: '内层2',
          label: {
            show: false
          },
          labelLine: {  // 设置此数据引导线不可见
            show: false,
            length: 0,
            length2: 0
          },
          itemStyle: {  // 设置此数据图形样式不可见
            opacity: 0  
          } 
        }
      ],
      tooltip: {
        formatter: (e) => {
        if(e.name == '外层3') {  // 根据实际需要，隐藏对应数据的tooltips
            return
          }
          return `${e.name}：${e.value}`
        }
      }
    }
  ]
};

可以直接复制到echarts示例上调试