问题

最近做的一个echarts碰到标注线偶尔会出不来的情况

查官方文档

markLine: {
    data: []
    ...
}

标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象，有下面几种方式指定起点或终点的位置。

1. 通过 x,y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
2. 用 coord属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。
3. 直接用 type属性标注系列中的最大值，最小值。这时候可以使用 valueIndex或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
4. 如果是笛卡尔坐标系(平面二维坐标)的话，也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标线

之前都是直接用第四种方法去画标注线，但是发现这一次并不生效，因为这次x轴的数据并不是连续的，指定的值找不到对应的坐标

用第四种方式时，x 值为给定值的标记线，仅对数据值是一项的设置有效。

data: [{
    name: 'X 轴值为 100 的竖直线',
    xAxis: 100
}]

或对于 'time' 类型的 xAxis，可以设置为：

{
    name: 'X 轴值为 "2020-01-01" 的竖直线',
    xAxis: '2020-01-01'
}]

解决方案

改成第二种坐标方式，data数据项是一个两个值的数组，分别表示线的起点和终点

const markLine = '200';
data: [[{
    name: markLine,
    coord: [markLine, 0]
}, {
    coord: [markLine, 800]
}]]

注： 对于axis.type为 'category' 类型的轴

• 如果 coord 值为 number，则表示axis.data的 index。（意味着如果后端返回的数据是number型，设置坐标这个值是去找index，如果遇到不连续的值如1，2，3，4，8，9想要在8这里画线，设置[8,0]就去找data里的index为8的值，很显然就找不到这个坐标值了，这个时候可以转成下面的string，去找data具体值）
• 如果 coord 值为 string，则表示axis.data中具体的值。注意使用这种方式时，xAxis.data 不能写成 [number, number, ...]，而只能写成 [string, string, ...]，否则不能被 markPoint / markLine 用『具体值』索引到。