el-tab-pane切换导致echarts显示不正常,原因是因为el-tab-pane用的是v-if导致的,下面是解决方案!
1、html代码
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="检查量" name="first"> <div class="echarts" :style="{ width: echartsW }" ref="mutualChart"></div> </el-tab-pane> <el-tab-pane label="阅读量" name="second"> <div class="echarts" :style="{ width: echartsW }" ref="qualityChart"></div> </el-tab-pane> </el-tab>
2、js代码
export default { data() { return { activeName: "first", echartsW: "" } }, created() { this.echartsW = document.body.offsetWidth - 680 + "px"; }, methods: { mutualChart() { if (this.$refs.mutualChart) { //先判断一下是否存在,不然容易报错 let myChart = this.$echarts.init(this.$refs.mutualChart); let option = {...} //其他流程一样 } }, qualityChart(){ if (this.$refs.qualityChart) { //先判断一下是否存在,不然容易报错 let myChart = this.$echarts.init(this.$refs.qualityChart); let option = {...} //其他流程一样 } } }
这样应该就可以了!
百度echarts做一个雷达图(根据不同分数值显示不同颜色)
上面是“vuejs中el-tab-pane切换导致echarts显示不正常解决方案”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_1774.html
workflows工作流
斗鸡场威武雄鸡ComfyUI工作流
一只被水晶包围的小动物ComfyUI工作流
懂王特朗普3d漫画ComfyUI工作流
一棵白色心形流苏树comfyui工作流
晚上樱花狐狸ComfyUI工作流
一个外国人在吹奏萨克斯ComfyUI工作流
池塘边的大熊猫ComfyUI工作流
森林里坐着一个外星人ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!