前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element NavMenu 左侧菜单展开折叠Echart图表自适应父级Div

Element NavMenu 左侧菜单展开折叠Echart图表自适应父级Div

作者头像
tianyawhl
发布2020-03-17 18:22:43
2.2K0
发布2020-03-17 18:22:43
举报
文章被收录于专栏:前端之攻略前端之攻略

查看效果

在NavMenu菜单切换展开折叠的时候,Div 是自适应的,但是如果页面含有Echart图表,需要特殊处理才能只适应父级Div的大小

主要原理是监听当前状态是展开还是折叠,对Echart 图表执行resize方法。

主要代码

代码语言:javascript
复制
<el-header style="background:#3c8dbc;">
   <i class="fa fa-bars collapseBtn" @click="handleCollapseClick"></i>
</el-header>
代码语言:javascript
复制
  data() {
    return {
      isCollapse: false,
      myChart:null
    }
  }
代码语言:javascript
复制
    handleCollapseClick() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.asideWidth == "230px" ? "66px" : "230px";
    },
代码语言:javascript
复制
  // 监听左侧是否显示
    watch:{
      isCollapse(newValue){
        //alert(newValue)        
        setTimeout(() => {
          this.myChart.resize()
        }, 50);
      }
    },

  mounted() {
    this.drawLine()
    this.containerHeight = window.innerHeight + "px";
    let _this = this
    $(window).resize(function() {
      $("#con").height($(window).height() - 2);
      _this.myChart.resize()
    });
    
  }
代码语言:javascript
复制
    // 画图表
    drawLine() {     
      this.chartData = [500, 2000, 3600, 10000, 1000, 2000];
      this.myChart = this.$echarts.init(
        document.getElementById("chart"),"shine");
      this.myChart.setOption({
        //color:["green"],
        title: {
          text: "在VUE中使用Echarts1111"
          // textAlign: "left",
          // left: "center"
        },
        grid: {
          left: 10,
          right:10,
          containLabel:true
        },
        tooltip: {},

        xAxis: {
          data: ["AA", "B", "C", "D", "E", "F"]
        },
        yAxis: {
          max: this.max
        },
        series: [
          {
            name: "销量",
            type: "bar",
            barMaxWidth: 30,
            data: this.chartData
          }
        ]
      });
    }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档