Echarts绘制完图表之后更改图表宽度

最新推荐文章于 2025-06-11 10:38:38 发布

Monly21

最新推荐文章于 2025-06-11 10:38:38 发布

阅读量956

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/jhgfvjfggff_fds_f/article/details/130585066

vue 专栏收录该内容

47 篇文章

订阅专栏

该文章介绍了一个使用Echarts绘制图表的Vue项目，其中详细说明了如何在点击按钮后隐藏左侧内容，使右侧的Echarts图表全屏显示。代码示例展示了如何通过调整Vue的列布局以及使用Echarts的resize方法实现图表的动态适应。

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

1. 效果展示

在这里插入图片描述

2. 需求说明

Echarts绘制完图表之后，需要隐藏左边的内容，并且使右边的Echarts图表全屏显示

3. 项目代码

<template>
    <div>
        <v-row>
            <v-col :cols="coks" v-if="showBtn">
                1234
            </v-col>
            <v-col :cols="12 - coks">
                <div id="chart" style="width: 100%; height: 400px"></div>
            </v-col>
        </v-row>
        <v-btn @click="showBtnMethod">隐藏</v-btn>
    </div>
</template>

<script>
import * as echarts from "echarts";
var chartDom, myChart, option = null
export default {
    data() {
        return {
            coks: 6,
            showBtn: true
        }
    },
    mounted() {
        let _this = this;
        window.onresize = function () {  // 核心代码
            myChart.resize();
        };
        this.huizhi()
    },
    methods: {
        showBtnMethod() {
            this.showBtn = !this.showBtn
            if (this.showBtn) {
                this.coks = 6
            } else {
                this.coks = 0
            }
            this.$nextTick(() => {
                myChart.resize();
            })
        },
        huizhi() {
            chartDom = document.getElementById('chart');
            myChart = echarts.init(chartDom);
            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ],
                toolbox: {
                    show: true,  //show为显示工具栏
                    feature: { //feature里面放的是工具栏元素
                        dataZoom: {  // 控制图表的区域放大  需要鼠标拖拽  
                            yAxisIndex: "none"  // yAxisIndex  代表横向放大
                            //xAxisIndex: "none" // xAxisIndex  代表纵向放大
                        },
                        dataView: { // dataView 
                            readOnly: false  // readOnly为是否为不可编辑只读状态  true为只读   false为可编辑
                        },
                        magicType: { //magicType 为动态类型切换 
                            type: ["line", "bar"]   //type为需要切换的类型集合
                        },
                        restore: {},  // restore为还原按钮
                        saveAsImage: {}  // saveAsImage下载图片
                    }
                },
            };
            myChart.setOption(option);
        }
    }
}
</script>