Echarts中series循环添加数据

作者: 健隆 分类: 前端 发布时间: 2020-06-13 15:34

在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
};
复制代码

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!