项目中在不同的tab中都使用了echart,但是在切换tab的时候发现第二个tab没有正常显示,通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的,没有点击tab2的时候第二个echart图表的容器是 display:none,echart图标容器宽高为0,当浏览器在初始化的时候自然就会导致echart渲染错误,自然就不会正常显示
问题如下
可能出现问题之一:
可能出现问题之二:
解决方法:
1、因为echart图表2是因为没有宽高导致的,所以可以给echart2图表设置一个固定的宽高,但这样做可能会导致项目在不同大小的显示屏上展示的效果不一样,影响用户体验。不推荐使用这种方法
2、使用nextTick,解决思路:在渲染图表1的时候获取宽度,然后给图表2的宽度赋值,切换tab的时候设置nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。
关键代码如下:(完整代码在最后)
//图表1渲染函数
function render1() {
myChart1 = echart.init(document.getElementById("questionChart"))
myChart1.setOption(option1)
//获取图表1的宽度
let echartContainer = document.getElementById("echartContainer")
tabWidth2.value = echartContainer.clientWidth
window.addEventListener('resize', () => {
myChart1.resize()
})
}
//tab切换处理方法
const handleClick = (tab: TabsPaneContext, event: Event) => {
if (tab.index === 0) {
nextTick(() => {
//重新渲染图表1
myChart1.resize()
})
} else {
nextTick(() => {
//重新渲染图表2
myChart2.resize()
})
}
}
最终效果:
完整代码:
HTML:
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="提问/回答趋势" name="first">
<div ref="questionChart" id="questionChart" :style="{ height: '380px' }"></div>
</el-tab-pane>
<el-tab-pane label="AI应答率趋势" name="second">
<div ref="AIChart" id="AIChart" :style="{ width: tabWidth2 + 'px' , height: '380px' }"></div>
</el-tab-pane>
</el-tabs>
JS:
const tabWidth2 = ref(1200)
onMounted(() => {
render1()
render2()
})
//图表1渲染函数
let myChart1
function render1() {
myChart1 = echart.init(document.getElementById("questionChart"))
myChart1.setOption(option1)
//获取图表1宽度
let echartContainer = document.getElementById("echartContainer")
tabWidth2.value = echartContainer.clientWidth
window.addEventListener('resize', () => {
myChart1.resize()
})
}
let myChart2
function render2() {
myChart2 = echart.init(document.getElementById("AIChart"))
myChart2.setOption(option2)
window.addEventListener('resize', () => {
myChart2.resize()
})
}
//tab切换处理方法
const handleClick = (tab: TabsPaneContext, event: Event) => {
if (tab.index === 0) {
nextTick(() => {
//重新渲染图表1
myChart1.resize()
})
} else {
nextTick(() => {
//重新渲染图表2
myChart2.resize()
})
}
}