关于Echarts的偏移

Question

我大概知道为什么了，Echart是自适应宽度的，当点击侧边栏的时候，盒子要过些时间才能偏移，盒子宽度不变，Echart自然也不会resize，好，出院！

简单写一个侧边栏，点击左侧，margin-left：0，但是Echarts所在的盒子.main简直风雨不动安如山安，覆盖了偏移过来的.aside
之后我又发现，只要给Echarts的外层盒子加上固定宽度，正常偏移。

大致代码如下：

<template>
  <div class="echart" :class="active && 'active'">
    <div class="home-aside">
      <div @click="active = !active" class="collapse">点</div>
    </div>
    <div class="home-main">
      <div class="echartAdapt" ref="echartAdapt" style="height: 300px"></div>
      <!-- <div class="box" style="background-color: yellow">起床了</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: false,
      echart: ""
    }
  },
  watch: {
    // active () {
    //   if (this.echart) {
    //     this.echart.dispose()
    //   }
    //   this.initEchart()
    // },
  },
  methods: {
    initEchart () {
      this.echart = this.$echarts.init(this.$refs.echartAdapt);
      const echart = this.echart;
      let initOption = {
        title: {
          text: 'ECharts'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      echart.setOption(initOption)
    }
  },
  mounted () {
    this.initEchart();
  }
}
</script>

<style lang='less' scoped>
.echart {
  display: flex;
}
.collapse {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;

  margin-left: auto;
}
.home-aside {
  width: 200px;
  height: 300px;
  background-color: pink;
  margin-left: -150px;
  transition: margin 0.3s linear;
}
.active .home-aside {
  margin-left: 0;
}
.home-main {
  flex: 1;
  // width: 500px;
}
</style>

很想知道为什么，请大家指导

Answer 1

尝试调整Echarts容器的position属性或使用z-index。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。