Echarts中series循环系统加上数据信息

2021-04-06 14:05 jianzhan
复制代码
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特性中


复制代码
/* 第一3个数据图表的配备--给油站年市场销售状况图 --折线图*/
var option13 = {
 title: [{
 //text: 今年给油站年市场销售状况图 ,
 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: [ 一月 , 二月 , 三月 , 4月 , 五月 , 6月 , 8月 , 八月 , 九月份 , 十月 , 十一月 , 11月 ],
 yAxis: [{
 type: value ,
 axisTick: {
 show: false,
 series : series
};
复制代码