Echarts在线免费图表

 
            const chartData = [{ name: '消防栓', value: 201 },
{ name: '烟感', value: 237 },
{ name: '喷淋', value: 209 },
{ name: '温感', value: 190 }]
let color = ['#2276FC', '#FFADC4', '#36E3E3', '#EE6F7C', '#FFCF5F', '#97D664', '#eb3eeb', '#00EE8C', '#FFCD44']
// 字段值对齐，不足补空格
let fixWithWhiteSpace = (maxLen, text, prefix = true) => {
   if (text && maxLen) {
      let num = maxLen - text.length
      return prefix && num > 0 ? Array(num + 1).join('  ') + text : text + Array(num + 1).join('   ')
   }
   return text
}
option = {
   color,
   grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0%',
   },
   tooltip: {
      formatter: '{b0}：{c0}台',
      confine: true,
   },
   legend: {
      selectedMode: true,
      orient: 'vertical',
      top: 'center',
      left: '41%',
      itemWidth: 10,
      itemHeight: 10,
      formatter(name) { // 该函数用于设置图例显示后的百分比quanmei
         let data = chartData
         let total = 0
         let value = 0
         data.forEach((item) => {
            total += item.value
            if (item.name == name) {
               value = item.value
            }
         })
         let p = ((value / total) * 100).toFixed(1) // 求出百分比

         let maxNamelen = Math.max(...data.map(p => p.name.length))
         let maxValuelen = Math.max(...data.map(p => (p.value + '').length))
         let maxPercentageLen = Math.max(...data.map(p => ((p.value / total) * 100).toFixed(1).length))
         // 返回出图例所显示的内容是名称+百分比
         return ['{a|' + `${fixWithWhiteSpace(maxNamelen, name, false)}` + '}{b|' + `${fixWithWhiteSpace(maxValuelen, (value || 0).toString())}` + '}{b1|项}{c|' + `${fixWithWhiteSpace(maxPercentageLen, p || '0')}` + '}{c1|%' + '}']
      },
      textStyle: {
         color: '#A8CCDE',
         padding: [2, 0],
         rich: {
            b: {
               padding: [0, 2, 0, 20],
               verticalAlign: 'sub',
            },
            b1: {
               color: '#000',
            },
            c: {
               padding: [0, 2, 0, 20],
            },
            c1: {
               color: '#000',
            },
         },
      },
   },
   graphic: {
      elements: [{
         type: 'image',
         z: 4,
         style: {
            image: 'https://www.pngmart.com/files/22/Halloween-Food-PNG-Isolated-HD.png',
            width: 28,
            height: 28,
         },
         left: '21%',
         top: 'center',
      }],
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ['38%', '44%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         avoidLabelOverlap: false,
         itemStyle: {
            borderWidth: 0,
         },
         label: {
            show: false,
            position: 'center',
         },
         labelLine: {
            show: false,
         },
         data: chartData,
         minAngle: 1,
      },
      {
         name: '',
         type: 'pie',
         radius: ['25%', '38%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         avoidLabelOverlap: false,
         label: {
            show: false,
            position: 'center',
         },
         labelLine: {
            show: false,
         },
         data: chartData,
         itemStyle: {
            borderWidth: 0,
            normal: {
               color: (data) => color[data.dataIndex] + '1D',
               borderColor: '#fff',
               borderWidth: 1,
            },
         },
         minAngle: 1,
      },
   ],
};