Echarts实例----多图展示

代码如下：

const series = [];
const centerY = 50; // 原点y轴的单位距离
const centerYOffset = 5; // 原点偏移
const centerX = 100 / 3; // 原点x轴的单位距离
const chartList = [
  {
    value: 4,
    name: '变压器'
  },
  {
    value: 7,
    name: '手车'
  },
  {
    value: 9,
    name: '刀闸'
  },
  {
    value: 13,
    name: '荣抗'
  },
  {
    value: 15,
    name: '站用变'
  },
  {
    value: 17,
    name: '电压互感器'
  }
];

chartList.forEach((item, index) => {
  const radius = 30;
  const titleSize = 20;
  const valueSize = 40;
  const center = [
    centerX * (index % 3) + centerX / 2 + '%',
    centerY * Math.floor(index / 3) + centerY / 2 - centerYOffset + '%'
  ];
  series.push(
    {
      // 最内圈虚线圆环
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      radius: radius - 7 + '%',
      z: 2,
      center,
      axisLine: {
        show: false
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        distance: -1,
        length: 2,
        lineStyle: {
          //   color: 'rgba(17,131,167,0.6)',
          // color: 'transparent',
          width: 5
        }
      },
      splitNumber: 30,
      axisLabel: {
        show: false
      }
    },
    {
      // 进度圆环
      type: 'gauge',
      radius: radius + '%',  //控制圆环大小
      startAngle: 90,
      endAngle: 450,
      clockWise: false,  //逆向旋转
      center,
      z: 3,
      axisLine: {
        show: true,
        lineStyle: {
          color: [
            [item.value / 30, '#14d6e3'],  //蓝色部分
            [1, '#8f978d']  // 灰色部分
          ],
          width: 20 //控制每一块大小
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        distance: -21,
        show: true,
        length: 22, //用于分割的高度
        lineStyle: {
          color: 'black',
          width: 20 //分割的大小距离
        }
      },
      splitNumber: 3,
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        valueAnimation: true,
        // formatter: () => `${item.value}/${item.total}`,
        offsetCenter: [0, 0],
        fontSize: valueSize,
        fontWeight: 'bolder',
        color: '#fff',
      },
      title: {
        offsetCenter: [0, '165%'],
        fontSize: titleSize,
        color: '#fff'
      },
      data: [item]
    },

    {
      // 外圆1
      type: 'pie',
      z: 5,
      clockWise: false,
      radius: [radius + 5 + '%', radius + 4 + '%'],
      center,
      // clockWise: false,
      itemStyle: {
        // shadowBlur: 20,
        // shadowColor: '#0e829b',
        color: 'rgba(132,140,135,.7)'
      },
      label: {
        show: false
      },
      data: [100]
    },
    {
      // 外圆2
      type: 'pie',
      clockWise: false,
      z: 5,
      radius: [radius + 9 + '%', radius + 8 + '%'],
      center,
      // clockWise: false,
      itemStyle: {
        // shadowBlur: 20,
        // shadowColor: '#0e829b',
        color: 'rgba(132,140,135,.7)'
      },
      label: {
        show: false
      },
      data: [100]
    }
    // {
    //   // 为了添加点击事件添加遮罩
    //   type: 'pie',
    //   z: 6,
    //   radius: [radius + 5 + '%', 0],
    //   center,
    //   // clockWise: false,
    //   itemStyle: {
    //     shadowBlur: 20,
    //     shadowColor: 'transparent',
    //     color: 'transparent'
    //   },
    //   label: {
    //     show: false
    //   },
    //   data: [item]
    // }
  );
});

option = {
  backgroundColor: '#000',
  animation: true,
  series: series
};