解决vue2和vue3 ECharts二次渲染不出现的问题（切换不显示 ref）

解决vue2和vue3 ECharts二次渲染不出现的问题（切换不显示ref）

使用document.getElementById 来获取Dom元素，即渲染一次，通过ref可以解决。

Vue2现象

//1.template
<template>
  <div class="my_chart" ref="mycharts"></div>
</template>
  //2.script
 <script>
	import echarts from "echarts";
	export default {
		 mounted(){
			let mychart=echarts.init(this.$refs.mycharts)
			if (mychart != "" && mychart != null) {
	       		 mychart.clear();
	      }
	      echarts数据
	      let option={}
	      mychart.setOption(option)
	      }
     }
</script>
//style
<style scoped>
	.my_chart {
	  width: 471px;
	  height: 260px;
	}
</style>

  

vue3 现象

//1.页面
<template>
    <div ref="domRef" style="width: 410px; height: 200px"/>
</template>
//2.渲染
<script>
	import * as echarts from 'echarts'
	import { onMounted, ref } from 'vue'
	export default {
	  setup () {
	    const domRef = ref(null)
	    onMounted(() => {
	      const myChart = echarts.init(domRef.value)
	      //echarts数据
	       const option ={}
	       // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option)
	      // 设置实例参数
	      window.onresize = () => {
	        myChart.resize()
	      }
	    })
	    return { domRef }
	  }
	}
</script>