vue2.0中自适应echarts图表、全屏插件screenfull

最新推荐文章于 2025-03-08 09:18:49 发布

牛仔很会忙

最新推荐文章于 2025-03-08 09:18:49 发布

阅读量2k

点赞数 2

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_66970189/article/details/126453342

版权

本文介绍了如何在Vue2.0项目中结合ElementUI和ECharts实现自适应图表，通过设置弹性盒子布局和监听窗口尺寸变化来调整图表大小。同时，利用screenfull插件实现了全屏功能，包括检查全屏支持、进入和退出全屏的逻辑。示例代码详细展示了如何在mounted生命周期钩子中初始化图表并响应窗口大小变化，以及如何结合ElementUI按钮实现全屏切换功能。

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

该案例是基于vue2.0脚手架，使用了elementUI、eCharts、screenfull插件

自适应echarts图表

第一，自适应的echarts图表，要配合着能够自适应的盒子来使用，首先就是盒子要能够跟随屏幕大小改变而改变，比如我们使用弹性盒子就可以实现。
第二，要想实现自适应的echarts图表，就是当窗口发生改变时，echarts图表的尺寸重新定义一下，使用resize的方法就可以实现。

总体布局

<template>
    <div class="aboutPage">
        <div class="chartBoxWrap" ref="chartBox">
            <div id="chartBox"></div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.chartBoxWrap {
   
    display: flex;
    height: 600px;

    #chartBox {
   
        flex: 1;
        background-color: #f0faf0;
    }
}
</style>

创建echarts图表的方法

initChart(e){
   
            let myChart = echarts.init(document.getElementById("chartBox"))
            myChart.setOption({
   
                title:{
   
                    text:"自适应图表"
                },
                legend:{
   
                    show:true,
                    icon:'circle'
                },
                xAxis:{
   
                    type:'category',
                    name:"月份",
                    data:e.xData
                }

最低0.47元/天解锁文章