环形图+牵引线+划上显示边框其余淡出

 接收的数据：

option代码:

const option = {
      //数据划上悬浮效果
      tooltip: {
        trigger: 'item',
        formatter(params) {
          if (Array.isArray(params)) {
            const strArr = params.map((ele) => {
              return `${ele.marker}: ${ele.data.value}${ele.data.unit}<br/>`;
            });
            strArr.unshift(`${params[0].name}<br/>`);
            return strArr.join('');
          }
          return         
             `${params.marker}${params.name}:${params.data.value}${params.data.unit}`;
        },
      },
      legend: {
        bottom: '10',
        left: 'center',
        itemHeight: 7,
        itemWidth: 7,
        icon: 'circle',
      },
      //调整图表在div中的位置
      grid: {
        containLabel: true,
        left: '0%',
        right: '0%',
        top: 0,
        bottom: '0%',
      },
      //color数组，饼图按照顺序选择使用的颜色
      color: [
        '#8DC9EB',
        '#A5D3BC',
        '#CFE7D1',
        '#AFD3F3',
        '#9DBAE6',
        '#F08EAB',
        '#F0AC93',
        '#E07E7E',
      ],
      series: [
        {
          type: 'pie',
          radius: ['40%', '60%'],//环的大小
          center: ['50%', '45%'], //饼图位置
          avoidLabelOverlap: false,
          hoverAnimation: false,//hover划上环不放大
          label: {
            normal: {
              show: true,
              position: 'outer',
              //牵引线文字设置
              textStyle: {
                color: 'grey',
                fontSize: 12,
              },
              //牵引线显示的文字处理
              formatter(params) {
                return `${params.data.value}${params.data.unit}`;
              },
            },
          },
          //hover效果
          emphasis: {
            //hover高亮显示区域，其他区域淡出
            focus: 'self',
            blurScope: 'coordinateSystem',
            //高亮显示牵引线
            labelLine: {
              show: true,
            },
            //图形描边
            itemStyle: {
              borderColor: '#000',
              borderWidth: 1,
            },
          },
          //牵引线设置
          labelLine: {
            normal: {
              show: true,
              length: 15,
              length2: 0,//第二条线长度为0
            },
          },
          //对后端拿到的数据进行处理
          data: chartData.map((item) => {
            return {
              name: item.name,
              value: formatData(item.value),
              unit: unit,
            };
          }),
        },
      ]
    };

标签：return,value,边框,params,unit,ele,淡出,data,划上
来源： https://blog.csdn.net/qq_45849232/article/details/121160042