美文网首页
Echarts 动态生成 series

Echarts 动态生成 series

作者: 若水亦城空 | 来源:发表于2019-12-19 10:31 被阅读0次
var option = {
 tooltip: {
   trigger: "axis",
   axisPointer: {
     // 坐标轴指示器,坐标轴触发有效
     type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
   }
 },
 legend: {
   data: data.legend
 },
 grid: {
   left: "3%",
   right: "4%",
   bottom: "3%",
   containLabel: true
 },
 yAxis: {
   type: "value"
 },
 xAxis: {
   type: "category",
   data: data.time
 },
 dataZoom: [
   {
     start: 0,
     end: 100
   },
   {
     type: "inside"
   }
 ],
 series: (function() {
   var series = [];

   for (var i = 0; i < data.statisData.length; i++) {
     var item = {
       name: data.statisData[i].channelName,
       type: "bar",
       stack: data.statisData[i].source,
       label: {
         normal: {
           show: true,
           position: "insideRight"
         }
       },
       data: data.statisData[i].number
     };
     series.push(item);
   }

   return series;
 })()
};

文章链接
https://laysonx.com/essay/detail?id=59

不能确定他有多少个列(纵坐标),因此需要动态加载echarts的series。

var option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器,坐标轴触发有效
      type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
    }
  },
  legend: {
    data: data.legend
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  yAxis: {
    type: "value"
  },
  xAxis: {
    type: "category",
    data: data.time
  },
  dataZoom: [
    {
      start: 0,
      end: 100
    },
    {
      type: "inside"
    }
  ],
  series: (function() {
    var dataArr = [120, 132, 101, 134, 90, 230, 210];
    var serie = [];
    var aa = ["邮件营销"];
    for (var i = 0; i < aa.length; i++) {
      var item = {
        name: aa[i],
        type: "line",
        stack: "总量", //不清楚
        data: dataArr
      };
      serie.push(item);
    }
    /* console.log(serie); */
    return serie;
  })()
};
```






相关文章

网友评论

      本文标题:Echarts 动态生成 series

      本文链接:https://www.haomeiwen.com/subject/nuqmnctx.html