Echarts在线免费图表

 
            const chartOption = [
   {
      name: "语文",
      value: 100,
      valueUnit: "分",
      precent: 66.7,
      precentUnit: "%",
   },
   {
      name: "数学",
      value: 100,
      valueUnit: "分",
      precent: 66.7,
      precentUnit: "%",
   },
   {
      name: "外语",
      value: 100,
      valueUnit: "分",
      precent: 66.7,
      precentUnit: "%",
   },
   {
      name: "综合",
      value: 100,
      valueUnit: "分",
      precent: 66.7,
      precentUnit: "%",
   }
]
const chartTitle = {
   title: '标题',
   titleUnit: '单位',
   subtitle: '副标题',
   subtitleUnit: '单位',
}
const colorList = ['#0887FF', '#30C9C9', '#FFD15C', '#F54E4E', '#F667C2']
option = {
   backgroundColor: '#000',
   tooltip: {
      show: false
   },
   title: {
      text: `{title|${chartTitle.title}}{titleUnit|${chartTitle.titleUnit}}\n{subtitle|${chartTitle.subtitle}}{subtitleUnit|${chartTitle.subtitleUnit}}`,
      x: '30%',
      y: 'center',
      textStyle: {
         rich: {
            title: {
               fontSize: 24,
               fontWeight: 400,
               color: '#FFFFFF',
               align: 'center',
            },
            titleUnit: {
               fontSize: 12,
               fontWeight: 400,
               color: '#FFFFFF',
               align: 'center',
            },
            subtitle: {
               fontSize: 24,
               fontWeight: 400,
               color: 'rgba(255, 255, 255, 0.85)',
               align: 'center',
            },
            subtitleUnit: {
               fontSize: 12,
               fontWeight: 400,
               color: '#FFFFFF',
               align: 'center',
            },
         }
      }
   },
   legend: {
      top: 'center',
      right: '3%',
      orient: 'vertical',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 8,
      formatter: function (params) {
         for (var i = 0; i < chartOption.length; i++) {
            if (params === chartOption[i].name) {
               const rate = chartOption[i].precentUnit ? chartOption[i].precent + chartOption[i].precentUnit : chartOption[i].precent
               const value = chartOption[i].valueUnit ? chartOption[i].value + chartOption[i].valueUnit : chartOption[i].value
               return '{name|' + params + '}{rate|' + rate + '}{value|' + value + '}'
            }
         }
      },
      textStyle: {
         rich: {
            name: {
               fontSize: 12,
               fontWeight: 400,
               width: 50,
               padding: [0, 10, 0, 4],
               color: 'rgba(255, 255, 255, 0.5)',
            },
            rate: {
               fontSize: 12,
               fontWeight: 400,
               width: 50,
               align: 'right',
               color: '#fff',
            },
            value: {
               fontSize: 12,
               fontWeight: 400,
               width: 50,
               align: 'right',
               color: '#fff',
               padding: [0, 10, 0, 20],
            },
         }
      },
      selectedMode: false
   },
   series: [
      {
         name: 'Access From',
         type: 'pie',
         center: ['35%', '50%'],
         radius: ['45%', '65%'],
         avoidLabelOverlap: false,
         selectedOffset: 1,
         label: {
            show: false,
            position: 'center'
         },
         emphasis: {
            label: {
               show: false,
               fontSize: 20,
               fontWeight: 'bold'
            },
            disabled: false,
            scale: false,
            scaleSize: 0
         },
         labelLine: {
            show: false
         },
         itemStyle: {
            normal: {
               color: (params) => {
                  return colorList[params.dataIndex];
               }
            }
         },
         silent: true,
         data: chartOption
      }
   ]
};