Vue项目中Echarts实例化的时候如何共用一个js对象

1.近期在一个项目的开发中，在同一个页面需要创建多个echarts示例（类型相同，都是折线图），所以就想着创建一个js文件

export default {
  title: {
    text: ''
  },
  legend: {
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '价格',
      max: 150
    }
  ],
  series: [
    {
      name: '预购队列',
      type: 'bar',
      data: [100, 110, 130, 90, 80, 20, 54, 35, 75, 83]
    }
  ]
}

2.在vue项目中引入js

<script>
import chart from './chart/chart'
export default {
  name: 'TestChart',
  data () {
    return {
      chart1: null,
      chart2: null
    }
  },
  mounted () {
    this.initchart1()
    this.initchart2()
  },
  methods: {
  	initchart1() {
  		this.chart1 = this.$echarts.init(document.getElementById('chart1'))
  		chart.series[0].data = [12,13,14]
  		this.chart.setOption(chart)
  	},
  	initchart2() {
  		this.chart2 = this.$echarts.init(document.getElementById('chart2'))
  		chart.series[0].data = [1,2,3]
  		this.chart.setOption(chart)
  	}
  }
}
</script>

3.当执行以上代码时发现，两个图表中的值都是1、2、3，为什么呢？
因为chart是个对象，直接赋值会改变原对象的值

此时应该从原对象中深拷贝一个相同的对象出来

initchart1() {
  		this.chart1 = this.$echarts.init(document.getElementById('chart1'))
  		const backChart = JSON.parse(JSON.stringify(chart))
  		backChart.series[0].data = [12,13,14]
  		this.chart.setOption(backChart)
  	},
  	initchart2() {
  		this.chart2 = this.$echarts.init(document.getElementById('chart2'))
  		const backChart = JSON.parse(JSON.stringify(chart))
  		backChart.series[0].data = [1,2,3]
  		this.chart.setOption(backChart)
  	}

解决。