vue项目实现echarts图表最大化显示功能

最新推荐文章于 2024-07-23 17:42:36 发布

九号窗口

最新推荐文章于 2024-07-23 17:42:36 发布

阅读量2.2k

点赞数 1

分类专栏：总结 vue PC 文章标签：最大化显示全屏 vue elementUI echarts

本文链接：https://blog.csdn.net/weixin_43734732/article/details/106858401

版权

总结同时被 3 个专栏收录

78 篇文章 1 订阅

订阅专栏

vue

47 篇文章 3 订阅

订阅专栏

34 篇文章 1 订阅

订阅专栏

由于echart工具栏没有提供最大化功能，只好使用elementUI的el-dialog自己写一个类似的功能，效果如下
在这里插入图片描述

貌似这个放大效果作用不大（-_-||）下面放代码吧

结构部分

      <div class="picItem boxShardow">
        <div class="header">
          <span>功率曲线</span>
          <i class="el-icon-rank" @click="fullSc('功率曲线')" style=" font-size: 22px; float: right; margin: 11px 17px 0px 0px; transform: rotate(45deg); color:#777; cursor: pointer;"></i>
        </div>
        <div id="chart-part1" ref="powerChart" style="width:96%;height:300px;"></div>
      </div>

    <el-dialog :title='chartTitle' :visible.sync="dialogVisible" width="80%">
          <div id="chart-part" ref="fullChart" style="width:100%; height:420px;"></div>
    </el-dialog>

点击事件

    fullSc(title){

    this.chartTitle = title
    this.dialogVisible = true
    this.$nextTick(() => {
           const chartFul = this.$refs.fullChart;


           if(chartFul){
             
           const fullChart = this.$echarts.init(
             document.getElementById("chart-part")
           );
           fullChart.clear();
           var optionFll = this.option
           fullChart.setOption(optionFll);
           window.addEventListener("resize", function() {
             fullChart.resize();
           });    
           }
    });



    },