/*
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-10-31 11:02:28
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-10-31 11:02:55
|
* @FilePath: \srs-police-affairs\src\components\echarts\mixins\chart-resize.js
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
*/
|
|
// 是一个监听元素大小改变的插件，除了窗口的大小改变会引起变形之外，echart实例的父元素大小改变也会使其变形，所以我们还要对其父元素大小改变进行监听，做到完全的自适应。
|
import ResizeListener from 'element-resize-detector'
|
|
export default {
|
methods: {
|
/* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
|
chartEleResizeListener () {
|
const chartInstance = ResizeListener({
|
strategy: 'scroll',
|
callOnAdd: true
|
})
|
chartInstance.listenTo(this.$el, () => {
|
if (!this.chart) return
|
this.chart.resize()
|
})
|
},
|
|
/* 当窗口缩放时，echart动态调整自身大小 */
|
windowResizeListener () {
|
if (!this.chart) return
|
this.chart.resize()
|
}
|
},
|
mounted () {
|
window.addEventListener('resize', this.windowResizeListener)
|
this.chartEleResizeListener()
|
},
|
beforeDestroy () {
|
window.removeEventListener('resize', this.windowResizeListener)
|
}
|
}
|
