echarts--仪表盘

 全部代码

option = {
 series: [
                {
                  type: "gauge",
                  center: ["50%", "55%"],
                  radius: "75%",
                  min: 0,
                  max: 100,
                  splitNumber: 4, // 分割线个数（除原点外）
                  itemStyle: {
                    shadowColor: "rgba(255, 255, 255, 0.2)", // 加白色阴影产生高亮效果
                    shadowBlur: 10,
                    color:
                    {
                          //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                          type: "linear",
                          x: 0.2,
                          y: 0,
                          x2: 1, //从左到右 0-1
                          y2: 0,
                          colorStops: [
                            {
                              offset: 0,
                              color: "#FFE329", // 0% 处的颜色
                            },
                            {
                              offset: 1,
                              color: "#49EF81", // 100% 处的颜色
                            },
                          ],
                          globalCoord: false, // 缺省为 false
                        },
                  },
                  // 进度条
                  progress: {
                    show: true,
                    width: 5,
                    roundCap: true, //圆角
                  },
                  // 仪表盘指针
                  pointer: {
                    show: false,
                  },
                  // 坐标轴线
                  axisLine: {
                    show: true,
                    color: "#3A4569",
                    roundCap: true, //圆角
                    lineStyle: {
                      width: 5,
                      color: [[1, "#374266"]],
                    },
                  },
                  // 刻度
                  axisTick: {
                    distance: -22,
                    splitNumber: 10,
                    lineStyle: {
                      width: 1,
                      color: "#325BF1",
                    },
                  },
                  // 分隔线
                  splitLine: {
                    distance: -27,
                    length: 5,
                    lineStyle: {
                      width: 1,
                      color: "#325BF1",
                    },
                  },
                  // 刻度标签(0/25/50/75/100)
                  axisLabel: {
                    distance: 13,
                    color: "#F2F2F3",
                    fontSize: 8,
                  },
                  // 表盘中指针的固定点。
                  anchor: {
                    show: false,
                  },
                  //标题
                  title: {
                    offsetCenter: [0, "40%"],
                    fontSize: 12,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                  detail: {
                    valueAnimation: true,
                    lineHeight: 30,
                    borderRadius: 8,
                    offsetCenter: [0, "-10%"],
                    color: "#2790FD",
                    fontSize: 15,
                    formatter: "{value}%",
                  },
                  data: [
                    {
                      value: 55.15,
                      name:'合理'
                    },
                  ],
                },
              ],
};