寫在前面:
使用時間軸 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(, );
}
},
autoPlay : true,
playInterval :
},
options:[
{
/**options 1 */
title : {text: '2013'},
tooltip : {trigger: 'axis'},
xAxis:{data:['A1','B1','C1']},
yAxis:{type : 'value'},
series:[{name: '2013',type: 'bar',data:[,,]}]
},
{
/**options 2 */
title:{text:'2014'},
xAxis:{data:['A2','B2','C2','D2']},//length=4
series :[{name: '2014',data:[,,,]}]
},
{
/**options 3 */
title:{text:'2015'},
xAxis:{data:['A3','B3','C3']},
series :[{name: '2015',data:[,,]}]
}
]
};
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[].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的各種問題,互相幫助,共同成長!