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>