解决vue iview UI 侧边导航折叠时,echarts图表组件不会自适应页面宽度的问题

iview UI 侧边栏折叠,echarts图表动态适应页面宽度

只能算是基本实现了,希望能帮助到有需要的人,网上搜了,也没有特别好的解决方法,也许是我太菜吧,还有就是不知道会不会导致内存问题,用在生产环境中时,请一定多多测试,若有更好的方法 ,希望能一起交流…上代码;

//main.vue

    <span  @click="collapsedSider"
            class=" inv-admin-layout-header-trigger inv-admin-layout-header-min">
            <Icon style="vertical-align: -0.145em;"
              :style="{transform: 'rotateZ(' + (isCollapsede ? '-90' : '0') + 'deg)'}" type="md-menu" size="18" />
    </span>


```javascript
<script>
 export default {
  data() {
      return {
        isCollapsede: false, //折叠
        }
    },
    methods: {
        //折叠
        collapsedSider() {
            this.isCollapsede = !this.isCollapsede;
            this.$store.commit('setCollapsede',this.isCollapsede);
      },
    }
 }
</script>

//vuex

const app = {
  state: {
    isCollapsed: false,
   },
  mutations: {
    setCollapsede (state, value) {
      state.isCollapsed = value;
    }
  }
 };
 export default app;

// 下面是图表组件 ,–可直接复制拿来用.
.只要折叠按钮触发,图表就会重绘.

<template>
  <div ref="myChart" :style="style"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        myChart: null,
        option: {}
      }
    },
    props: {
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "100%"
      },
      xAxis: {
        type: Array,
      },
      totalNum: {
        type: Array,
      },
      intactRate: {
        type: Array,
      },
      chartTitle: {
        type: String
      },
      legendArray: {
        type: Array
      }

    },
    computed: {
      style() {
        return {
          height: this.height,
          width: this.width
        };
      },
      isCollapsede() {
        return this.$store.state.app.isCollapsed;
      },
    },
    watch: {
      totalNum(val) {
        this.initChart();
      },
      isCollapsede() {
        setTimeout(() => {
          this.myChart.resize();
        }, 400)
      }
    },
    methods: {
      initChart() {
        this.myChart = echarts.getInstanceByDom(this.$refs.myChart)
        if (!this.myChart) {
          this.myChart = echarts.init(this.$refs.myChart)
        }
        this.option = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}%',
          },
          legend: {
            data: this.legendArray,
            x: "center",
            textStyle: {
              fontStyle: 'normal',
              fontSize: 12,
            }
          },
          grid: {
            left: '3%',
            right: '1%',
            top: '45',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [{
            type: 'category',
            axisPointer: {
              type: "shadow"
            },
            axisLine: {
              lineStyle: {
                color: '#009688',//x轴线宽与颜色
                width: '2'
              },
            },
            axisLabel: {
              textStyle: {
                color: '#333' //x轴字体
              }
            },
            data: this.xAxis
          }],
          yAxis: [
            {
              type: 'value',
              name: "数量",
              axisLine: {
                lineStyle: {
                  color: '#009688',//y轴左侧线宽与颜色
                  width: '2'
                },

              },
              axisLabel: {
                textStyle: {
                  color: '#333' //y轴左侧字体
                },
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#f5f5f5',//背景横线
                }
              },
            },
            {
              type: 'value',
              name: "百分比",
              min: '0',
              max: '100',
              axisLine: {
                lineStyle: {
                  color: '#009688',//y轴右侧线宽与颜色
                  width: '2'
                },

              },
              axisLabel: {
                textStyle: {
                  color: '#333' //y轴右侧字体
                },
                formatter: '{value} %'
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#f5f5f5',//背景横线
                }
              },
            },
          ],
          series: [
            {
              name: this.legendArray[0].name,
              type: "bar",
              barWidth: 37,
              showAllSymbol: true,
              smooth: true,
              symbol: 'circle',
              symbolSize: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: [2, 2, 0, 0],
                  color: '#009688',
                  label: {
                    show: true,
                    position: "top",
                  }
                }
              },
              data: this.totalNum
            },
            {
              name: this.legendArray[1].name,
              type: 'line',
              showAllSymbol: true,
              smooth: true,
              symbol: 'circle',
              symbolSize: 10,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#d87a80',
                  label: {
                    show: true,
                    position: "top",
                  }
                }
              },
              data: this.intactRate
            }

          ]
        };
        this.myChart.setOption(this.option, true);
        window.addEventListener("resize", this.myChart.resize);
        this.myChart.resize();

      },
    },
    mounted() {
      this.$nextTick(function () {
        this.initChart();
      });
    }

  }
</script>