关于vue.js:vue中嵌入echarts的方法

如何在vue中更好的应用echarts，实际上不仅是echarts，antv、腾讯地图、百度地图...都实用，他们有个独特的特点，就是其加载流程都是：创立DOM、找到DOM、渲染地图、完结。我的思路是应用vue的render函数，在render函数中创立一个DOM节点，而后在初始化地图的时候通过ID找到dom进行渲染，然而这里有个问题，就是id的命令，在现场开发的时候呈现了个问题，就是打包后图表组件切换过程中没有即便销毁，导致二次渲染的时候无奈失常渲染，因为呈现了两个id同名的dom。所以咱们思考在created阶段中创立一个惟一的domId,而后在montend阶段通过保护在data中的domId找到DOM进行地图渲染，最初在beforeUnmount阶段卸载这个dom。

<script>import {h} from 'vue'export default {  data(){    return {      domId:'',      dom:null    }  },  created(){    // 初始化domID    this.domId ='chart_container_'+Math.round( Math.random()*100000);  },  mounted(){    // 初始化地图    this.initChart();  },  beforeUnmount(){    // 卸载的时候挪出dom    this.dom.parentNode.removeChild(this.dom);  },  methods:{    initChart(){      let dom = document.getElementById(this.domId);      this.dom = dom;      dom.style.height = '260px';      let chart = this.$echarts.init(dom);      let option = {          xAxis: {              type: 'category',              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']          },          yAxis: {              type: 'value'          },          series: [{              data: [150, 230, 224, 218, 135, 147, 260],              type: 'line'          }]      };      chart.setOption(option);    }  },  render(){    return h(      'div',      { id: this.domId }    )  }}</script>