Echarts在线免费图表

 
            let data = [
   {
      name: '咨询类数量',
      value: 5000,
      pro: 50
   },
   {
      name: '投诉类数量',
      value: 3000,
      pro: 30
   },
   {
      name: '评价类',
      value: 2000,
      pro: 20
   }
]
const pushZero = (n) => {
   if (n % 10 == 0) {
      return n + '.00'
   } else {
      return n
   }
}
let colors = ['#3B8CE9', '#5BC374', '#EA6672'];
let dataNameMap = {
   '咨询类数量': 'zxl',
   '投诉类数量': 'tsl',
   '评价类': 'pjl'
}
let legendRichs = {
   title:{
      color:'#000',
      fontSize:16,
   },
   nicon:{
      backgroundColor:'#ccc',
      fontSize:16,
      height:4,
      color:"rgba(255,255,255,0)"
   }
};

let selects = {};
let legend = data.map((v)=>v.name);
data.map((item,key)=>{
   let iconk = dataNameMap[item.name];
   selects[item.name] = true;
   legendRichs[iconk] = {
      backgroundColor:colors[key],
      fontSize:16,
      height:4,
      color:"rgba(255,255,255,0)"
   }
})

option = {
   //你的代码
   color: colors,
   backgroundColor: "#fff",
   series: [
      {
         type: 'pie',
         radius: ['30%', '35%'],
         center: ['50%', '50%'],
         label: {
            show: false,
         },
         data: data,
         itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
         },
         minAngle: 3
      }
   ],
   legend: [
      {
         orient: 'horizontal',
         left: 'center',
         bottom: '10%',
         icon: 'circle',
         formatter: (leg) => {
            let iconK = dataNameMap[leg];
            if(selects[leg]){
               return `{title|${leg}}\n{${iconK}|${leg}}`
            }else{
               return `{title|${leg}}\n{nicon|${leg}}`
            }
         },  //14 + 14 + 18
         itemWidth: 0,
         itemHeight: 0,
         padding: 0,
         data: legend,
         textStyle: {
            rich: legendRichs
         }
      }
   ]
};

myChart.on('legendselectchanged', (event) => {
   selects = event.selected;
   myChart.setOption({
      legend: {}
   })
})