注意：echarts初始化要在dom生成後，不然會報錯，我這裡是監聽彈框顯示的時候初始化echarts

1. <div ref="main" style="width: 700px; height: 600px"></div>

2. const main = ref(null) // 使用ref建立虛擬DOM引用，使用時用main.value

3. watch(EnvironChartVisible,(newValue,oldValue)=>{

  if(newValue === true){         init()  //初始化echarts函式       } })     eg:  　　　　 <template>   <div>     <div ref="connectModal"></div>     <a-modal       v-model:visible="EnvironChartVisible"       :maskClosable="false"       title="Environmental Chart"       okText="Submit"       cancelText="Cancel"       @cancel="handleCancel"       @ok="handleOk"       width="60%"       :getContainer="() => $refs.connectModal"     >      <div ref="main" style="width: 700px; height: 600px"></div>     </a-modal>   </div> </template>
<script lang="ts" setup> import { defineProps, defineEmits, toRefs, reactive, ref,onMounted,nextTick,watch } from 'vue' import * as echarts from "echarts"; const emit = defineEmits(['update:EnvironChartVisible']) const props = defineProps({   EnvironChartVisible: Boolean }) const {EnvironChartVisible}=toRefs(props) const main = ref(null) // 使用ref建立虛擬DOM引用，使用時用main.value watch(EnvironChartVisible,(newValue,oldValue)=>{   if(newValue === true){         init()       } }) function init() {   // 基於準備好的dom，初始化echarts例項   nextTick(() => {       //  此dom為echarts圖示展示dom      let myChart =echarts.init(main.value!);   // 指定圖表的配置項和資料  let option = {   tooltip: {     trigger: 'axis',     axisPointer: { type: 'cross' }   },   legend: {},   xAxis: [     {       type: 'category',       axisTick: {         alignWithLabel: true       },       data: [         '1月',         '2月',         '3月',         '4月',         '5月',         '6月',         '7月',         '8月',         '9月',         '10月',         '11月',         '12月'       ]     }   ],   yAxis: [     {       type: 'value',       name: 'Humidity',       min: 0,       max: 100,       interval:2.5,       position: 'right',       axisLabel: {         show:true,         formatter: '{value}',       }     },     {       type: 'value',       name: 'Temperature',       min: -300,       max: 0,       interval:10,       position: 'left',       axisLabel: {         formatter: '{value}',       }     }   ],   series: [     {       name: 'Humidity',       type: 'line',       yAxisIndex: 0,       data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]     },     {       name: 'Temperature',       type: 'line',       smooth: true,       yAxisIndex: 1,       data: [         6.0,         10.2,         10.3,         11.5,         10.3,         13.2,         14.3,         16.4,         18.0,         16.5,         12.0,         5.2       ]     }   ] };   // 使用剛指定的配置項和資料顯示圖表。   myChart.setOption(option);   });  
  } </script>