vue3.2中实现vue-echarts自适应窗口

猫玖鱼柒网络科技

于 2023-05-16 21:24:24 发布

阅读量255

点赞数

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/qq_63573498/article/details/130714415

版权

问题描述

当窗口改变时，如何让图表的大小响应式变化呢？看了网上的很多教程，包括chatgpt，基本要么无法使用，要么是vue2，要么不是vue-echarts而是echarts

解决问题

<script lang="ts" setup>
  import {onMounted, ref} from "vue"
  const options = {
    // 配置数据表
  }
  const chart = ref<any>(null)
  onMounted(()=>{
      window.addEventListener('resize', () => {
         chart.value.resize() // 调用自适应
      })
  })
</script>

<template>
  <e-charts ref="chart" :option="options" class="chart"/>
</template>

<style scoped>
.chart{
    width: 800px;
    height: 400px;
}
</style>