echarts - 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        }))      }    }  ]};

Answer 2

从您提供的配置和描述来看，您遇到的问题是自定义了yAxis的axisLabel的formatter函数，使得y轴上的刻度值与您实际的数据值不一致。然而，这并不会影响折线图的点和y轴的对应关系，因为折线图的点实际上是按照seriesData中data字段的数值来绘制的，而不是yAxis的刻度值。

如果您发现折线图的点和y轴不对应，那么问题可能出在别的地方。这里有几个可能的原因和解决方案：

1. 检查数据匹配：确保seriesData中的data字段的数值与x轴的数据点一一对应，且每个数值都在yAxis的min和max范围内。
2. 清除缓存：如果您之前查看过图表并且浏览器有缓存，尝试清除缓存并重新加载页面。
3. 检查其他配置：检查option中的其他配置，看是否有其他设置可能影响到折线图的显示。

如果您仍然无法解决问题，建议您提供更详细的描述或截图，以便更准确地定位问题。

另外，请注意，ECharts会根据seriesData中的data字段的数值自动在y轴上找到对应的位置绘制点，即使您自定义了yAxis的刻度值。因此，如果您的数据和刻度值不匹配，可能会导致视觉上的混淆，但并不会影响数据的实际位置。