timeline组件:提供了在多个 ECharts option 间进行切换、播放等操作的功能.timeline 和其他组件有些不同，它需要操作『多个option』。我们把 ECharts 的传统的option 称为原子option，那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个原子option的复合option
var dataMap = {};
function dataFormatter(obj) {//年月
var pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'];
for (var year = 2002; year <= 2006; year++) {
for (var i = 1; i <= 12; i++) {
var month = (i > 9 ? '' + i : '0' + i);
var temp = obj[year + month];
for (var j = 0, l = temp.length; j < l; j++) {
obj[year + month][j] = {
name: pList[j],
value: obj[year + month][j]
}
}
}
}
return obj;
}
function dataFormatter(obj) {
var pList = ['北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','重庆','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆'];
var temp;
for (var year = 2002; year <= 2006; year++) {
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
obj[year][i] = {
name : pList[i],
value : temp[i]
}
}
}
return obj;
}
dataMap.dataGDP = dataFormatter({
2006:[8117.78,4462.74,11467.6,4878.61,4944.25,9304.52,4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],
2005:[6969.52,3905.64,10012.11,4230.53,3905.03,8047.26,3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],
2004:[6033.21,3110.97,8477.63,3571.37,3041.07,6672,3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],
2003:[5007.21,2578.03,6921.29,2855.23,2388.38,6002.54,2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],
2002:[4315,2150.76,6018.28,2324.8,1940.94,5458.22,2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6]
});
dataMap.dataFinancial = dataFormatter({
2006:[982.37,186.87,284.04,169.63,108.21,303.41,100.75,74.17,825.2,653.25,906.37,166.01,243.9,79.75,524.94,219.72,174.99,204.72,899.91,129.14,16.37,213.7,299.5,89.43,143.62,6.44,152.25,50.51,23.69,36.99,99.25],
2005:[840.2,147.4,213.47,135.07,72.52,232.85,83.63,35.03,675.12,492.4,686.32,127.05,186.12,69.55,448.36,181.74,127.32,162.37,661.81,91.93,13.16,185.18,262.26,73.67,130.5,7.57,127.58,44.73,20.36,32.25,80.34],
2004:[713.79,136.97,209.1,110.29,55.89,188.04,77.17,32.2,612.45,440.5,523.49,94.1,171,65.1,343.37,170.82,118.85,118.64,602.68,74,11.56,162.38,236.5,60.3,118.4,5.4,90.1,42.99,19,27.92,70.3],
2003:[635.56,112.79,199.87,118.48,55.89,145.38,73.15,32.2,517.97,392.11,451.54,87.45,150.09,64.31,329.71,165.11,107.31,99.35,534.28,61.59,10.68,147.04,206.24,48.01,105.48,4.74,77.87,42.31,17.98,24.8,64.92],
2002:[561.91,76.86,179.6,124.1,48.39,137.18,75.45,31.6,485.25,368.86,347.53,81.85,138.28,76.51,310.07,158.77,96.95,92.43,454.65,35.86,10.08,134.52,183.13,41.45,102.39,2.81,67.3,42.08,16.75,21.45,52.18]
});
myChart.setOption(option,true);设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表
myChart.getOption();获取当前实例中维护的option对象，返回的option对象中包含了用户多次setOption合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等
重点在 timelinechanged 这部分代码，用来监听timeline节点变化,及该做的逻辑都在这里
var xAxisdata = [
[
'北京', '\n天津', '河北', '\n山西', '内蒙古'
],
[
'北京test2', '\n天津test2', '河北test2', '\n山西test2', '内蒙古test2'
],
[
'北京test3', '\n天津test3', '河北test3', '\n山西test3', '内蒙古test3'
],
[
'北京test4', '\n天津test4', '河北test4', '\n山西test4', '内蒙古test4'
],
[
'北京test5', '\n天津test5', '河北test5', '\n山西test5', '内蒙古test5'
]
];
var option = {
baseOption: {
timeline: {
show : true,
axisType: 'category',
autoPlay: true,
playInterval: 2000,
data: [
'2002-01-01','2003-01-01','2004-01-01',
{
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
symbol: 'diamond',
symbolSize: 16
},
'2006-01-01'
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
title: {
subtext: 'echarts3使用timeline动态修改x轴'
},
tooltip: {},
legend: {
x: 'right',
data: ['GDP']
},
calculable : true,
grid: {
top: 80,
bottom: 100
},
xAxis: [
{
type:'category',
axisLabel:{'interval':0},
data:[
'北京','\n天津','河北','\n山西','内蒙古'
],
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value',
name: 'GDP（亿元）',
// max: 53500
max: 30000
}
],
series: [
{name: 'GDP', type: 'bar'}
]
},
options: [] //use js push
};
for (var year = 2002; year <= 2006; year++) {
option.options.push({
title: {},
xAxis: {
},
series: {}
});
}
//初始化显示,第一个timelinepoint不会触发timelinechanged dataMap.dataGDP[2002]:[4315,2150.76,6018.28,2324.8,1940.94]
getTimeLinePointOptionData(0, [{data: dataMap.dataGDP[2002]}]);
var chart = echarts.init(document.getElementById('chart_div'));
chart.setOption(option, true);
function getTimeLinePointOptionData(pointIndex, optionData) {
option.options[pointIndex].title.text = 2002 + pointIndex + '宏观经济指标';
//option.options[pointIndex].series.data = dataMap.dataGDP[2002];//单个
option.options[pointIndex].series = optionData; //多个data
}
chart.on('timelinechanged', function (timeLineIndex) {
// 设置 每个series里的xAxis里的值
var arrIndex = parseInt(timeLineIndex.currentIndex);
//$.post("statistics/map/result", {timelineIndex: arrIndex}, function (jsonData) {
getTimeLinePointOptionData(arrIndex, [{data: dataMap.dataGDP[2002 + arrIndex]}]);
// 动态修改x轴的值
//option.options[arrIndex].xAxis.data = xAxisdata[arrIndex];
chart.setOption(option);
//}, "json");
});