Echarts在线免费图表

 
            const typeList = ['学生', '教师']; // 类型
const valueList = [350, 150];
const percentLit = [70, 30];
const unit = "件"

/* 数据处理 */
let data = [];
// 空格数据
const sum = valueList.reduce((per, cur) => per + cur, 0);
const gap = (1 * sum) / 100;
const gapData = {
   name: '空格',
   value: gap,
   itemStyle: {
      color: 'transparent',
   },
};
// 颜色系列
const colorList = [{
   x: 0,
   y: 0,
   x2: 0,
   y2: 1,
   colorStops: [{
      offset: 0,
      color: 'rgba(0, 178, 255, 1)' // 0% 处的颜色
   }, {
      offset: 1,
      color: 'rgba(0, 114, 255, 1)' // 100% 处的颜色
   }],
}, {
   x: 0,
   y: 0,
   x2: 0,
   y2: 1,
   colorStops: [{
      offset: 0,
      color: 'rgba(167, 125, 255, 1)' // 0% 处的颜色
   }, {
      offset: 1,
      color: 'rgba(243, 209, 255, 1)' // 100% 处的颜色
   }],
}];
// 循环添加数据
for (let i = 0; i < typeList.length; i++) {
   data.push({
      name: typeList[i],
      value: valueList[i],
      itemStyle: {
         borderRadius: "50%",
         color: colorList[i]
      },
      label: {
         show: true,
         lineHeight: 32,
         padding: [54,-50,0,-50],
         formatter: (params) => {
            let index = typeList.indexOf(params.name)
            console.log(params)
            return `{percent${index}|${percentLit[index]}%}\n{value${index}|${valueList[index]}${unit}}\n{name${index}|${typeList[index]}}`
         },
         rich: {
            percent0: {
               fontSize: 16,
               fontFamily: "PangMenZhengDao",
               fontWeight: 400,
               color: "#00B2FF",
               align: "right",
               verticalAlign: "top"
            },
            percent1: {
               fontSize: 16,
               fontFamily: "PangMenZhengDao",
               fontWeight: 400,
               color: "#BA92FF",
               align: "left",
               verticalAlign: "top"
            },
            value0: {
               fontSize: 16,
               fontFamily: "PangMenZhengDao",
               fontWeight: 400,
               color: "#00B2FF",
               align: "right",
               verticalAlign: "top"
            },
            value1: {
               fontSize: 16,
               fontFamily: "PangMenZhengDao",
               fontWeight: 400,
               color: "#BA92FF",
               align: "left",
               verticalAlign: "top"
            },
            name0: {
               fontSize: 12,
               fontFamily: "Source Han Sans CN-Regular",
               fontWeight: 400,
               color: "#D1E5FF",
               align: "right",
               verticalAlign: "top"
            },
            name1: {
               fontSize: 12,
               fontFamily: "Source Han Sans CN-Regular",
               fontWeight: 400,
               color: "#D1E5FF",
               align: "left",
               verticalAlign: "top"
            }
         }
      },
      labelLine: {
         show: true,
         length: 18,
         length2: 90,
         lineStyle: {
            color: "rgba(66, 151, 255, 0.5)"
         }
      }
   });
   data.push(gapData)
}

option = {
   backgroundColor: "#010c20",
   series: [{
      type: 'pie',
      radius: ['58%', '68%'],
      center: ["50%", "50%"],
      label: {
         show: false
      },
      labelLine: {
         show: false
      },
      data: data
   }]
};