Echarts中series循環添加數據

在js中for循環添加Echarts中的series屬性：

for (var i = 0, size = data.dataList.length; i < size; i++) {
　　legendData.push(data.dataList[i].sjjc);
　　series.push({
　　　　name: data.dataList[i].sjjc,
　　　　type: 'line',
　　　　smooth: true,
　　　　label: {
　　　　　　normal: {
　　　　　　　　show: true,
　　　　　　　　position: 'top',
　　　　　　　　color: '#424242',
　　　　　　　　fontSize: 12,
　　　　　　}
　　　　},
　　　　data: [data.dataList[i].yf1 , data.dataList[i].yf2 , data.dataList[i].yf3 , data.dataList[i].yf4 , data.dataList[i].yf5 ,
　　　　　　data.dataList[i].yf6 , data.dataList[i].yf7 , data.dataList[i].yf8 , data.dataList[i].yf9 , data.dataList[i].yf10 , 
　　　　　　data.dataList[i].yf11 , data.dataList[i].yf12]
　　});
}

 

1.首先定義變量

2.根據后台查詢出來的數據循環添加到變量中

var series = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
　　legendData.push(data.dataList[i].sjjc);
　　series.push({
　　　　name: data.dataList[i].sjjc,
　　　　type: 'line',
　　　　smooth: true,
　　　　label: {
　　　　　　normal: {
　　　　　　　　show: true,
　　　　　　　　position: 'top',
　　　　　　　　color: '#424242',
　　　　　　　　fontSize: 12,
　　　　　　}
　　　　},
　　　　data: [data.dataList[i].yf1 , data.dataList[i].yf2 , data.dataList[i].yf3 , data.dataList[i].yf4 , data.dataList[i].yf5 ,
　　　　　　data.dataList[i].yf6 , data.dataList[i].yf7 , data.dataList[i].yf8 , data.dataList[i].yf9 , data.dataList[i].yf10 , 
　　　　　　data.dataList[i].yf11 , data.dataList[i].yf12]
　　});
}

3.賦值到Echarts的series屬性中

/* 第13個圖表的配置--加油站年銷售情況圖 --折線圖*/
var option13 = {
　　title: [{
　　　　//text: '2019年加油站年銷售情況圖',
　　　　text: titleText,
　　　　left: 'center',
　　　　textStyle: {
　　　　　　color: '#4c4c4c',
　　　　　　fontWeight: "bold",
　　　　　　fontSize: 16,
　　　　},
　　　　}, {
　　　　　　text: '單位：(萬元)',
　　　　　　left: 'right',
　　　　　　textStyle: {
　　　　　　color: '#929292',
　　　　　　fontWeight: "normal",
　　　　　　fontSize: 12,
　　　　},
　　}],
　　legend: {
　　　　//data: ['中石油102', '大平五一路', '中通', '和源', '德月', '銘磊', '高橋', '大平汽貿城', '天盈', '寶光', '燕港', '順達', '長城'],
　　　　data: legendData,
　　　　bottom: 0
　　},
　　tooltip: {
　　　　trigger: 'axis',
　　　　axisPointer: {
　　　　　　type: 'cross'
　　　　},
　　　　formatter:function(params){
　　　　　　var res = params[0].name;
　　　　　　for (var i = 0; i < params.length; i++) {
　　　　　　　　res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
　　　　　　}
　　　　　　return res;
　　　　}
　　},
　　dataZoom: [{
　　　　type: 'inside',
　　}],
　　toolbox: {
　　　　show: true, //是否顯示工具箱
　　　　right: 70,
　　　　top: -8,
　　　　//要顯示的工具箱內容
　　　　feature: {
　　　　　　saveAsImage: { //保存為圖片
　　　　　　　　show: true
　　　　　　},
　　　　}
　　},
　　grid: {
　　　　top: '30',
　　　　left: '1%',
　　　　right: '1%',
　　　　bottom: '40',
　　　　containLabel: true,
　　},
　　xAxis: [{
　　　　data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
　　}],
　　yAxis: [{
　　　　type: 'value',
　　　　axisTick: {
　　　　　　show: false,
　　　　},
　　}],
　　series : series
};