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

查看效果

在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
          }
        ]
      });
    }

resize 图表 原理

0 人点赞