vue3+echarts实现带有间隔的双重环图

1.在template中定义

<div ref="chartRef" class="w-full h-[200px]"></div>

2.在js中完成对数据的处理

  const datalist = [
    {id: 1, name: '标题1', value: 25},
    {id: 2, name: '标题2', value: 25},
    {id: 3, name: '标题3', value: 25},
    {id: 4, name: '标题4', value: 25}
  ]
  let colorList = [
    "#D3F0FF",
    "#F05A23",
    "#00FFFF",
    "#00B2FF",
  ];
  const convertToRGBA = (color, opacity) => {
    const hex = color.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

  const colors = colorList.map(color => convertToRGBA(color, 0.3));
  let data = [];
  let data2 = []
  for (let i = 0; i < datalist.length; i++) {
    data.push(
      {
        value: datalist[i].value,
        name: datalist[i].name,
        itemStyle: {
          // shadowBlur: 20,
          color: colorList[i],
          // shadowColor: colorList[i],
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      }
    );
    data2.push(
      {
        value: datalist[i].value,
        name: datalist[i].name,
        itemStyle: {
          // shadowBlur: 20,
          color: colors[i],
          // shadowColor: colorList[i],
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      }
    );
    
  }

3.对圆环图进行配置

 const chartRef = ref()
  const pieChart = ref()

  function initCharts() {
    if (!pieChart.value)
        pieChart.value = markRaw(echarts.init(chartRef.value));
    else pieChart.value.clear();
    pieChart.value.setOption({
      tooltip: {
        show: true,
      },
      series: [
        {
          //外环大小
          type: 'pie',
          radius: ['58%', '68%'],
          center: ["51.5%", "41%"],
          z: 10,
          clockWise:false,
          label: {//对牵引线的内容进行自定义
            show: true,
            position: 'outer',
            align: 'left',
            clockWise:false,
            height:30,
            lineHeight: 10,
            formatter: function (params) {
              if (params.name !== "") {
                let data = datalist;
                let total = 0;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == params.name) {
                    tarValue = data[i].value;
                  }
                }
                let v = tarValue;
                let per = getPercent(v, total, 1);
                return [
                  `{a|${params.name}}\n\n` + `{c|${per}}` + `{d|%}  `,
                ];
              } else {
                return "";
              }
            },
            rich: {
              a: {
                fontSize: 16,
                color: '#c5f1ff',
                fontWeight: 400,
                fontFamily: 'Regular'
              },
              c: {
                color: '#00ffff', 
                fontSize: 24,
                fontWeight: 600,
                fontFamily: 'AGENCYR',
                padding: [10, 0, 0 , 0]
              },
              d: {
                color: '#fff', 
                fontSize: 14,
                fontWeight: 400,
                padding: [10, 0 ,0 ,5]
              }
              },
            borderWidth:10,
            padding: [0, -50],
          },
        labelLine: {
          show: true,
          length: 40,
          length2: 80,
          smooth: 0,
          lineStyle: {
            type: 'dashed'
          }
        },
          emphasis: {
            label: {
              show: true,
              fontSize: "14",
            },
          },
          data: data,
        },
        {
           //不透明的圆环的设置
          name:'',
          radius: ['45%','68%'],
          center: ["51.5%", "41%"],
          type:'pie',
          gap: 1.71,
          clockWise:false,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex % colorList.length] + "40";
              },
            }
          },
          label: {
            normal: {
              show:false
            },
            emphasis: {
              show:false
            }
          },
          labelLine: {
            normal: {
              show:false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
              },
            },
          },
          animation:true,
          tooltip: {
            show:true
          },
          silent: true,
          data: data2
        }
      ],
    });
  }
  onMounted(() => {
    initCharts()
  })

最后就能实现双重的圆环图效果