Echarts y轴增加单位

299 阅读1分钟

Echarts增加y轴单位。根据不同的值设置不同的单位。配置axisLabel``formatter属性

const getYAxisUnit = () => {
  // 根据数据类型判断单位
  // TODO 这样有风险 如果有一天后台修改了1不是加速器
  console.log('getYAxisUnit', clickRow.deviceType)
  if (clickRow.deviceType === 1) {
    // 应变传感器
    return 'μm/m'
  } else if (clickRow.deviceType === 2) {
    // 加速器
    return ' mm/s²'
  } else if (clickRow.deviceType === 3) {
    // 倾斜传感器
    return ' mm'
  } else if (clickRow.deviceType === 4) {
    // 风速
    return ' m/s'
  } else if (clickRow.deviceType === 5) {
    // 风速
    return '°'
  }
}


  yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(111,111,111,1)', // Set the color of the yAxis line to white
        },
      },
      axisLabel: {
        formatter: function (value) {
          return value + getYAxisUnit() // Dynamically add unit to y-axis labels
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(111,111,111,0.1)',
        },
      },
      axisTick: {
        show: false, // Hide yAxis ticks
      },
      max:
        Math.max(...chartValueList) > Number(lineCollection.redUpper) * 1.2
          ? Math.max(...chartValueList)
          : Number(lineCollection.redUpper) * 1.2,
    },

image.png