Echarts 折线图如何自定义y轴刻度值并确保点与刻度对应？

Question

echarts折线图：现在我们的需求是y轴的刻度值自定义生成，但折线图的点和y轴不对应，请问应该怎么配置啊，这是我在折线图中的配置

const yData = [-30.3,-10.06, 10.18,30.43,50.67,70.91,91.15]
const seriesData = [
    {
        "name": "123",
        "type": "line",
        "lineStyle": {
            "width": 1
        },
        "symbol": "roundRect",
        "symbolSize": 6,
        "data": [
           50,16,16,50,50,0
        ]
    }
]
option = {
  tooltip: {
      show: true
  },
  legend: {
      selectedMode: true
  },
  animation: true,
  dataZoom: {
      type: 'inside'
  },
  grid: {
      top: 40,
      left: 50,
      right: 40,
      bottom: 40
  },
  xAxis: {
    type: 'category',
    data: ['02', '03', '04', '27', '28', '29'],
    axisLine: {
        show: false
    },
    axisTick: {
        show: false
    },
    offset: 20
  },
  yAxis: {
    min: -30.3,
    max: 91.15,
    axisLabel: {
      formatter: function(value, index) {
          return yData[index];
      }
    },
    splitLine: {
      lineStyle: {
          type: 'dashed'
      }
    }
  },
  series: seriesData
};

Answer 1

Emmmm……你可真的是大聪明。yAxis.axisLabel.formatter 居然是这样使的……

给你改了一下 👉 Examples - Apache ECharts

---

怕链接失效以下是具体的实现代码，就是使用了 markline 去模拟了以下 yAxis。因为好像没办法指定自定义的非固定间距坐标轴。

const yData = [-30.3,-10.06, 10.18,30.43,50.67,70.91,91.15]
const seriesData = [
    {
        "name": "123",
        "type": "line",
        "lineStyle": {
            "width": 1
        },
        "symbol": "roundRect",
        "symbolSize": 6,
        "data": [
           50,16,16,50,50,0
        ]
    }
]
option = {
  tooltip: {
      show: true
  },
  legend: {
      selectedMode: true
  },
  animation: true,
  dataZoom: {
      type: 'inside'
  },
  grid: {
      top: 40,
      left: 50,
      right: 40,
      bottom: 40
  },
  xAxis: {
    type: 'category',
    data: ['02', '03', '04', '27', '28', '29'],
    axisLine: {
        show: false
    },
    axisTick: {
        show: false
    },
    offset: 20
  },
  yAxis: {
    show: false,
    min: -30.3,
    max: 91.15,
  },
  series: [
    ...seriesData,
    // 使用markline模拟y轴
    {
      type:"custom",
      markLine: {
        symbol: 'none',
        label: {
          position: 'start',
        },
        lineStyle: {
          color: "#e0e6f1"
        },
        data: yData.map(num => ({
         name: num,
         yAxis: num
        }))
      }
    }
  ]
};