vue3 antd modal 弹框中echarts显示

注意：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.valuewatch(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>