组件数量echarts gauge配置项内容和展示

仪表盘

      let obj = {
      title: '报表组件数量',
      min: 0,
      max: 12,
      value: 10,
      color: {
        inner: [255, 155, 38],
        external: [0, 153, 255],
      },
    };
    let { title, min, max, value, color } = obj;
    let { inner, external } = color;
    let innerColor = `rgba(${inner[0]},${inner[1]},${inner[2]},1)`;
    let externalColor = `rgba(${external[0]},${external[1]},${external[2]},1)`;
     option = {
         backgroundColor:'black',
      grid: {
        top: '0',
        left: '10%',
        right: '10%',
        containLabel: true,
      },
      title: {
        text: title, //strInsert(title, 3),
        x: 'left',
        left: 5,
        bottom: 60,
        textStyle: {
          color: 'white',
          fontSize: 18,
          fontWeight: 'normal',
        },
      },
      tooltip: {},
      series: [
        {
          name: '内层数据刻度',
          type: 'gauge',
          center: ['50%', '50%'],
          radius: '85%',
          startAngle: 180,
          endAngle: -60,
          max,
          splitNumber: 6,
          axisLine: {
            // 坐标轴线
            show: true,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0, externalColor],
                [1, externalColor],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 1,
            },
            length: 5,
            splitNumber: 10,
          },
          splitLine: {
            // 分隔线
            length: 10, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto',
              width: 4,
            },
          },
          axisLabel: {
            color: 'white',
            fontSize: 14,
          },
          itemStyle: {
            color: innerColor,
          },
          data: [{ value }],
          detail: {
            show: true,
            offsetCenter: ['0', '-20%'],
            fontSize: 10,
            color: innerColor,
            show: false,
          },
          pointer: {
            width: 2,
            length: '90%',
          },
          animationDuration: 4000,
        },
        {
          name: '最内层线',
          type: 'gauge',
          radius: '30%',
          center: ['50%', '50%'],
          startAngle: 180,
          endAngle: -60,
          axisLine: {
            show: false,
            lineStyle: {
              opacity: 0,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              opacity: 0,
            },
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            length: 3,
            splitNumber: 3,
            lineStyle: {
              color: innerColor,
              width: 1,
              type: 'solid',
            },
          },
          detail: {
            show: false,
          },
          pointer: {
            show: false,
          },
        },
        {
          //指针上的圆
          type: 'pie',
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
          legendHoverLink: false,
          radius: ['0%', '14%'],
          center: ['50%', '50%'],
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 120,
              itemStyle: {
                normal: {
                  color: innerColor,
                },
              },
            },
          ],
        },
        {
          //指针上的圆
          type: 'pie',
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
          legendHoverLink: false,
          radius: ['10%', '10%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 120,
              itemStyle: {
                normal: {
                  borderColor: 'black',
                  borderWidth: 3,
                  color: innerColor,
                },
              },
            },
          ],
        },
      ],
    };