timeline component: Provides the function of switching, playing and other operations between multiple ECharts options. The timeline is somewhat different from other components, it needs to operate "multiple options". We call the traditional option of ECharts as atomic option, then when using timeline, the option passed into ECharts becomes a composite option that collects multiple atomic options
var dataMap = {};
function dataFormatter(obj) {//年月
var pList = ['Beijing', 'Tianjin', 'Hebei', 'Shanxi', 'Inner Mongolia', 'Liaoning', 'Jilin', 'Heilongjiang', 'Shanghai', 'Jiangsu', 'Zhejiang', 'Anhui' ', 'Fujian', 'Jiangxi', 'Shandong', 'Henan', 'Hubei', 'Hunan', 'Guangdong', 'Guangxi', 'Hainan', 'Chongqing', 'Sichuan', 'Guizhou', 'Yunnan', 'Tibet', 'Shaanxi', 'Gansu', 'Qinghai', 'Ningxia', 'Xinjiang'];
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 = ['Beijing','Tianjin','Hebei','Shanxi','Inner Mongolia','Liaoning','Jilin','Heilongjiang','Shanghai','Jiangsu','Zhejiang','Anhui ','Fujian','Jiangxi','Shandong','Henan','Hubei','Hunan','Guangdong','Guangxi','Hainan','Chongqing','Sichuan','Guizhou', 'Yunnan','Tibet','Shaanxi','Gansu','Qinghai','Ningxia','Xinjiang'];
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); Set the configuration items and data of the chart instance, universal interface, all parameters and data modification can be done through setOption, ECharts will merge the new parameters and data, and then refresh the chart
myChart.getOption() ; Get the option object maintained in the current instance. The returned option object contains the configuration items and data merged by the user with multiple setOptions, and also records the state of user interaction, such as the switch of the legend, the range of the zooming selection in the data area, etc. Wait
The focus is on the timelinechanged part of the code, which is used to monitor the timeline node changes, and the logic to do it is here
var xAxisdata = [
[
'Beijing', '\nTianjin', 'Hebei', '\nShanxi', 'Inner Mongolia'
],
[
'Beijing test2', '\nTianjin test2', 'Hebei test2', '\nShanxi test2', 'Inner Mongolia test2'
],
[
'Beijing test3', '\nTianjin test3', 'Hebei test3', '\nShanxi test3', 'Inner Mongolia test3'
],
[
'Beijing test4', '\nTianjin test4', 'Hebei test4', '\nShanxi test4', 'Inner Mongolia test4'
],
[
'Beijing test5', '\nTianjin test5', 'Hebei test5', '\nShanxi test5', 'Inner Mongolia 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 reaches a height'
},
symbol: 'diamond',
symbolSize: 16
},
'2006-01-01'
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
title: {
subtext: 'echarts3 uses timeline to dynamically modify the x-axis'
},
tooltip: {},
legend: {
x: 'right',
data: ['GDP']
},
calculable : true,
grid: {
top: 80,
bottom: 100
},
xAxis: [
{
type:'category',
axisLabel: {'interval': 0},
data:[
'Beijing','\nTianjin','Hebei','\nShanxi','Inner Mongolia'
],
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value',
name: 'GDP (100 million yuan)',
// 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: A
},
series: {}
});
}
//Initialization display, the first timelinepoint will not trigger 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 + 'macroeconomic indicators';
//option.options[pointIndex].series.data = dataMap.dataGDP[2002];//Single
option.options[pointIndex].series = optionData; //多个data
}
chart.on('timelinechanged', function (timeLineIndex) {
// Set the value in the xAxis in each series
var arrIndex = parseInt(timeLineIndex.currentIndex);
//$.post("statistics/map/result", {timelineIndex: arrIndex}, function (jsonData) {
getTimeLinePointOptionData(arrIndex, [{data: dataMap.dataGDP[2002 + arrIndex]}]);
// Dynamically modify the value of the x-axis
//option.options[arrIndex].xAxis.data = xAxisdata [arrIndex];
chart.setOption(option);
//}, "json");
});