基于VUE的echart图表⾃适应窗⼝⼤⼩变化插件开发
1. 需求
在PC端开发含图表展⽰的页⾯时，需要考虑⽤户调整浏览器窗⼝⼤⼩后图表能够根据窗⼝⼤⼩⾃适应变化。
2. 常规做法
在含有图表组件mounted的钩⼦中增加监听window的resize事件，具体如下代码所⽰：
<template>
<div>
<div id="chart-container"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import options from "..."
export default {
data(){
return {}
},
mounted(){
let self = this
window.addEventListener("resize",function(){
})
}
}
</script>
<style>
#chart-container{
width: 100%;
height: 100%;
}
</style>
复制代码
然⽽上述代码却存在内存泄漏的风险：组件被注销时，缩放函数是匿名函数，且仍然在事件监听列表中，因此匿名函数和匿名函数中⽤到的外部变量在组件注销后均不会被清理。改进⽅案如下：
<template>
<div>
<div id="chart-container"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import options from "..."
export default {
data(){
return {}
},
mounted(){
window.addEventListener("resize",sizeHandle)
},
methods:{
resizeHandle(){
}
},
destroyed(){
}
}
</script>
<style>
#chart-container{
width: 100%;
height: 100%;
}
</style>
复制代码
上述代码总算解决了内存泄漏的风险，但是代码⽐较冗余。 在图表较少时上述⽅案是可⾏的，当项⽬中图表数量较多时，代码便会⼗分冗余，如果忘了在destroyed中的清理⼯作还会造成内存泄漏的风险。
3. 解决⽅案
图表随窗⼝⼤⼩⾃适应调整算是图表组件的⼀个通⽤功能，且与具体的图表业务⽆关，且其逻辑与组件的⽣命周期精密相关，因此想着将其封装成⼀个插件，插件代码如下：
/**
* 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 InstanceByDom(el);
if(!chart){
return;
}
}
window.addEventListener("resize",el[HANDLER])
}
function unbind(el){
delete el[HANDLER];
}
var directive = {
bind: bind,
unbind: unbind
};
const onEchartResize=Vue.directive("onEchartResize",directive)
export {onEchartResize};
复制代码
代码中主要⽤到vue⾃定义指令提供的bind和unbind钩⼦函数，代码逻辑⽐较简单，这⾥就不详细解释了。
使⽤上述插件，前⾯的图表组件可写成如下⽅式：
<template>
<div>
<div id="chart-container"  v-on-echart-resize></div>
</div>
</template>
<script>
import echarts from 'echarts'
import options from "..."
export default {
data(){
resizebyreturn {}
},
mounted(){
}
}
</script>
<style>
#chart-container{
width: 100%;
height: 100%;
}
</style>
复制代码
使⽤该插件的优点：
①具体业务组件中不需要处理图表缩放功能，代码量较少；
②不⽤担⼼组件销毁时忘记清理资源
在移动端图表项⽬中⼿机横屏和竖屏切换时可能也存在类似需求，只需将指令中监听的resize事件改为orientationchange事件即可复⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。