Vue2 Echarts 切换后图标缩水问题
·
1.tabs页面
//@tab-click="handleClick"
this.$nextTick(() => {
setTimeout(() => {
if (this.activeName === 'first') {
this.$refs.all && this.$refs.all.resizeCharts()
}
},300)
})
2.overview页面
resizeCharts() {
this.$nextTick(() => {
setTimeout(() => {
const refs = [
"appDevice",
"multiroom",
"streamingServices",
"streamingApp",
"input",
"output",
"remoteControl"
]
refs.forEach(refName => {
const comp = this.$refs[refName]
comp && comp.resizeChart && comp.resizeChart()
})
}, 100)
})
}
3.Echarts 组件
//data
chart: null,
resizeHandler: null
mounted() {
this.resizeHandler = debounce(() => {
this.resizeChart()
}, 100)
window.addEventListener("resize", this.resizeHandler)
this.initChart();
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeHandler)
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
// 图表渲染最后调用方法
this.resizeChart();
// methods 方法
resizeChart() {
this.$nextTick(() => {
setTimeout(() => {
this.chart && this.chart.resize()
}, 100)
})
},
更多推荐



所有评论(0)