echarts 折线图 markLine 不显示的解决方案

13,180 阅读2分钟

本文是复盘了一下问题解决的整个环节,算是随笔小记

结论就是灵活配置 yAxis.min, yAxis.max 让 markLine 直接显示到位

问题:

在 echarts 的折线图里,如果折线数据不穿过对应的 markLine 或者是折线数据不靠近 markLine 的一定距离,则这条 markLine 不会显示

示例如下图示

image-20210411160704000.png

在这个简易的折线图上,第一条 markLine 直接就丢失了

现在就遇到了这么个情况,折线数据刚好卡在两 markLine 中间,然后 markLine 不显示,但客户要求做报表的时候,必须要带上,那么就带着疑问去找万能的度娘

思路1

image-20210411161115134.png

找了半天,就一个符合要求的,附上链结 blog.csdn.net/baobao_1234…

image-20210411161342400.png

大佬遇到的问题和我一样,数据不压线,markLine 可能不显示,但实际不管怎么样,必须得摆在上边

看完后的结论就是,大佬太硬核了,安排不来(手动修改源码的巨老, rbq)

思路2:

既然源码无法修改,那就去看下官方的文档,但愿文档上会有相关的配置,文档链结

看完后,绝望.jpg

image-20210411162009493.png

思路3:

源码没法改,文档里配置项又不提供,真就 等死.jpg

看着手里的折线图页面陷入沉思。。。

image-20210411162609067.png

emmm, y轴上 400 刻度的标线没显示,没显示,没显。。??好家伙,y轴上 400 的刻度都没,那吧刻度安排上,标线会不会就出来了??

image-20210411162815457.png

好了,又知道两个配置项 yAxis.min, yAxis.max,安排上

image-20210411163006631.png

事情完美解决,至于这个最大最小值怎么来,就非常简单了,上一波伪代码

yAxis.max = Math.max(...markLines.val, ...data)
yAxis.min = Math.min(...markLines.val, ...data)

image-20210411163246512.png

结尾

其实,中间还有一个思路来着,这个表现的现象不就是数据不过 markLine 导致不显示嘛,那我直接再画两条所谓压点的折线不就完事了,这两条压点线其实就是一个坐标点的那种,后面发现配置好 y轴的显示范围能直接解决问题就没去尝试了,理论可行但实现太麻烦就直接鸽了


原创文章,未经允许,禁止转载

-- by 安逸的咸鱼