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

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

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

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

//img-blog.csdn.net/20150803150146734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

 以上。

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

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

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

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

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

posted on 2017-03-02 16:30  seveth  阅读(8459)  评论(0编辑  收藏  举报

导航