echarts-仪表盘

 

const options = {
        series: [
          {
            type: "gauge",
            radius: "95%", // 仪表盘的大小，可以是像素值或者百分比
            min: 1,
            max: 3,
            splitNumber: 4, //仪表盘刻度的分割段数
            progress: { 
              show: false, //是否显示进度条
              roundCap: true,//是否在两端显示成圆形
              width: 18,//进度条宽度
            },
            //指针样式
            itemStyle: {
              color: "#34B907",
              borderColor: "#E5EDEC",
              borderWidth: 1,
            },
            // 表盘指针中间的固定点
            anchor: {
              show: true,
              showAbove: true,
              size: 15,
              itemStyle: {
                color: "#34B907",
                borderColor: "#F7F9FD;",
                borderWidth: 2,
              },
            },
            axisLine: {
              lineStyle: {
                width: 12, //仪表盘的宽度
                /* color: [ //仪表盘的颜色,不过渡
                  [0.17, "#38D949"],
                  [0.33, "#34BD0E"],
                  [0.46, "#F7BA4C"],
                  [0.49, "#FB9915"],
                  [0.74, "#FF6A51"],
                  [1, "#FF5751"],
                ], */
                color: [//仪表盘的颜色,过渡自然
                  [
                    0.3,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#39DC4E",
                      },
                      {
                        offset: 1,
                        color: "#34BC0C",
                      },
                    ]),
                  ],
                  [
                    0.6,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#F7BB4C",
                      },
                      {
                        offset: 1,
                        color: "#FB9711",
                      },
                    ]),
                  ],
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#FF6A51",
                      },
                      {
                        offset: 1,
                        color: "#FF5251",
                      },
                    ]),
                  ],
                ],
              },
            },
            
            axisTick: {
              distance: 5,
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              distance: 5,
              length: 5,
              lineStyle: {
                width: 2,
                color: "#fff",
              },
            },
            axisLabel: {
              distance: 18, //数字的距离
              color: "#fff",
              fontSize: 14,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
              fontSize: 0,
            },
            data: [
              {
                value: 1.4,
              },
            ],
          },
        ],
      };