ECharts图的适配
一、如果页面没有侧边栏的展开和折叠
- mounted钩子函数中,对窗口大小变化的事件进行监听
destroyed钩子函数中,组件销毁取消事件监听 - 调用echarts提供的API resize方法
mounted() {
...
window.addEventListener('resize', this.screenAdapter)
},
destroyed() {
...
window.removeEventListener('resize', this.screenAdapter)
},
screenAdapter() {
//标题一类或者宽高一类的大小需要做修改的可以在这里处理,不需要的可以删除
------------------------------------------------------------
const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
// 和分辨率大小相关的配置项
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize
}
},
tooltip: {
axisPointer: {
lineStyle: {
width: titleFontSize
}
}
},
series: [
{
barwidth: titleFontSize,
itemStyle: {
barBorderRadius: [0,titleFontSize / 2,titleFontSize / 2,0]
}
}
]
}
this.chartsInstance.setOption(adapterOption)
----------------------------------------------------------------
// 手动调用图表对象的resize才能产生效果
this.chartsInstance.resize()
}
二、如果页面有侧边栏的展开和折叠
由于侧边栏的展开和折叠不会触发浏览器的resize方法,这里引入了第三方插件
//main.js文件引入
import ElementResizeDetectorMaker from 'element-resize-detector'
Vue.prototype.$erd = ElementResizeDetectorMaker()
//组件中使用
mounted() {
...
this.$erd.listenTo(this.$refs.seller_ref,() => {//this.$refs.seller_ref 代表dom容器
this.$nextTick(()=> {
this.chartsInstance.resize()
})
})
},