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
};
const dataList = result.data, total = result.total;
dataList.sort((a, b) => { return b.count - a.count; })
let optionSeries = []
let length = dataList.length, startAngle = 180, maxRaduis = [100, 20], radiusWidth = (maxRaduis[0] - maxRaduis[1]) / length;
dataList.forEach((info, i) => {
   let outRadius = (length - i - 1) * radiusWidth + maxRaduis[1];
   let radius = [(outRadius + radiusWidth / 2) + '%', (outRadius + radiusWidth) + '%'], center = ['50%', '90%'];
   optionSeries.push({
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      startAngle,
      radius,
      center,
      label: {
         show: false,
      },
      labelLine: {
         show: false,
      },
      name: '服务',
      data: [{
         value: info.count,
         name: info.value,
         itemStyle: {
            normal: {
               color: colorList[i],
               borderRadius: 300,
            },
         },
         label: {
            show: false
         },
         labelLine: {
            show: false
         },
      }, {
         value: total * 2 - info.count,
         itemStyle: {
            color: 'rgba(0,0,0,0)',
         },
         label: {
            show: false
         },
         labelLine: {
            show: false
         },
         tooltip: {
            show: false
         },
      }]
   });
   optionSeries.push({
      type: 'pie',
      z: 1,
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      startAngle,
      radius,
      center,
      label: {
         show: false
      },
      data: [{
         value: 5,
         itemStyle: {
            normal: {
               color: '#004464',
               borderRadius: 30,
            },
         },
         tooltip: {
            show: false
         },
      }, {
         value: 5,
         itemStyle: {
            color: 'rgba(0,0,0,0)',
         },
         tooltip: {
            show: false
         },
      }]
   });
})
option = {
   color: colorList,
   title: {
      show: false,
   },
   legend: {
      show: false,
   },
   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)'
      },
   },
   series: optionSeries
}