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 };