vue中嵌入echarts的方法

Posted 2021-09-14 李春雨

如何在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>