这段时间接到个需求，给项目里的折线图添加条最大差值线，如下面两图，在两条线段中找出相差最大的地方连一条线。
一开始没觉得有什么难度，直接我看了项目。。。
这项目另外封装了一遍Echarts，设定了许多参数配置。。。
不管怎么样。。。开干吧
第一次尝试
后台把数据发过来了，是一组（两个）坐标点，与另外两条线放在一起。
先不做处理，看看这种形式的数据会被怎么绘制。
咦？怎么是这鬼样？（不要在乎线的颜色，我改了。。。显眼一点）
看了下配置
xAxis: {
type: 'category',
data: data.xAxisValue?data.xAxisValue:dataObj.xAxisData
}
有点不好的预感。。。
再看看后台返回的数据格式
list1:[
{
yAxis: 0,
xAxis: 0
},
{
yAxis: 0.1,
xAxis: 2
}
{
yAxis: 0.2,
xAxis: 5,
}
.....
]
嗯，很整齐的x,y坐标点格式
再看看最终经封装的echarts处理过后的，被渲染的数据是怎么样的
list: [ 0, 0.1, 0.2 ]
你特么在逗我？ 这是定好x轴刻度，然后依次填入数据的意思吗？
所以数据最后被处理得只剩y值？
再看一下最终打印出来的配置参数
xAxis: {
type: "category",
data: [1,2,3,4,5,6 ......]
}
难怪会出现刚才那么奇怪的线，还真是这样啊。。。。
因为这组只有两个点（反正够画一条线了）
所以线就直接出现在x轴0点的地方了。。。。
第二次尝试
由于不好更改封装的组件（万一改了后，其他地方的图表暴雷，锅就大了）
于是我想，不如将差值线的数组长度，改成跟另外两条线一样。。。
option.series[2].data = [] // 先清空数组
option.series[2].data.length = option.xAxis.data.length //直接设定数组长度
option.series[2].data[x] = y1
// 在数组的第X个元素（X就是要画的两个点的横坐标）替换成点的y值
option.series[2].data[x] = y2
因为Echarts的数组中如果数值为空的话，会默认不绘制
Tips：一个小知识，可由此画出断点的线
为什么弯了啊！！！，我是直的啊！！！
气
不能放弃，贫穷的码农不能放弃
再看一下代码
懂了，
是因为X轴的坐标是按顺序递增的，不能更改。
于是我手动写进去的点，实际上是
list: [
{
x: 100,
y: 0,
}
{
x:101,
y: 1,
}
]
也就是说，两个点的X轴坐标并不一致，因此这两个点并不能画出一条垂直于X轴的线。
可是X轴坐标的配置是封装好了的，除非去改封装的源码。。。
不，我不能背锅！
这个问题恐怕在常规的数组里解决不了了，毕竟他根本没法出现两个X值相同的点。
于是我想到了标线 markLine
第三次尝试 markLine
Echarts里提供了markLine功能，如下图带箭头的那条虚线。
为什么想用markLine？ 因为他不会受到原有的配置影响。
虽然markLine好像都是平行于X轴的线，但想想Echarts的丰富，或许能改成竖线呢？
let markLine = {
name:'差值线',
type:'line',
markLine: {
normal:{
lineStyle:{
width:2,
type:'solid',
},
}
},
symbol:'none', //带不带箭头
data: [[
{coord:[x1,y1]},
{coord:[x2,y2]}
]] //这里是重点
}
}
option.series[2] = markLine
// series就是存放我们要绘制的线的数据的数组
大功告成，可喜可乐！
