echarts 的自适应 全局封装

/**
 * echarts 图表自适应窗口大小变化的指令
 * useage:  ①main函数中引入：import '@/directive/echartResizeHelper.js'
 *          ②echarts容器上使用指令 <div id="chart-container" v-on-echart-resize></div>        
 */
import echarts from 'echarts'
import Vue from 'vue';

export var version = '0.0.1';
var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
  Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}
let HANDLER = "_vue_echarts_resize_handler"

function bind(el, binding){
    unbind(el);        
    el[HANDLER]=function(){
        let chart=echarts.getInstanceByDom(el);
        if(!chart){
            return;
        }
        chart.resize();
    }
    window.addEventListener("resize",el[HANDLER])
}
function unbind(el){
    window.removeEventListener("resize",el[HANDLER]);
    delete el[HANDLER];
}
var directive = {
  bind: bind,
  unbind: unbind
};
const onEchartResize=Vue.directive("onEchartResize",directive)
export {onEchartResize};

 

 

 

 

使用+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<template>
  <div id="myChart" v-on-echart-resize></div>
</template>