• 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
    };
  • 相关阅读:
    jQuery遍历节点方法汇总
    python_30期自动化【艺龙酒店】
    python_30期【条件判断语句】
    python_30期【os模块 path处理路径】
    python_30期自动化【类的封装】
    python_30期【函数里面的位置参数/默认参数】
    python_30期【while循环】
    python_30期【http_requsts】
    python_30期【类方法之间的调用 return】
    python_30期【实例函数 类里面的函数】
  • 原文地址:https://www.cnblogs.com/chuanqi1995/p/11387423.html
Copyright © 2020-2023  润新知