Echarts在线免费图表

 
            
let chartData = [
   { name: '八神太一', value: 200 },
   { name: '石田大和', value: 197 },
   { name: '武之内素娜', value: 199 },
   { name: '城户丈', value: 202 },
   { name: '泉光子郎', value: 200 }]
// 字段值对齐，不足补空格
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: ['#F4DF58', '#333FFF', '#FFB0E3', '#00FFA6', '#7A79FF'],
   title: {
      text: '满意度占比',
      left: '42%',
      top: '46%',
      textAlign: 'center',
      textStyle: {
         fontSize: 25,
         color: '#00E8FF',
      },
   },
   grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0%',
      containLabel: true,
   },
   tooltip: {
      confine: true,
   },
   legend: {
      selectedMode: false,
      orient: 'vertical',
      right: 30,
      top: 'center',
      textStyle: {
         fontSize: 25,
         color: '#A8CCDE',
         verticalAlign: 'middle',
      },
      itemWidth: 10,
      itemHeight: 10,
      formatter(name) { // 该函数用于设置图例显示后的百分比
         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 [`${fixWithWhiteSpace(maxNamelen, name, false)}` + '{b|' + `${fixWithWhiteSpace(maxValuelen, (value || 0).toString())}` + '}{c|' + `${fixWithWhiteSpace(maxPercentageLen, p || '0')}%` + '}']
      },
      textStyle: {
         rich: {
            b: {
               padding: [0, 0, 0, 20],
               fontSize: 25,
            },
            c: {
               padding: [0, 0, 0, 20],
               fontSize: 25,
            },
         },
      },
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ['40%', '55%'],
         center: ['43%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
         },
         label: {
            show: false,
            position: 'center',
         },
         labelLine: {
            show: false,
         },
         data: chartData,
      },
   ],
};