Echarts在线免费图表

 
            let data = [
   { value: 3048, name: '高圆圆' },
   { value: 900, name: '迪丽热巴' },
   { value: 2048, name: '杨超越' },
   { value: 1048, name: '刘诗诗' },
   { value: 6048, name: '刘亦菲' },
]
// 用的16进制颜色；方便与 外层透明色的修改；
let colors = ['#98EECC', '#FF78C4', '#E4A5FF', '#30A2FF', '#FC4F00'];
let legends = [];
data.map((item, k) => {
   legends.push(item.name);
   item['itemStyle'] = { color: colors[k] }
})
const computedDataGap = (dataParam, isN2 = false) => {
   let newData = [];
   let gapItem = {
      value: 40,  //间隙值；我这里没计算；可以做一个函数根据总数和需要的value计算添加
      name: null,
      itemStyle: {
         opacity: 0
      },
      tooltip: {  //隐藏这个的鼠标悬浮
         show: false,
      },
   }
   let showLen = dataParam.filter((v) => v.value && v.value > 0);
   if (showLen.length <= 1) {
      return dataParam;
   }
   dataParam.map((v, k) => {
      let v_ = v;
      // 用于判断是否是 外城pie的item
      if (isN2) {
         // 计算传入数据的value总和 用于计算2PI对于总数的均值
         let count = dataParam.map((v) => v.value).reduce((a, b) => a + b);
         let pi = Math.PI * 2 / count;

         // 例如leged2 开始的角度需要加上legend1的结束的位置则加上当前的value
         let beforeCount = 0;
         // for 循环i < k 不包含map循环的item
         for (let i = 0; i < k; i++) {
            beforeCount += dataParam[i].value;
         }
         // 结束的
         let afterCount = beforeCount + v.value;

         let endAngle = pi * beforeCount;
         let startAngle = pi * afterCount;
         let angle = (endAngle + startAngle) / 2;
         angle = angle * 180 / Math.PI;
         v_ = {
            ...v,
            itemStyle: {
               color: v.itemStyle.color + '7a'
            },
            label: {
               show: true,
               position: 'inside',
               color: "#000",
               rotate: -angle,
               fontSize: 16,
               color: '#333'
            }
         }
      }
      newData.push(v_)
      if (v.value) {
         newData.push(gapItem)
      }
   })
   return newData;
}
let n = computedDataGap(data);
let n2 = computedDataGap(data, true);
// 最终数据处理结果在这；一眼懂
console.log(n, n2);

option = {
   backgroundColor: "#fff",
   tooltip: {
      trigger: 'item'
   },
   legend: {
      top: '16%',
      left: 'center',
      data: legends
   },
   color: colors,
   series: [
      {
         name: 'Access From',
         type: 'pie',
         radius: ['25%', '30%'],
         // 避免label重叠
         avoidLabelOverlap: false,
         // 占位样式
         emptyCircleStyle: {
            color: 'rgba(255,255,255,0)'
         },
         label: { show: false },
         data: n,
         tooltip: { show: false },
         emphasis: {
            disabled: true
         }
      },
      {
         name: 'Access From',
         type: 'pie',
         radius: ['30%', '50%'],
         // 避免label重叠
         avoidLabelOverlap: false,
         // 占位样式
         emptyCircleStyle: {
            color: 'rgba(255,255,255,0)'
         },
         labelLine: {
            show: false
         },
         label: {  //这里加上用于剩余最后一个占满时的旋转； 在data的label没有时则用这个；且data内的优先级高于此
            show: true,
            position: 'inside',
            color: "#000",
            rotate: 0
         },
         data: n2
      }
   ]
};

myChart.on('legendselectchanged', function (lparam) {
   let selects = lparam.selected;
   let newDataFilter = [];
   data.filter((item) => {
      if (selects[item.name]) {
         newDataFilter.push(item);
      } else {
         let clone = {
            ...item,
            value: 0
         }
         newDataFilter.push(clone)
      }
   })
   let nn = computedDataGap(newDataFilter);
   let nn2 = computedDataGap(newDataFilter, true);
   myChart.setOption({
      series: [
         {
            data: nn
         },
         {
            data: nn2
         }
      ]
   })
   console.log(lparam)
})