仪表盘

170 阅读1分钟
const option = {
          series: [
            {
              startAngle: 220,
              endAngle: -40,
              type: "gauge",
              min: 0,
              max: 100,
              radius: "70%",
              axisLine: {
                lineStyle: {
                  color: [[1, colors[3]]],
                  width: 4,
                },
              },
              // 大刻度
              splitLine: {
                length: 0,
                lineStyle: {
                  color: colors[2],
                },
              },
              // 小刻度
              axisTick: {
                distance: 0,
                length: 0,
                lineStyle: {
                  color: colors[2],
                },
              },
              // 内圈刻度数字
              axisLabel: {
                show: false,
              },
              // 指针
              pointer: {
                offsetCenter: [0, "10%"],
                length: "150%",
                width: 1,
              },
              // 标题'直流电压'设置
              title: {
                offsetCenter: [0, "120%"],
                color: "#fff",
                fontSize: 11,
              },
              // 仪表盘数字
              detail: {
                valueAnimation: true,
                offsetCenter: [0, "80%"],
                formatter: "{value}V",
                textStyle: {
                  fontSize: 14,
                  fontWeight: 600,
                  color: colors[3],
                },
              },
              // 数据
              data: [
                {
                  value: 58,
                  name: "直流电压",
                  itemStyle: {
                    // 指针颜色
                    color: colors[2],
                  },
                },
              ],
            },
            {
              type: "gauge",
              min: 0,
              max: 100,
              radius: "100%",
              splitNumber: 20, // 刻度距离
              startAngle: 210,
              endAngle: -30,
              axisLine: {
                lineStyle: {
                  color: [[1, colors[1]]],
                  width: 3,
                },
              },
              // 大刻度
              splitLine: {
                distance: -10,
                length: 5,
                lineStyle: {
                  color: colors[2],
                },
              },
              // 小刻度
              axisTick: {
                distance: 0,
                length: 5,
                lineStyle: {
                  color: colors[2],
                },
              },
              // 大刻度数字
              axisLabel: {
                distance: 0,
                fontSize: 9,
                color: colors[2],
              },
            },
          ],
        };