[echart] resize lodash 实现窗口缩放时图表自适应

<template>
    <div ref="chart" class="chart" />
</template>

import echarts from 'echarts';
import {
     debounce } from 'lodash';

echarts里面的resize() + 节流

  data() {
    
    return {
    
    	chart:null
    };
  },
  
  mounted() {
    
  	this.init();
  	
  	// lodash.debounce 防抖
    this.resizeHandler = debounce(() => {
    
      if (this.chart) {
    
        this.chart.resize();
      }
    }, 100);
    
    // 监听resize
    window.addEventListener('resize', this.resizeHandler);
  },
  
  beforeDestroy() {
    
    window.removeEventListener('resize', this.resizeHandler);
  },
  
  methods: {
    
        init() {
    
            this.chart = echarts.init(this.$refs.chart);
            const option = {
    
            	......
            };
            this.chart.setOption(option);
        },
       
       
    },

使用echarts.resize()实现窗口缩放时图表自适应