Echarts 通过时间轴timeline改变xAxis.data数据进行不合并处理
2015-11-19 16:36
429 查看
写在前面:
使用时间轴 timeline 绘制图形的时候会有一种动态的效果,让图形看起来更加生动,也达到了交互式数据的展现。但是在使用 timeline 的时候我遇到了几个问题,其中最头疼的还是对 xAxis.data 数据进行不合并处理。本文章就是通过使用 TIMELINE_CHANGED 方法和 myChart.setOption(option,true) ,以及 myChart.resize() 来实现改变x轴数据。
1 Question场景
2 效果图
3 测试代码
4 Solution 解决方案
作者:Reese
时间:2015-11-19
备注:希望这个文档能对大家有帮助,有用你就悄悄copy走,再默默地给我点个赞~ (≧▽≦)/
注意:
上面这段代码要表达的意思就是图2所展示的效果,但是实际上并不能达到。实际上x轴的标签一直都是“options 1 ”代码块里的xAxis.data,而“options 2 ”代码块里的四个数据也展示不完全(只能展示前面3个)。为什么呢?
注释很多,但实际上代码很少,却完美解决了一直困惑我的几个重大难题!我三天前在开源社区和百度知
4000
道提出了这个问题,却一直没有人来回答我,令我想不到的是最终找到解决方法的竟然是自己!中途我向人求教过,也因为拖延了项目进度想放弃过……But! 还是被我给找到了~~╰( ̄▽ ̄)╭╰( ̄▽ ̄)╭ 开心。感谢互联网~
ps:欢迎大家邮件我来一起讨论Echarts的各种问题,互相帮助,共同成长!
使用时间轴 timeline 绘制图形的时候会有一种动态的效果,让图形看起来更加生动,也达到了交互式数据的展现。但是在使用 timeline 的时候我遇到了几个问题,其中最头疼的还是对 xAxis.data 数据进行不合并处理。本文章就是通过使用 TIMELINE_CHANGED 方法和 myChart.setOption(option,true) ,以及 myChart.resize() 来实现改变x轴数据。
1 Question场景
2 效果图
3 测试代码
4 Solution 解决方案
作者:Reese
时间:2015-11-19
备注:希望这个文档能对大家有帮助,有用你就悄悄copy走,再默默地给我点个赞~ (≧▽≦)/
1、 Question场景
通过时间轴timeline控制一年的月份,xAxis.data则表示每个月的天数。那么问题来了, 除开2月份的28/29,其余月份的30-31交替出现,如何通过timeline来处理呢?2、 效果图
3、 测试代码
var myChart = ec.init(document.getElementById('main')); var option={ timeline:{ data:['2013-01-01','2014-01-01','2015-01-01'], label : { formatter : function(s) { return s.slice(0, 4); } }, autoPlay : true, playInterval : 1000 }, options:[ { /**options 1 */ title : {text: '2013'}, tooltip : {trigger: 'axis'}, xAxis:{data:['A1','B1','C1']}, yAxis:{type : 'value'}, series:[{name: '2013',type: 'bar',data:[11,12,14]}] }, { /**options 2 */ title:{text:'2014'}, xAxis:{data:['A2','B2','C2','D2']},//length=4 series :[{name: '2014',data:[14,5,56,25]}] }, { /**options 3 */ title:{text:'2015'}, xAxis:{data:['A3','B3','C3']}, series :[{name: '2015',data:[12,45,26]}] } ] }; myChart.setOption(option);
注意:
上面这段代码要表达的意思就是图2所展示的效果,但是实际上并不能达到。实际上x轴的标签一直都是“options 1 ”代码块里的xAxis.data,而“options 2 ”代码块里的四个数据也展示不完全(只能展示前面3个)。为什么呢?
4、 Solution 解决方案
或许你已经感觉到要使用 TIMELINE_CHANGED 方法来控制效果。对,我也想到了,想着或许跟CLICK的方法使用一样,我打算通过myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function(param){……})方法的 param 参数来获取 timeline 属性和 options 数组。然而失败了,一次次提示
undefined,一次次提示
…… is not a function。那么真正的解决方法到底是什么呢?请耐心看完下面的代码,你会收获很多。
var ecConfig = require('echarts/config'); /**原来 TIMELINE_CHANGED 的使用方法有2个参数!2个参数!2个参数!(重要的事情说三遍)*/ myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function(paramA,paramB){ /** * 通过Console.log(paramA);Console.log(paramB); * 可以查看到通过两个参数分别可以获取到什么属性 * paramA 可以获取当前timeline节点的索引 * paramB 则可以获取到options数组 */ //Console.log(paramA); //Console.log(paramB); var option=myChart.getOption(); /** * 这段代码是关键 * 首先通过调试查看到xAxis在Option中的引用位置(看到xAxis是数组)即option.xAxis[0].data * paramA.currentIndex 获取到当前timeline节点的索引 * paramB.component.timeline.options[paramA.currentIndex] 获取到当前引用的options数组 * 相同的 paramB.component.timeline.timelineOption 则能获取到timeline属性了 * 别问我为什么知道的,调试!调试!调试! */ //Console.log(option); option.xAxis[0].data=paramB.component.timeline.options[paramA.currentIndex].xAxis.data; /** * myChart.setOption(option,true); 是告诉图形不合并数据,一定要设置为true,不然多出来的数据会一直存在!会一直存在!会一直存在! */ myChart.setOption(option,true); /** * myChart.resize(); 在这里一定要使用这句话,不然会丢失时间轴!会丢失时间轴!会丢失时间轴! */ myChart.resize(); });
注释很多,但实际上代码很少,却完美解决了一直困惑我的几个重大难题!我三天前在开源社区和百度知
4000
道提出了这个问题,却一直没有人来回答我,令我想不到的是最终找到解决方法的竟然是自己!中途我向人求教过,也因为拖延了项目进度想放弃过……But! 还是被我给找到了~~╰( ̄▽ ̄)╭╰( ̄▽ ̄)╭ 开心。感谢互联网~
ps:欢迎大家邮件我来一起讨论Echarts的各种问题,互相帮助,共同成长!
相关文章推荐
- 用VBScript写合并文本文件的脚本
- oracle列合并的实现方法
- 使用BAT一句话命令实现快速合并JS、CSS
- SQL 合并多行记录的方法总汇
- C#实现简单合并word文档的方法
- C#自适应合并文件的方法
- GridView单元格合并
- 如何合并多个 .NET 程序集
- 使用UglifyJS合并/压缩JavaScript的方法
- 高性能WEB开发 JS、CSS的合并、压缩、缓存管理
- 多个js与css文件的合并方法详细说明
- 使用不同的方法结合/合并两个JS数组
- 合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
- 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
- oracle实现多行合并的方法
- php分割合并两个字符串的函数实例
- PHP合并静态文件详解
- Windows下使用apache模块实现合并多个js、css提高网页加载速度
- JavaScript及jquey实现多个数组的合并操作
- php合并数组中相同元素的方法