echarts动态添加折线图

echarts中的setOption这个API可以设置echarts图的配置项，并按照配置项进行渲染，这个配置项其实有两个参数，第一个参数是option，第二个参数是一个Boolean类型，为true就是覆盖原来的option，为false会与原来的option进行合并：

// 原来的option
const option = {
	legend: {
          bottom: "bottom"
    }
}
// 动态添加了option
echartsDom.setOption({
	legend: {
		left:"left"
	}
}, false)
// 为false会把option进行合并，变成
/*
	option = {
		legend: {
          	bottom: "bottom",
          	left: "left"
    	}
*/

// 原来的option
const option = {
	legend: {
          bottom: "bottom"
    }
}
// 动态添加了option
echartsDom.setOption({
	legend: {
		left:"left"
	}
}, true)
// 为true会把option进行覆盖，变成
/*
	option = {
		legend: {
          	left: "left"
    	}
*/

动态修改了option后，应该要使用setOption来重新设置和渲染；
下面是我做的一个动态添加折线图的vue案例：

<template>
  <div class="container">
    <el-button size="small" type="primary" @click="handleDown"
      >添加折线图</el-button
    >
    <div ref="echarts" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      num: 0,
      legend: ["广东", "广西", "云南", "贵州", "海南", "深圳"],
      option: {
        color: ['#000000', '#6300bf', '#02a7f0', '#f59a23', '#95f204', '#d9001b'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: "bottom",
          itemGap: 40,
          data: ["广东"]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          data: ['2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: "广东",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize: 10,
            showSymbol: false,
            type: 'line'
          }
        ]
      }
    }
  },
  mounted() {
    this.Dchart()
  },
  methods: {
    Dchart() {
      var myChart = echarts.init(this.$refs.echarts);
      myChart.setOption(this.option);
    },
    // 动态添加折线图
    handleDown() {
      this.num += 1
      let data = []
      // 设置随机的y轴数据
      for (let i = 0; i < 7; i++) {
        data.push(Math.ceil(Math.random() * 1000))
      }
      // 动态添加legend
      this.option.legend.data.push(this.legend[this.num])
      // 动态添加series
      this.option.series.push({
        name: this.legend[this.num],
        data: data,
        symbolSize: 10,
        showSymbol: false,
        type: 'line'
      })
      // 重新设置option并渲染
      echarts.init(this.$refs.echarts).setOption(this.option, true)
    }
  }
}
</script>

效果如下：