Echarts在线免费图表

 
            //展示数据
const optionData = [];
//扇形图颜色数据
const colorList = [
   { color1: 'rgba(76,167,163,0.9)', color2: 'rgba(90,255,223,1)' },
   { color1: 'rgba(65,149,99,0.9)', color2: 'rgba(115,255,145,1)' },
   { color1: 'rgba(98,167,131,0.9)', color2: 'rgba(153,255,179,1)' },
   { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
   { color1: 'rgba(190,164,75,0.9)', color2: 'rgba(255,207,74,1)' },
   { color1: 'rgba(165,123,98,0.9)', color2: 'rgba(254,178,128,1)' },
   { color1: 'rgba(105,123,186,0.9)', color2: 'rgba(151,176,255,1)' },
   { color1: 'rgba(106,102,173,0.9)', color2: 'rgba(164,151,255,1)' },
   { color1: 'rgba(106,76,178,0.9)', color2: 'rgba(159,110,254,1)' },
   { color1: 'rgba(134,109,188,0.9)', color2: 'rgba(180,143,241,1)' },
   { color1: 'rgba(54,122,194,0.9)', color2: 'rgba(76,174,254,1)' },
   { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
   { color1: 'rgba(76,167,163,0.9)', color2: 'rgba(90,255,223,1)' },
   { color1: 'rgba(65,149,99,0.9)', color2: 'rgba(115,255,145,1)' },
   { color1: 'rgba(98,167,131,0.9)', color2: 'rgba(153,255,179,1)' },
   { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
   { color1: 'rgba(190,164,75,0.9)', color2: 'rgba(255,207,74,1)' },
   { color1: 'rgba(165,123,98,0.9)', color2: 'rgba(254,178,128,1)' },
   { color1: 'rgba(105,123,186,0.9)', color2: 'rgba(151,176,255,1)' },
   { color1: 'rgba(106,102,173,0.9)', color2: 'rgba(164,151,255,1)' },
   { color1: 'rgba(106,76,178,0.9)', color2: 'rgba(159,110,254,1)' },
   { color1: 'rgba(134,109,188,0.9)', color2: 'rgba(180,143,241,1)' },
   { color1: 'rgba(54,122,194,0.9)', color2: 'rgba(76,174,254,1)' },
   { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
];
//请求的数据
const resultData = [
   {
      name: '罗汉松',
      value: 95,
      percent: '8.05'
   },
   {
      name: '四季桂',
      value: 120,
      percent: '10.17'
   },
   {
      name: '马齿笕',
      value: 98,
      percent: '8.31'
   },
   {
      name: '青江藤',
      value: 90,
      percent: '7.63'
   },
   {
      name: '麻竹',
      value: 100,
      percent: '8.48'
   },
   {
      name: '鸭舌草',
      value: 97,
      percent: '8.22'
   },
   {
      name: '金鱼藻',
      value: 100,
      percent: '8.47'
   },
   {
      name: '人面竹',
      value: 100,
      percent: '8.47'
   },
   {
      name: '红叶藤',
      value: 100,
      percent: '8.47'
   },
   {
      name: '文殊兰',
      value: 100,
      percent: '8.47'
   },
   {
      name: '毛叶杜鹃',
      value: 100,
      percent: '8.47'
   },
   {
      name: '百日青',
      value: 80,
      percent: '6.78'
   },
   {
      name: '罗汉松1',
      value: 95,
      percent: '8.05'
   },
   {
      name: '四季桂1',
      value: 120,
      percent: '10.17'
   },
   {
      name: '马齿笕1',
      value: 98,
      percent: '8.31'
   },
   {
      name: '青江藤1',
      value: 90,
      percent: '7.63'
   },
   {
      name: '麻竹1',
      value: 100,
      percent: '8.48'
   },
   {
      name: '鸭舌草1',
      value: 97,
      percent: '8.22'
   },
   {
      name: '金鱼藻1',
      value: 100,
      percent: '8.47'
   },
   {
      name: '人面竹1',
      value: 100,
      percent: '8.47'
   },
   {
      name: '红叶藤1',
      value: 100,
      percent: '8.47'
   },
   {
      name: '文殊兰1',
      value: 100,
      percent: '8.47'
   },
   {
      name: '毛叶杜鹃1',
      value: 100,
      percent: '8.47'
   },
   {
      name: '百日青1',
      value: 80,
      percent: '6.78'
   }
];
let sum = 0;
resultData.forEach(item => {
   sum += item.value;
})
resultData.forEach(item => {
   optionData.push({ value: item.value, name: item.name });
   optionData.push({ name: '', value: sum / 100, itemStyle: { color: 'transparent' } });
})
option = {
   backgroundColor: "#001829",
   //你的代码
   legend: [
      {
         type: 'scroll',
         pageIconColor: '#76b9ff',
         pageIconInactiveColor: 'yellow',
         pageTextStyle: {
            color: '#76b9ff',
            fontSize: 20,
         },
         orient: 'vertical',
         right: '10%',
         top: '10%',
         itemGap: 30,
         textStyle: {
            color: '#ffffff',
            fontSize: 12,
            rich: {
               name: {
                  width: 80,
                  fontSize: 16,
               },
               value: {
                  width: 20,
                  fontSize: 16,
                  padding: [0, 0, 0, 50]
               },
               percent: {
                  width: 10,
                  fontSize: 16,
               },
            },
         },
         data: resultData,
         formatter: (name) => {
            if (resultData.length) {
               const item = resultData.filter((item) => item.name === name)[0];
               return `{name|${name}}{value| ${item.percent}%}{value| ${item.value}km²}`;
            }
         },

      },
   ],
   tooltip: {
      trigger: 'item',
      formatter(params) {
         let res = '';
         const { marker, name, value } = params;
         if (name !== '') {
            res += `${marker}${name}:${value}Km²`
         }
         return res;
      }
   },
   series: [
      {
         type: 'pie',
         roseType: 'radius',
         radius: ['20%', '60%'],
         center: ['30%', '50%'],
         label: {
            position: 'inside',
            formatter(item) {
               if (item.name === '') {
                  return '';
               }
               return `${item.value}`;
            },
            textStyle: {
               fontSize: 16,
               color: '#ffffff'
            }
         },
         labelLine: {
            show: false,
         },
         itemStyle: {
            normal: {
               color(params) {
                  return colorList[parseInt(params.dataIndex / 2)].color1;
               }
            }
         },
         z: 3,
         data: optionData,
      },
      {
         type: 'pie',
         roseType: 'radius',
         radius: ['20%', '62%'],
         center: ['30%', '50%'],
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         itemStyle: {
            normal: {
               color(params) {
                  return colorList[parseInt(params.dataIndex / 2)].color2;
               }
            }
         },
         z: 2,
         data: optionData,
      }
   ]
};