SOURCE

const a = Mock.mock({
  "array|6000": [
    {
      "x|+1": 1,
      y: () => Mock.Random.integer(60, 100),
      type: "a"
    }
  ]
}).array;

const b = Mock.mock({
  "array|0": [
    {
      "x|+1": 1,
      y: () => Mock.Random.integer(60, 100),
      type: "b"
    }
  ]
}).array;

const c = Mock.mock({
  "array|0": [
    {
      "x|+1": 1,
      y: () => Mock.Random.integer(60, 100),
      type: "c"
    }
  ]
}).array;

const myChart = new G2.Chart({
  container: "app",
  autoFit: true
});
myChart.tooltip({
  showCrosshairs: true,
  shared: true
});
myChart.render();

const render = obj => {
  let data = [];
  for (let key in obj) {
    myChart.scale(key, { nice: true });
    myChart.axis(key, { position: "left" });
    data = data.concat(obj[key]);
    myChart.option('slider', {
      start: 0,
      end: 1,
      trendCfg: {
        isArea: false,
      },
    });
    myChart.interaction('brush');
    myChart
      .line()
      .position("x*y")
      .color("type");
  }
  myChart.data(data);
  myChart.render();
};

render({ a, b, c });

var myChart1 = echarts.init(document.getElementById("app1"));

// specify chart configuration item and data
var option = {
  title: {
    text: "折线图堆叠"
  },
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: [{
        type: 'inside',
        start: 0,
        end: 50
    }, {
        start: 0,
        end: 50
    }],
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: Mock.Random.range(8000)
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "邮件营销",
      type: "line",
      stack: "总量",
      data: Mock.mock({
        "array|20000": [() => Mock.Random.integer(0, 100)]
      }).array
    },
    {
      name: "联盟广告",
      type: "line",
      stack: "总量",
      data: Mock.mock({
        "array|20000": [() => Mock.Random.integer(0, 100)]
      }).array
    },
    {
      name: "视频广告",
      type: "line",
      stack: "总量",
      data: Mock.mock({
        "array|20000": [() => Mock.Random.integer(0, 100)]
      }).array
    },
    {
      name: "直接访问",
      type: "line",
      stack: "总量",
      data: Mock.mock({
        "array|20000": [() => Mock.Random.integer(0, 100)]
      }).array
    },
    {
      name: "搜索引擎",
      type: "line",
      stack: "总量",
      data: Mock.mock({
        "array|20000": [() => Mock.Random.integer(0, 100)]
      }).array
    }
  ]
};

// use configuration item and data specified to show chart
myChart1.setOption(option);

window.onresize = myChart1.resize;

<div id="app"></div>
<div id="app1"></div>

#app {
  width: 100%;
  height: 300px;
  background: rgba(0, 0, 0, 0.1)
}

#app1 {
  width: 100%;
  height: 300px;
  background: rgba(0, 0, 0, 0.1)
}