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);

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
    data: ['legend1', 'legend2', 'legend3', 'legend4', 'legend5']
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['66%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 1000,
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      // 占位样式
      emptyCircleStyle:{
        color:'rgba(255,255,255,0)'
      },
      labelLine: {
        show: false
      },
      data: n
    }
  ]
};

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)
    }
  })
  console.log(newDataFilter);
  let nn = computedDataGap(newDataFilter);
  myChart.setOption({
    series:[
      {
        data:nn
      }
    ]
  })
  console.log(lparam)
})