Echarts折线图不同X轴的对比功能,不同段不同颜色显示

        这里有一个统计不同时间段的折线图对比需求,起初的想法是给Echarts的X轴同一刻度赋予不同的数值,并且在其上面显示两条数据,达到对比的功能(在别的插件上面可能有这样的功能,因为我看到过这样的图)。后来翻了不少资料也没有发现Echarts这方面的功能,所以只能寻求另外的方法了。

       既然这个方法行不通就只能另辟蹊径达到目的,在查阅资料之后找到一个另类的方法。那就是一条坐标轴截取两段,每一段有着不同的颜色,这样达到两个时间段对比的功能。

       最终达成的效果如下图所示:

       以上。

       达到了不同时间段对比的功能。

        这里主要的思路还是在series里面添加两个数据源,然后不想展示节点赋值'-'。

       像 {...data:[11, 11, 15, 13,'-','-', '-'],...} ,

{...data:['-', '-', '-', 5, 3, 2, 0],...}

       手动效果请修改http://echarts.baidu.com/doc/example/line1.html页面的data值查看。 


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值