Echarts在线免费图表

 
            let data = [
      { value: 645, name: '一类对象' },
      { value: 890, name: '二类对象' },
      { value: 560, name: '三类对象' },
      { value: 587, name: '四类对象' },
];
let color = ['#156AEA', '#DDB31F', '#80EA15', '#00F0F0'];
option = {
   //你的代码
   backgroundColor:"#000",
   color: color,
   tooltip: {
      show: true,
      backgroundColor: 'rgba(13,5,30,.6)',
      borderWidth: 1,
      borderColor: '#32A1FF',
      padding: 5,
      textStyle: {
         color: '#fff'
      },
      confine: true,
      // extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      formatter(params) {
         // console.log(params)
         if (params.name === '') {
               return '';
         }
         return `${params.name} : ${params.value}人 占比 : ${params.percent}%`;
      },
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ['50%', '70%'],
         center: ['50%', '45%'], // 修改为居中
         avoidLabelOverlap: true,
         label: {
               color: '#fff',
               alignTo: 'labelLine',
               formatter: '{name|{b}}：{num|{c}}人 \n\n{zb|{d}}%',
               minMargin: 5,
               edgeDistance: 10,
               lineHeight: 15,
               rich: {
                  num: {
                     fontSize: 14,
                     color: '#FFFFFF'
                  },
                  zb: {
                     fontSize: 14,
                     color: '#FFFFFF'
                  }
               }
         },
         labelLine: {
               length: 15,
               length2: 40,
               maxSurfaceAngle: 80
         },
         data: data
      }
   ]
};