vue 中echart折线自适应

最新推荐文章于 2025-06-18 18:12:47 发布

转载最新推荐文章于 2025-06-18 18:12:47 发布 · 1.2k 阅读

文章标签：

#html5

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个Vue项目中使用ECharts时遇到的问题：浏览器窗口缩放时折线图无法自适应。文章提供了具体的解决方案，并通过在mounted生命周期内调用特定方法实现了图表的自适应。

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

前端时间做一个vue的项目，echart是按需引入的如下：

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴，
解决方法是在mounted里面调用如下方法：

init () {
        //折线图宽高自适应
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.chart = echarts.init(self.$refs.lineChart);
            self.chart.resize();
          };
        }, 20);
    }