Echarts在线免费图表

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

/* 数据处理 */
let data = [];
// 空格数据
const sum = percentList.reduce((per, cur) => per + cur, 0);
// const gap = (1 * sum) / 100;
const gapData = {
   name: '',
   value: '',
   itemStyle: {
      color: 'transparent',
   },
};
// 颜色系列
const colorList = [
  '#FF386B',
  '',
  '#1FC6FF',
  '',
  '#1A4E5E',
  '',
  '#F5E74F',
  ''
]
const colorList1 = [
  '#431E3B',
  '',
  'rgba(34, 217, 255, .3)',
  '',
  'rgba(27,84,102, 0.3)',
  '',
  '#404832',
  ''
]
// 循环添加数据
for (let i = 0; i < typeList.length; i++) {
  data.push({
    name: typeList[i],
    value: percentList[i],
  });
  data.push(gapData)
}

option = {
  backgroundColor: '#041125',
  legend: {
    type: "scroll",
    orient: 'vertical',
    height: '80%',
    right: '3%',
    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: '#fff',
          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: "#FF386B",
          fontFamily: 'PangMenZhengDao',
        },
        value1: {
          fontSize: 20,
          fontWeight: 500,
          height: 16,
          width: 50,
          align: 'left',
          verticalAlign: "top",
          padding: [5, 0, 0, 16],
          color: "#1FC6FF",
          fontFamily: 'PangMenZhengDao',
        },
        value2: {
          fontSize: 20,
          fontWeight: 500,
          height: 16,
          width: 50,
          align: 'left',
          verticalAlign: "top",
          padding: [5, 0, 0, 16],
          color: "#1A4E5E",
          fontFamily: 'PangMenZhengDao',
        },
        value3: {
          fontSize: 20,
          fontWeight: 500,
          height: 16,
          width: 50,
          align: 'left',
          verticalAlign: "top",
          padding: [5, 0, 0, 16],
          color: "#F5E74F",
          fontFamily: 'PangMenZhengDao',
        }
      }
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '50%'],
      center: ['42%', '50%'],
      hoverAnimation: false,
      startAngle: 180,
      minAngle: 5,
      emphasis: {
        scale: true,
        scaleSize: 15,
        focus: 'series',
        blurScope: 'coordinateSystem',
        label: {
          show: true
        }
      },
      labelLine: {
        show: true,
        lineStyle: {
          width: 3,
        },
        normal: {
          length: 30, // 指示线长度
          length2: 30
        },
      },
      label: {
        show: true,
        formatter: '{name|{b}：}' + '{percentage|{d}%}',
        rich: {
          percentage:{
            fontSize: 16,
            fontFamily : "微软雅黑",
            color:'#ffffff'
          },
          name: {
            fontFamily : "微软雅黑",
            fontSize: 16,
            color:'#fff',
            lineHeight:30,
          },
        }
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex]
          },
          borderWidth: 4,
          borderColor:'#041125'
        }
      },
      data: data,
      z: 1,
    },
    {
      type: 'pie',
      radius: ['25%', '35%'],
      center: ['42%', '50%'],
      hoverAnimation: false,
      startAngle: 180,
      minAngle: 5,
      emphasis: {
        scale: false,
        scaleSize: 15,
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      label: {
        show: false
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList1[params.dataIndex]
          },
          borderWidth: 4,
          borderColor:'#041125'
        }
      },
      data: data,
      z: 2
    },
  ]
}