Echarts在线免费图表

 
            const typeList = ['事假', '病假', '其他']; // 类型
const percentList = [45, 35, 20]

/* 数据处理 */
let data = [];
// 空格数据
const sum = percentList.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(0, 180, 255, 1)' // 0% 处的颜色
   }, {
      offset: 1,
      color: 'rgba(112, 238, 254, 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: percentList[i],
      itemStyle: {
         borderRadius: "50%",
         color: colorList[i]
      },
   });
   data.push(gapData)
}

option = {
   backgroundColor: "#010c20",
   legend: {
      type: "scroll",
      orient: 'vertical',
      height: '80%',
      left: '70%',
      top: 'center',
      icon: "roundRect", //设置为圆，删除则为矩形
      itemWidth: 2,
      itemHeight: 16,
      itemGap: 25,
      data: typeList,
      formatter: function (name) {
         console.log(name)
         for (let i = 0; i < typeList.length; i++) {
            if (name == typeList[i]) {
               return `{name|${name}}{value${i}|${percentList[i]}%}`
            }
         }
      },
      textStyle: {
         rich: {
            name: {
               fontSize: 14,
               fontWeight: 400,
               //width: 100,
               height: 16,
               verticalAlign: "top",
               padding: [4, 0, 0, 4],
               color: '#D1E5FF',
               fontFamily: 'Source Han Sans CN-Regular',
            },
            value0: {
               fontSize: 20,
               fontWeight: 500,
               height: 16,
               width: 50,
               align: 'left',
               verticalAlign: "top",
               padding: [5, 0, 0, 16],
               color: "#0090ff",
               fontFamily: 'PangMenZhengDao',
            },
            value1: {
               fontSize: 20,
               fontWeight: 500,
               height: 16,
               width: 50,
               align: 'left',
               verticalAlign: "top",
               padding: [5, 0, 0, 16],
               color: "#3de2ff",
               fontFamily: 'PangMenZhengDao',
            },
            value2: {
               fontSize: 20,
               fontWeight: 500,
               height: 16,
               width: 50,
               align: 'left',
               verticalAlign: "top",
               padding: [5, 0, 0, 16],
               color: "#cfa8ff",
               fontFamily: 'PangMenZhengDao',
            }
         }
      }
   },
   series: [{
      type: 'pie',
      radius: ['43%', '55%'],
      center: ["35%", "50%"],
      label: {
         show: false
      },
      labelLine: {
         show: false
      },
      data: data
   }]
};