Echarts在线免费图表

 
            const a = [
   { name: '施工作业', value: 2 },
   { name: '巡检', value: 7 },
   { name: '踏勘', value: 5 },
   { name: '抢修', value: 4 },
   { name: '维修', value: 4 },
   { name: '参观', value: 4 },
   { name: '检查', value: 3 },
   { name: '未知', value: 4 },
]
const color = ['#5470c6', '#91cc75', '#fac858', '#e86464', '#73c0de', '#3ba272', '#fc8452']
const sum = a.reduce((prev, { name, value }, i) => {
   if (name === '未知') {
      color.splice(i, 0, '#ff2929')
   }
   return prev += Number(value)
}, 0);
option = {
   color,
   tooltip: {
      trigger: 'item',
      formatter: ({ name, value, marker }) => `${marker} ${name}<br/>&nbsp;&nbsp;&nbsp;&nbsp;入廊人数: ${value}<br/>&nbsp;&nbsp;&nbsp;&nbsp;人数占比: ${((value / sum) * 100).toFixed(2)}%`,
   },
   legend: {
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 5,
      orient: 'vertical',
      icon: 'circle',
      data: a.map(item => item.name),
      top: '65%',
      textStyle: {
         color: '#C5E1FF',
         rich: {
            a: {
               padding: [0, 0, 0, 10],
               width: 60,
            },
         },
      },
      formatter: (params) => `{a|${params}}  ${a[a.findIndex(item => item.name === params)].value}`,
   },

   series: [
      {
         type: 'pie',
         startAngle: -180,
         radius: ["60%", "90%"],
         center: ["50%", "60%"],
         data: [...a, {
            name: '总数',
            value: sum,
            tooltip: { formatter: () => '' },
            itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)' } },
         }],
         labelLine: {
            show: false,
         },
         label: {
            show: false,
         },
      },
   ],
};