前言
基于本人最近在參與研究公司echarts報(bào)表部分的功能，其中遇到了不少的坑，這里將echarts異步加載json數(shù)據(jù)中涉及到的多個(gè)series加載實(shí)例問(wèn)題解決方案做一個(gè)共享。
問(wèn)題描述
我們?cè)诩虞decharts復(fù)雜圖形時(shí)，比如說(shuō)折線圖和柱狀圖結(jié)合，會(huì)涉及到多個(gè)series樣式，給個(gè)例子,
option = {
tooltip: {
trigger: 'axis',
formatter: function(params, ticket, callback) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesType === 'line') {
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + 'h';
} else {
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '個(gè)';
}
}
return res;
}
},
grid: {
containLabel: true
},
legend: {
data: ['時(shí)間', '人均個(gè)數(shù)', '總體個(gè)數(shù)']
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}],
dataZoom: [{
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty',
start: 0,
end: 100
}, {
type: 'slider',
yAxisIndex: 0,
filterMode: 'empty',
start: 0,
end: 100
}, {
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty',
start: 0,
end: 100
}, {
type: 'inside',
yAxisIndex: 0,
filterMode: 'empty',
start: 0,
end: 100
}],
yAxis: [{
type: 'value',
name: '時(shí)間',
min: 0,
position: 'left',
axisLabel: {
formatter: '{value} h'
}
}, {
type: 'value',
name: '個(gè)數(shù)',
min: 0,
position: 'right',
axisLabel: {
formatter: '{value} 個(gè)'
}
}],
series: [{
name: '時(shí)間',
type: 'line',
label: {
normal: {
show: true,
position: 'top',
}
},
lineStyle: {
normal: {
width: 3,
shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 10,
shadowOffsetY: 10
}
},
data: [1, 13, 37, 35, 15, 13, 25, 21, 6, 45, 32, 2]
}, {
name: '人均個(gè)數(shù)',
type: 'bar',
yAxisIndex: 1,
label: {
normal: {
show: true,
position: 'top'
}
},
data: [22, 22, 23, 77, 24, 55, 55, 89, 98, 164, 106, 224]
}, {
name: '總體個(gè)數(shù)',
type: 'bar',
yAxisIndex: 1,
label: {
normal: {
show: true,
position: 'top'
}
},
data: [201, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324]
}]
};
我們發(fā)現(xiàn)這個(gè)echarts圖表是雙y軸并且由柱狀圖和折線圖組成。時(shí)間是用折線圖表示的，人均個(gè)數(shù)和總體個(gè)數(shù)是由柱狀圖表示的。并且這是寫死的樣例，那么我們實(shí)際應(yīng)用中的數(shù)據(jù)肯定是用異步加載的方式加載數(shù)據(jù)的，json串的數(shù)據(jù)格式是一樣的，這種不同的series如何用json串異步加載呢？
實(shí)際解決方案
這里，樓主用自己所做的項(xiàng)目為例，貼出核心代碼。首先，獲取到的json串格式如圖。total的數(shù)據(jù)格式頭是data。即：data:{total:{date:...}}
var option = {
title: {
text: '交易量統(tǒng)計(jì)趨勢(shì)圖'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
},
formatter: function (params, ticket,callback){
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesType === 'line') {
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '元';
} else {
res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '元';
}
}
return res;
}
},
legend: {
data: [],
align: 'right',
right: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: []
}],
yAxis: [{
type: 'value',
name: '總價(jià)(元)',
axisLabel: {
formatter: '{value}'
}
}],
series: []
};
其次，需要加載數(shù)據(jù)的3個(gè)地方legend(表示圖例組件),xAxis(表示x軸數(shù)據(jù)),series(圖表類型和樣式等)全部設(shè)置為默認(rèn)，前期的準(zhǔn)備工作就這樣做好了。
然后，我們的核心代碼來(lái)了，最終我們要實(shí)現(xiàn)的效果是讓series有2個(gè)不同的圖表類型。那么，這里我們分別定義2個(gè)不同的圖表類型，即折線和柱狀，即：
//表示折線圖
var ItemLine = function () {
return {
name: '',
type: 'line',
label: {
normal: {
show: true,
position: 'top',
}
},
lineStyle: {
normal: {
width: 3,
shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 10,
shadowOffsetY: 10
}
},
data: []
}
};
//表示柱狀圖
var ItemBar = function () {
return {
name: '',
type: 'bar',
data: []
}
}
定義3個(gè)變量分別存儲(chǔ)legend,xAxis，series的值。
var legends=[];
var xDateArr=[];
var SeriesTotal=[];
將json串賦值給3個(gè)變量。這里十分重要！十分重要！十分重要?。ㄖ匾氖虑檎f(shuō)3遍）?；氐轿覀儎偛诺膉son串，注意，是以data為頭的。我們遍歷這個(gè)json串：
//給x軸賦值
xDataArr=data.total.date;
for (var k in data.total.element) {
//給legend賦值
lengends.push(data.total.element[k].name);
//核心，給series賦值，分開包裝的思想。
if (k == 0) {
var itemLine = new ItemLine();
itemLine.name = data.total.element[k].name;
itemLine.data = data.total.element[k].value;
SeriesTotal.push(itemLine);
} else {
var itemBar = new ItemBar();
itemBar.name = data.total.element[k].name;
itemBar.data = data.total.element[k].value;
SeriesTotal.push(itemBar);
}
}
當(dāng)然，我這里是用下標(biāo)做分割的，小伙伴們也可以用json頭等做標(biāo)志分割2個(gè)不同的series，主要思想是分次包裝，這樣就能實(shí)現(xiàn)series多個(gè)系列的數(shù)據(jù)異步加載了。哪怕3個(gè)，4個(gè)圖例都so easy了~~~
最后，再把這3個(gè)變量賦值給option,并將option加載到dom容器中即可。
var myChartTransactionTotal = echarts.init(document.getElementById('main_chart_transaction_total'));
option.legend.data = lengends;
//注意這里是xAxis[0],如果直接寫xAxis會(huì)報(bào)錯(cuò)，因?yàn)閤軸默認(rèn)有2個(gè)，上半年軸和下半軸。
option.xAxis[0].data = data.total.date;
option.series = SeriesTotal;
//這里最好加上true參數(shù)，否則會(huì)出現(xiàn)切換圖表時(shí)前面數(shù)據(jù)不會(huì)清除掉的情況。
myChartTransactionTotal.setOption(option, true);
讓我們來(lái)看下實(shí)際效果，是不是很簡(jiǎn)單有木有。如果有問(wèn)題歡迎大家一起交流討論哦！
