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.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>
