最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示。

先放一张图:

echarts legend 图例文字闪烁显示-LMLPHP

客户要求:待处理字样要闪动显示。

小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案的无理要求!

于是一起解决问题。

先写一下解决思路(不靠谱的后端开发,前端解决全靠百度)。

第一步:百度  echarts legend 自定义文字样式

这一步的时候,看到这位老兄的答案:https://www.cnblogs.com/wuguanglin/p/echarts_legend_formatter.html

思路很棒,但是它不闪啊!!不过已经学会了自定义字体样式,并举一反三,为指定的文字“待处理”单独设置了样式。

此处放字体样式代码:

echarts legend 图例文字闪烁显示-LMLPHP

代码意思是:待处理字样使用样式 a,其他字样使用样式 b

到这一步,只需要让 待处理 闪烁,就能实现客户要求了。好办,上定时器定时刷新字体样式

echarts legend 图例文字闪烁显示-LMLPHP

本来以为到这一步就好了,但是使用之后发现问题:客户数据太多,所以图表下方有设置滚动条。拖动滚动条之后,每次setOption,都会重新刷一下图表。问题来了,客户刚小心翼翼找到自己想看的数据位置,一下刷新就要直接从头再找。

小夏同学提出解决方案:记录一下刷新前的状态值,刷新时候重新赋值。

可行,于是小夏设置了 dataZoom 的 start 和 end 值。然后发现:滚动条放大时,数据是能设置好的,但是缩小之后就又出现重新刷新的问题了。

盲猜是因为参数设置不全面的问题,于是我建议,粗暴一点,全部获取,全部设置,不要单独设置部分属性了。如此就不会漏掉属性。

最终代码:

echarts legend 图例文字闪烁显示-LMLPHP

一个小问题的解决思路。百度上确实没看到具体的这种例子。如果有人需要,又正好看到,不失为一种解决办法。

11-05 04:25