vue3+ts+element plus 使echarts自适应（推荐）

思路就是通过echarts官方的方法resize方法。不过vue3你需要一个时机去调用这个方法

<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" type="text">Operation button</el-button>
          </div>
        </template>
        <div style="height: 200px" ref="homeLaboratoryRef"></div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" type="text">Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {
    
    {
    
     "List item " + o }}
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" type="text">Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {
    
    {
    
     "List item " + o }}
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" type="text">Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {
    
    {
    
     "List item " + o }}
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import * as echarts from 'echarts'
import {
    
    
  toRefs,
  reactive,
  onMounted,
  nextTick,
  computed,
  getCurrentInstance,
  watch,
  onActivated
} from 'vue'

export default {
    
    
  setup () {
    
    
    const {
    
     proxy } = getCurrentInstance() as any
    const state = reactive({
    
    
      myCharts: []
    })
    const initHomeLaboratory = () => {
    
    
      const myChart = echarts.init(proxy.$refs.homeLaboratoryRef)
      const option = {
    
    
        grid: {
    
    
          top: 50,
          right: 20,
          bottom: 30,
          left: 30
        },
        tooltip: {
    
    
          trigger: 'axis'
        },
        legend: {
    
    
          data: ['预购队列', '最新成交价'],
          right: 13
        },
        color: [
          '#63caff',
          '#49beff',
          '#03387a',
          '#03387a',
          '#03387a',
          '#6c93ee',
          '#a9abff',
          '#f7a23f',
          '#27bae7',
          '#ff6d9d',
          '#cb79ff',
          '#f95b5a',
          '#ccaf27',
          '#38b99c',
          '#93d0ff',
          '#bd74e0',
          '#fd77da',
          '#dea700'
        ],
        xAxis: {
    
    
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: [
          {
    
    
            type: 'value',
            name: '价格'
          }
        ],
        series: [
          {
    
    
            name: '预购队列',
            type: 'bar',
            data: [200, 85, 112, 275, 305, 415, 441, 405, 275, 305, 415, 441],
            itemStyle: {
    
    
              barBorderRadius: [4, 4, 0, 0],
              color: {
    
    
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
    
    
                    offset: 0,
                    color: '#0b9eff'
                  },
                  {
    
    
                    offset: 1,
                    color: '#63caff'
                  }
                ]
              }
            }
          },
          {
    
    
            name: '最新成交价',
            type: 'line',
            data: [50, 85, 22, 155, 170, 25, 224, 245, 285, 300, 415, 641],
            itemStyle: {
    
    
              color: '#febb50'
            }
          }
        ]
      }
      myChart.setOption(option)
      state.myCharts.push(myChart)
    }
    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
    
    
      nextTick(() => {
    
    
        for (let i = 0; i < state.myCharts.length; i++) {
    
    
          state.myCharts[i].resize()
        }
      })
    }
    // 批量设置 echarts resize
    const initEchartsResize = () => {
    
    
      window.addEventListener('resize', initEchartsResizeFun)
    }
    // 页面加载时
    onMounted(() => {
    
    
      initHomeLaboratory()
      initEchartsResize()
    })
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
    
    
      initEchartsResizeFun()
    })
    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    // watch(
    //   () => store.state.tagsViewRoutes.isTagsViewCurrenFull,
    //   () => {
    
    
    //     initEchartsResizeFun()
    //   }
    // )
    return {
    
    
      ...toRefs(state)
    }
  }
}
</script>

<style lang="less" scoped></style>