Echarts在线免费图表

 
            let colorList = ['#00A3F0', '#00FED2', '#FFD37A', '#F08200', '#F04900', '#F00000', '#F000A9', '#8200F0', '#ea7ccc'];
let result = {
   "data": [
      { "key": "3", "value": "通知宣教类", "count": 4447618, "rate": "44.1" },
      { "key": "11", "value": "抗击疫情随访类", "count": 4477025, "rate": "44.4" },
      { "key": "2", "value": "体检预约类", "count": 519717, "rate": "5.2" },
      { "key": "1", "value": "慢病随访", "count": 320120, "rate": "3.2" },
      { "key": "7", "value": "计免科随访", "count": 116525, "rate": "1.2" },
      { "key": "5", "value": "基层考核类", "count": 111670, "rate": "1.1" },
      { "key": "8", "value": "儿保科随访", "count": 54807, "rate": "0.5" },
      { "key": "4", "value": "医院满意度调查", "count": 16502, "rate": "0.2" },
      { "key": "9", "value": "妇保科随访", "count": 11900, "rate": "0.1" }],
   "total": 11393722
};
let baseData = [];
for (var i = 0; i < result.data.length; i++) {
   baseData.push({
      value: result.data[i].count,
      name: result.data[i].value,
      itemStyle: {
         normal: {
         shadowBlur: 20,
         shadowColor: colorList[i],
         },
      },
   });
}
option = {
   title: {
      show: false
   },
   color:colorList,
   tooltip: {
      show: true,
      trigger: 'item',
      padding: [8, 15],
      backgroundColor: 'rgba(12, 51, 115,0.8)',
      borderColor: 'rgba(3, 11, 44, 0.5)',
      textStyle: {
         color: 'rgba(255, 255, 255, 1)'
      },
   },
   legend: {
      show: false,
   },
   grid: {
      top: 0,
      left: 10,
      right: 0,
      bottom: 10,
   },
   series: [
      {
         startAngle: -90,
         name: '分布',
         type: 'pie',
         radius: ['68%', '85%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         label: {
            show: false
         },
         data: baseData,
         itemStyle: {
            normal: {
               borderRadius: 80,
               borderCap: 'round',
            },
         },
      }
   ],
};