echarts - Echarts仪表盘刻度显示问题？

问题描述：

刻度改动没有变化：当刻度min:0 max:100时，分数为50时指针在中间，将max改为300后，指针还是指在中间，没有任何变化。

const myChart = echarts.init(document.getElementById('min'))
      var option = {
        tooltip: {
          show: false,
        },
        series: [
          {
            name: '刻度',
            type: 'gauge',
            center: ['50%', '65%'],
            radius: '130%',
            min: 0, //最小刻度
            max: 300, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(0,0,0,0)']
                ],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: '#0ab7ff',
              fontSize: 15,
              distance: -50,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: '#0ab7ff',
                width: 1,
              },
              length: -3,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -5,
              lineStyle: {
                color: '#0ab7ff',
              },
            }, //分隔线样式
          },
          {
            type: 'gauge',
            radius: '85%',
            center: ['50%', '65%'],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: -30,
                color: [

                  //             颜色渐变函数 前四个参数分别表示四个位置依次为 右上左下
                  [0, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: '#2CA70F' // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: '#40CEEA' // 100% 处的颜色
                  }], false)],

                  [0.6, new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 1,
                    color: '#40CEEA' // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: '#F2FA64' // 100% 处的颜色
                  }], false)],

                  [1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0.8,
                    color: '#F2FA64' // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: '#fa4e4b' // 100% 处的颜色
                  }], false)],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: true,
              length: '80%',
              width: '2%',
            },
            title: {
              show: true,
              offsetCenter: [0, '45%'], // x, y，单位px
              textStyle: {
                color: '#ddd',
                fontSize: 18,
              },
            },
            // 仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, '0%'],
              color: '#ffffff',
              formatter: function (value) {
                if (value <= 50) {
                  return value + '\n优'
                } else if (value <= 100) {
                  return value + '\n良'
                } else if (value <= 150) {
                  return value + '\n轻度污染'
                } else if (value <= 200) {
                  return value + '\n中度污染'
                } else if (value <= 300) {
                  return value + '\n重度污染'
                } else {
                  return '严重污染'
                }
              },
              textStyle: {
                fontSize:17,
              },
            },
            data: [{
              name: this.airTotalScoreAndMessage.message,
              value: this.airTotalScoreAndMessage.score
            }]
           
          },
          {
            // 仅显示tooltip用
            type: 'pie',
            radius: '90%',
            hoverAnimation: true,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            z: 3,
            zlevel: 0,
            itemStyle: {
              borderWidth: 0,
            },
            data: [{
              value: 50,
              name: '',
              label: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: 'transparent',
                },
              },
            },],
          },
        ],
      }
      myChart.setOption(option)
    },

第 1 个答案：

因为你的 min 和 max 设置错 serise 了，放到第二个里面就可以了。
你的配置项太长了，我就删掉了大部分不相关的属性了：

option = {
  tooltip: {
    show: false,
  },
  series: [
    {
      name: '刻度',
      type: 'gauge',
      center: ['50%', '65%'],
      radius: '130%',
      // 这是外部的刻度 series 并不是你赋值指针值的 series
      min: 0, //最小刻度
      max: 300, //最大刻度
      splitNumber: 10, //刻度数量
      startAngle: 180,
      endAngle: 0,
      // ...
    },
    {
      type: 'gauge',
      radius: '85%',
      center: ['50%', '65%'],
      // 这里才是实际指针的所在的 series
      min: 0, //最小刻度
      max: 300, //最大刻度
      splitNumber: 0, //刻度数量
      startAngle: 180,
      endAngle: 0,
      // ...
    },
  ],
};

以下是完整的 options

option = { 
  tooltip: {
    show: false,
  },
  series: [
    {
      name: '刻度',
      type: 'gauge',
      center: ['50%', '65%'],
      radius: '130%',
      min: 0, //最小刻度
      max: 300, //最大刻度
      splitNumber: 10, //刻度数量
      startAngle: 180,
      endAngle: 0,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: [
            [1, 'rgba(0,0,0,0)']
          ],
        },
      }, //仪表盘轴线
      axisLabel: {
        show: false,
        color: '#0ab7ff',
        fontSize: 15,
        distance: -50,
      }, //刻度标签。
      axisTick: {
        show: true,
        splitNumber: 5,
        lineStyle: {
          color: '#0ab7ff',
          width: 1,
        },
        length: -3,
      }, //刻度样式
      splitLine: {
        show: true,
        length: -5,
        lineStyle: {
          color: '#0ab7ff',
        },
      }, //分隔线样式
    },
    {
      type: 'gauge',
      radius: '85%',
      center: ['50%', '65%'],
      min: 0, //最小刻度
      max: 300, //最大刻度
      splitNumber: 0, //刻度数量
      startAngle: 180,
      endAngle: 0,
      axisLine: {
        show: true,
        lineStyle: {
          width: -30,
          color: [

            //             颜色渐变函数 前四个参数分别表示四个位置依次为 右上左下
            [0, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 1,
              color: '#2CA70F' // 0% 处的颜色
            }, {
              offset: 0,
              color: '#40CEEA' // 100% 处的颜色
            }], false)],

            [0.6, new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 1,
              color: '#40CEEA' // 0% 处的颜色
            }, {
              offset: 0,
              color: '#F2FA64' // 100% 处的颜色
            }], false)],

            [1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0.8,
              color: '#F2FA64' // 0% 处的颜色
            }, {
              offset: 0,
              color: '#fa4e4b' // 100% 处的颜色
            }], false)],
          ],
        },
      },
      //分隔线样式。
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      pointer: {
        show: true,
        length: '80%',
        width: '2%',
      },
      title: {
        show: true,
        offsetCenter: [0, '45%'], // x, y，单位px
        textStyle: {
          color: '#ddd',
          fontSize: 18,
        },
      },
      // 仪表盘详情，用于显示数据。
      detail: {
        show: true,
        offsetCenter: [0, '0%'],
        color: '#ffffff',
        formatter: function (value) {
          if (value <= 50) {
            return value + '\n优'
          } else if (value <= 100) {
            return value + '\n良'
          } else if (value <= 150) {
            return value + '\n轻度污染'
          } else if (value <= 200) {
            return value + '\n中度污染'
          } else if (value <= 300) {
            return value + '\n重度污染'
          } else {
            return '严重污染'
          }
        },
        textStyle: {
          fontSize:17,
        },
      },
      data: [{
        name: 'TEST',
        value: 55
      }]

    },
    {
      // 仅显示tooltip用
      type: 'pie',
      radius: '90%',
      hoverAnimation: true,
      label: {
        normal: {
          show: false,
          position: 'center',
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      z: 3,
      zlevel: 0,
      itemStyle: {
        borderWidth: 0,
      },
      data: [{
        value: 50,
        name: '',
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: 'transparent',
          },
        },
      },],
    },
  ],
};

vue.js - elementUI如何解析/n换行符？：数据这样：carRemark: "时间段：2022-09-20至2022-10-19 车牌号：黑ACE582\n时间段：2022-08-20至2022-09-19 车牌号：黑ACE5 ...