关于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>