现在位置首页 / 前端开发 /正文

echarts最新版本echarts3使用timeline动态修改x轴

作者: IT小兵 | 2016年4月15日| 热度:℃ | 评论: |参与:

本文主要讲述echarts最新版本Echarts3使用timeline动态修改x轴.

相信很多使用echarts的伙伴们都使用过timeline组件。网上关于动态修改x轴的一些文章都是一些关于echarts2版本的,升级3之后,api已经发生了很多变化,本文就拿最新版本的来讲解。

一.什么是timeline

看echarts官网给出的解释:

timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。

使用timeline组件后,整个图表会有动态切换的效果。具体的效果大家可以参看:http://echarts.baidu.com/option.html#timeline

二.使用timeline动态修改x轴

我这里先把官方给出的这个效果图贴出来:

echarts最新版本echarts3使用timeline动态修改x轴

 

1.从图中可以看出来,timeline上是对应的年份,从2002年开始,一直到最后一个点2011年。timeline组件开始播放的时候,每划过一个点,图表区域就会出现对应那个年份的数据(柱状图,饼状图,以及x轴上的城市这些…).

2.恰巧官方给出的这个例子当中,不管切换到哪一年,你会发现x轴上的城市是没有发生变化,但是在我们的实际开发当中会经常遇到x轴要跟随着timeline上label的变化而发生变化的场景。

3.我就举个最易懂的例子,比如来了一个需求,要求图表能够反映近12个月,每个月的每一天的交易量。接到这个需求我们知道得在timline上显示月份,然后在x轴上显示每个月份对应的天,然后y轴就是该天对应的交易量。

那么问题来了,每个月份对应的天数是不一样的,有28天的,29天的,有30天的,有31天的。当月份切换到2月份的时候,x轴上得显示28天(或29天),当月份切换到3月份的时候,得显示31天,当月份切换到4月份的时候,得显示30天……

到这里就抛出问题了:echarts3使用timeline动态修改x轴。那么怎么去修改呢?

想了解的更新出,请大家到我的 blog 里看个究竟,包括图片,demo及demo代码下载.


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询