echarts折线图,两条线数据一样时怎么区分开

user_QFU0gEjf
  • 3
新手上路,请多包涵


如图,两条线数据一样时完全重叠了,怎么能做出些区分,让用户能清楚的知道是数据一样,而不是缺少了一条线呢

回复
阅读 306
4 个回答
✓ 已被采纳

就是改变视觉效果,可以在两条线重合时,改变两条线的颜色,就是融合后的颜色,这个实现起来应该不简单,不知道echarts有没有直接融合颜色的配置,可以尝试线的颜色设置透明度(毕竟底层原理还是canvas,不同颜色叠加是自动有融合效果的)。

除了在颜色上做手脚外,还可以更改线的宽度,比如下面的线,宽度比上面的宽一点,这样上面的就不能完全覆盖下面的了。

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。

第一部分的数据的 linestyle 加上 width:4
其他补充方法,
1.视觉引导可以加上legend
2.分上下位置增加label显示
3.使用双列柱形图替代

对于这样预期大范围重合的数据,在显示时,主要有这样一些组合方式保证数据的区分

  1. 不同的线宽方式,越是底下的数据给越大的线宽,这样上面的数据显示不能完全覆盖下面的,从而显示出来
  2. 上面的数据给透明设,越上面,相对约透明

上面的方法可以组合使用。

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
你知道吗?

宣传栏