Echarts在线免费图表

 
            let data = [
   { value: 1048, name: 'legend1' },
   { value: 1048, name: 'legend2' },
   { value: 1048, name: 'legend3' },
   { value: 1048, name: 'legend4' },
   { value: 1048, name: 'legend5' },
]
let colors = ['#5470c6', '#fedb5f', '#73c0de', '#fc8452', '#ea7ccc']
data.map((item, k) => {
   item['itemStyle'] = { color: colors[k] }
})
const computedDataGap = (dataParam) => {
   let newData = [];
   let gapItem = {
      value: 20, 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) => {
      newData.push(v)
      if (v.value) {
         newData.push(gapItem)
      }
   })
   return newData;
}
let n = computedDataGap(data);
let n2 = n.map((v) => {
   if (v.name) {
      return {
         ...v,
         'itemStyle': {
            color: 'red',
            opacity: 0
         }
      }
   } else {
      return v;
   }
})

option = {
   tooltip: {
      trigger: 'item'
   },
   legend: {
      top: '5%',
      left: 'center',
      data: ['legend1', 'legend2', 'legend3', 'legend4', 'legend5']
   },
   backgroundColor:"#fff",
   series: [

      {
         name: 'Access From',
         type: 'pie',
         radius: ['36%', '60%'],
         avoidLabelOverlap: false,
         label: {
            show: false,
         },
         emphasis: {
            disabled: true
         },
         // 占位样式
         emptyCircleStyle: {
            color: 'rgba(255,255,255,0)'
         },
         labelLine: {
            show: false
         },
         data: n
      },
      {
         name: 'Access From',
         type: 'pie',
         radius: ['62%', '61%'],
         avoidLabelOverlap: false,
         itemStyle: {
            borderRadius: 1000,
         },
         label: {
            show: false,
            position: 'center'
         },
         emphasis: {
            disabled: true
         },
         // 占位样式
         emptyCircleStyle: {
            color: 'rgba(255,255,255,0)'
         },
         labelLine: {
            show: false
         },
         data: n
      },
      {
         name: 'Access From',
         type: 'pie',
         radius: ['66%', '67%'],
         avoidLabelOverlap: false,
         label: {
            show: false,
            position: 'center'
         },
         emphasis: {
            disabled: true
         },
         // 占位样式
         emptyCircleStyle: {
            color: 'rgba(255,255,255,0)'
         },
         id: 'wai',
         data: n2
      },
   ]
};
let k = 0;
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 = nn.map((v) => {
      if (v.name) {
         return {
            ...v,
            'itemStyle': {
               color: 'red',
               opacity: 0,
            }
         }
      } else {
         return v;
      }
   })
   myChart.setOption({
      series: [
         {
            data: nn
         },
         {
            data: nn
         },
         {
            data: nn2
         }
      ]
   })
})
myChart.on('mouseover', function (lparam) {
   let k = lparam.dataIndex;
   let data = myChart.getOption().series[0].data;
   let nn2 = data.map((v, i) => {
      if (v.name) {
         return {
            ...v,
            'itemStyle': {
               color: 'red',
               shadowBlur: 10,
               shadowColor: 'red',
               opacity: k == i ? 1 : 0
            }
         }
      } else {
         return v;
      }
   })
   myChart.setOption({
      series: [
         {
            id: 'wai',
            data: nn2
         }
      ]
   })
})