vue后台项目中如何使用echarts图表并实现自适应屏幕缩放，亲测~

最新推荐文章于 2025-06-06 14:29:52 发布

jcat_李小黑

最新推荐文章于 2025-06-06 14:29:52 发布

阅读量5.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts vue 前端图表响应式

本文链接：https://blog.csdn.net/weixin_43216105/article/details/89916791

本文介绍了在Vue后台项目中使用Echarts图表时如何实现自适应屏幕缩放。通过在main.js中全局挂载echarts，设置图表宽度为100%，并利用window.resize事件监听屏幕变化，确保图表在不同尺寸下保持适应性。同时，文章提醒在组件销毁时移除事件监听，防止内存泄漏，特别指出在Vue环境下无需考虑旧版浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在后台项目中，图表特别常见，在使用echarts作图的时候肯定会有自适应的问题，这里我向大家介绍一下，我使用的方法，基于vue 和element 的。其他框架同理。

正文

配置
npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

页面使用
为了实现自适应，所以在行内样式的width设置为100%。

<template>
    <div>
        <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
    </div>
</template>

js部分

<script>
    export default {
   
   
        data() {
   
   
            return {
   
    }
        },
        mounted() {
   
   
            this.drawLine();
            //实现自适应部分
           	this.resizefun = ()=>{
   
   
                this.$echarts.init(document.getElementById('myChart')).resize()
            }
            window