【vue】+【Echarts】+【element-resize-detector】通过自定义指令实现图表自适应

常见做法

通常情况下，如果需要图表随浏览器窗口大小自适应，可以在 mounted 里面增加监听，在 beforeDestroy 里面取消监听，代码如下

mounted() {
	window.addEventListener('resize', this.screenAdapter())
},
beforeDestroy() {
    window.removeEventListener('resize', this.screenAdapter())
},
methods: {
	screenAdapter() {
		this.chart.resize()
    }
}

原因描述

当时遇到的场景是，当页面左侧菜单支持展开收缩的时候，发现右侧页面的上的 Echarts 图表并没有进行自适应缩放。原因也很简单，当时组件内做的监听是浏览器窗口大小发生变化时，可以触发 Echarts 自带的 resize 方法，但是当菜单收缩展开时，浏览器大小没有变化，自然也就触发不了 resize 方法。

自定义指令解决

1. 引入 element-resize-detector
   npm i element-resize-detector --save
2. 在 directive 文件夹下加 chartResize.js，内容如下

const echarts = require('echarts')
import Vue from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector'

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
  )
}
const HANDLER = '_vue_echarts_resize_handler'

function bind(el) {
  unbind(el)
  el[HANDLER] = function () {
    const chart = echarts.getInstanceByDom(el)
    if (!chart) {
      return
    }
    chart.resize()
  }
  // 监听绑定的div大小变化，更新echarts大小
  elementResizeDetectorMaker().listenTo(el, el[HANDLER])
}
function unbind(el) {
  elementResizeDetectorMaker().removeListener(el, el[HANDLER])
  delete el[HANDLER]
}
var directive = {
  bind,
  unbind
}
Vue.directive('on-echart-resize', directive)

3. 记得在 main.js 全局引用或者需要使用该指令的文件里面引用上述文件
4. 在渲染 Echarts 的初始化容器元素上绑定 v-on-echart-resize 指令即可