Echarts在线免费图表

 
            const resData = [
   { value: 100, name: '测试1' },
   { value: 80, name: '测试2' },
   { value: 60, name: '测试3' },
   { value: 40, name: '测试4' },
   { value: 20, name: '测试5' }
]
option = {
   //你的代码
   color: ['#34C783', '#F57818', '#6494F3', '#DC59E8', '#FF6164'],
   legend: {
      orient: 'vertical',
      top: 'middle',
      right: 5,
      icon: 'circle',
      type: 'scroll',
      pageIconSize: [10, 10],
      pageIconColor: '#6494f3',
      pageIconInactiveColor: '#ccc',
      formatter: function (name) {
         // pieData是饼图的数组数据
         let data = resData;
         let total = 0
         let tarValue = 0;
         for (let i = 0, l = data.length; i < l; i++) {
            total += parseInt(data[i].value);
            if (data[i].name == name) {
               tarValue = data[i].value;
            }
         }
         let arr = [
            '{a|' + name + ':}',
            '{b|' + tarValue + '}',
            '{c|个}',
            '{b|' + ((tarValue / total) * 100).toFixed(2) + '}',
            '{c|%}',
         ]
         return arr.join('')
      },
      textStyle: {	// 添加
         padding: [8, 0, 0, 0],
         rich: {
            a: {
               fontSize: 14,
               width: 90
            },
            b: {
               fontSize: 16,
               width: 60,
               color: '#5C92FF',
               fontWeight: 600,
               align: 'center'
            },
            c: {
               fontSize: 14,
               with: 60
            }
         }
      }
   },
   title: {
      text: '365',
      left: "30%",
      top: "45%",
      textStyle: {
         fontSize: 24,
         color: "#5C92FF"
      }
   },
   series: [{
      name: '年度',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['35%', '50%'],
      z: 12,
      avoidLabelOverlap: false,
      label: {
         show: false
      },
      labelLine: {
         show: false
      },
      data: resData
   },
   {
      name: '',
      type: 'pie',
      radius: ['40%', '65%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
         opacity: 0.2
      },
      label: {
         show: false
      },
      labelLine: {
         show: false
      },
      data: resData
   }]
};