组件封装
引入Echarts就不做记录了
npm

<template>
  <div class='Echarts'> 
	<div id='charts' > </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default { 
  name: "Echarts",
  props: {
    setOptions: {
      type: Object,
      default: {}
    }
  },
  created () {
    this.initCharts() // 实例化一次
  },
  methods; {
	initCharts () {
	  let echarts = this.$echarts.init(document.getElementById("charts"))
	  echarts.setOption(this.setOptions)
	}
  }
}
</script>
<style>
  // 这里自定义了
</style>

以上组件在同一个页面复用两次或两次以上时，会出现数据覆盖，第二个 Echarts 组件会不显示的问题。经过折腾了解到，init时不能使用 class 或者 id 的方式进行init

在一个单容器中初始化多个 ECharts 实例的话【同一个class或id】，是会出问题的。
修正：

<div id='charts' > </div>   
修正为后
<div ref='charts' > </div>

this.$echarts.init(document.getElementById("charts")) 
修正为后
this.$echarts.init(this.$el);

修正后复用就没有问题了
特此记录。