Echarts 通过时间轴timeline改变xAxis.data数据进行不合并处理

原创 2015年11月19日 16:36:14

写在前面:
      使用时间轴 timeline 绘制图形的时候会有一种动态的效果,让图形看起来更加生动,也达到了交互式数据的展现。但是在使用 timeline 的时候我遇到了几个问题,其中最头疼的还是对 xAxis.data 数据进行不合并处理。本文章就是通过使用 TIMELINE_CHANGED 方法和 myChart.setOption(option,true) ,以及 myChart.resize() 来实现改变x轴数据。

作者:Reese
时间:2015-11-19
备注:希望这个文档能对大家有帮助,有用你就悄悄copy走,再默默地给我点个赞~ (≧▽≦)/


1、 Question场景


通过时间轴timeline控制一年的月份,xAxis.data则表示每个月的天数。那么问题来了, 除开2月份的28/29,其余月份的30-31交替出现,如何通过timeline来处理呢?


2、 效果图


动态timeline


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();
});

注释很多,但实际上代码很少,却完美解决了一直困惑我的几个重大难题!我三天前在开源社区和百度知道提出了这个问题,却一直没有人来回答我,令我想不到的是最终找到解决方法的竟然是自己!中途我向人求教过,也因为拖延了项目进度想放弃过……But! 还是被我给找到了~~╰( ̄▽ ̄)╭╰( ̄▽ ̄)╭ 开心。感谢互联网~

ps:欢迎大家邮件我来一起讨论Echarts的各种问题,互相帮助,共同成长!

版权声明:神,让本妹子做一个美美哒的程序媛╰( ̄▽ ̄)╭

echarts动态时间轴,以秒为单位更新

echarts官网上的案例是按天来更新数据的http://echarts.baidu.com/demo.html#dynamic-data2 现在我需要改成以秒为单位动态刷新的案例,类似于股票实时...
  • u013720726
  • u013720726
  • 2017年09月05日 15:58
  • 2101

ECharts显示24小时时间数据的一种办法

ECharts3是一个超好用的图表库,在App中,我也让团队放弃原生组件,直接使用ECharts3. 我用ECharts主要是按天显示采集的时间序列数据,并且需要固定展示24小时的数据。 ...
  • yin138
  • yin138
  • 2016年12月18日 21:59
  • 14806

echart以秒为单位的动态时间轴

  • 2017年09月05日 15:57
  • 188KB
  • 下载

echarts折线图时间轴展示

[javascript] view plain copy echarts折线图,我们平时在使用的时候,x轴上面的数...
  • AinUser
  • AinUser
  • 2017年08月03日 09:06
  • 2648

echarts中时间轴单独使用

option = {   timeline:{     data:[       '2002-01-01','2003-01-01','2004-01-01','2005-01-01','200...
  • wanhongyanwhy
  • wanhongyanwhy
  • 2014年11月15日 10:09
  • 1232

ECharts实例开发学习笔记二——时间轴

记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数...
  • Qing_yun
  • Qing_yun
  • 2015年09月24日 21:19
  • 17541

echarts实时更新动态折线图

  • 2017年11月21日 13:46
  • 3.56MB
  • 下载

Echarts使用及动态加载图表数据 折线图X轴数据动态加载

Echarts简介       echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度。。。我想应该够简洁了 使用Echarts   ...
  • verne_feng
  • verne_feng
  • 2016年06月22日 08:52
  • 39436

echarts通过timeline时间轴改变图表的数据,解决X轴,series问题

问题叙述:通过echarts的时间轴进行数据、X轴坐标以及每个option的属性都不一样的进行图表切换。这里面使用的是echarts2.0版本,可惜的是我鼓捣半天也没弄出来echarts3.0的tim...
  • guorui_cara
  • guorui_cara
  • 2017年10月19日 16:12
  • 1219

echarts按开始日期和结束时间做报表

ECharts                     Date.prototype.Format = function (fmt) { //author: meizz  var o =...
  • z123500
  • z123500
  • 2015年08月30日 21:38
  • 13983
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Echarts 通过时间轴timeline改变xAxis.data数据进行不合并处理
举报原因:
原因补充:

(最多只允许输入30个字)