echarts图片自适应容器宽度

下载resize-detector包。

resizeChart.js

import {debounce} from '~/common/util.js';
import {addListener, removeListener} from 'resize-detector';
export default {
    methods: {
        chartResizeBind(elRefKey, chartInstanceKey) {
            if (!this['__resizeHandler__' + elRefKey]) {
                this['__resizeHandler__' + elRefKey] = debounce(() => {
                    if (!this.$refs[elRefKey] || !this[chartInstanceKey]) {
                        return;
                    }
                    let width = this.$refs[elRefKey].offsetWidth || 0;
                    if (width <= 0) {
                        return;
                    }
                    this[chartInstanceKey].resize({width: `${width}px`});
                }, 300);
                addListener(this.$refs[elRefKey], this['__resizeHandler__' + elRefKey]);
                this.$once('hook:beforeDestroy', () => {
                    removeListener(this.$refs[elRefKey], this['__resizeHandler__' + elRefKey]);
                    this['__resizeHandler__' + elRefKey] = null;
                });
            }
        }
    }
};

通过mixins将该js混入

this.chartResizeBind('chartContainer', 'chartContainer'); // chartContainer是ref值