项目场景:
- 如何在 vue 中使用 window.onresize
- 如何避免 覆盖其它的 window.onresize
- 手动触发 window.onresize
- echarts 监听图表容器的大小并改变图表大小
- 使用vue-resize 监听图表容器的大小并改变图表大小
div resize 解决方案:
绝大多数据场景下我们只是希望echarts感知外层包裹的resize事件而改变大小
但div并没有resize事件,我们需要借助插件完成该功能
插件 vue-resize
//安装
npm install --save vue-resize
// 引入 vue-resize
import ‘vue-resize/dist/vue-resize.css’
import VueResize from ‘vue-resize’
Vue.use(VueResize)
/**
* echarts + vue-resize
*/
<template>
<!-- 父容器的position为static以外的值,如relative-->
<div class="w" style="position: relative;">
<!-- vue-resize 放在容器根下与echarts 绘制区同级-->
<resize-observer @notify="handleResize" />
<!-- echarts 绘制区 -->
<div ref="canvas" class="canvas" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
myChart: {},
srcData: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
},
mounted() {
this.myChart = this.$echarts.init(this.$refs.canvas)
this.init()
this.draw(this.srcData)
},
methods: {
// echarts 初始化样式
init() {
var option = {
dataset: {
source: []
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
this.myChart.setOption(option)
},
// 绘制图表数据
draw(val) {
this.myChart.setOption({
dataset: {
source: val
}
})
},
handleResize() {
this.myChart && this.myChart.resize()
}
}
}
</script>
<style lang="less" scoped>
</style>
window.onresize解决方案:
<script>
/* echarts 监听图表容器的大小并改变图表大小 */
export default {
mounted() {
this.myChart = this.$echarts.init(this.$refs.canvas)
// 监听 window.onresize
window.addEventListener('resize', this.resize, false)
},
// 注销 window.onresize
beforeDestroy() {
window.removeEventListener('resize', this.resize)
},
methods: {
resize() {
this.myChart.resize()
},
// 手动触发window.onresize
dispatchResize(){
try {
var ev = document.createEvent('Event');
ev.initEvent('resize', true, true);
window.dispatchEvent(ev)
} catch (e) {}
}
}
}
</script>
错误分析
常见的错误代码 1
<script>
export default {
mounted() {
// 窗口自适应,关键代码
window.onresize = () => {
this.$refs.chart1.resize()
}
},
// 注销window.onresize事件
destroyed() {
window.onresize = null
}
}
</script>
- 会覆盖其它的 window.onresize,导致页面中只有一个window.onresize生效.
- 不要在
destroyed
中注销,容易引起不必要的麻烦.请使用beforeDestroy
<script> export default { beforeDestroy() { // 输出结果: {canvas: div.canvas} console.log('beforeDestroy', this.$refs) }, destroyed() { // 输出结果: {canvas: div.undefined} console.log('destroyed', this.$refs) } } </script>
常见的错误代码 2
<script>
window.addEventListener('resize', this.resize(), false)
</script>
抄作业都没抄明白的代码
window.addEventListener 第二个参数接收了this.resize()执行结果
,而不是一个function
常见的错误代码 3
<script>
window.addEventListener('resize', () => {
this.resize()
})
</script>
匿名函数你怎么销毁?