在dialog中使用echarts不显示,或显示不全的问题

vue中做的echarts组件图表在el-dialog中第二次的显示不全问题，以及正常在dialog中使用echarts不显示问题
用vue做的echarts组件
其他页面的el-dialog中调用echarts组件代码
问题详述
问题解决
直接在el-dialog中使用echarts
用vue做的echarts组件
<template>
<div :class=”className” :style=”{height:height,width:width}” />
</template>

import echarts from ‘echarts’

export default {
props: {
className: {
type: String,
default: ‘chart’
},
width: {
type: String,
default: ‘100%’
},
height: {
type: String,
default: ‘350px’
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.setOptions(this.chartData)
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ … })
}
}
}
其他页面的el-dialog中调用echarts组件代码
<el-dialog :visible=”open”>
<h3>测试echarts组件在el-dialog中的使用</h3>
<– echarts组件 –>
<line-chart :chart-data=”chartData” />
</el-dialog>

data区数据：
chartData: {
xAxisData: [],
seriesData: [],
title: ‘Line图表’,
name: ”
}
问题详述
当页面缓存时，正常情况下无问题，当点击打开el-dialog时显示图表。
跳转其他页面，再跳转回来时，再打开el-dialog，图表只显示一半，F12查询问题，显示为：echarts宽度为100px，而非设置的100%。

当页面不缓存时，无此问题。

问题解决
watch: {
chartData: {
deep: true,
handler(val) {
this.chartData = val;
this.initChart();
}
}
},

// 因为是组件化echarts，且在el-dialog中使用，应当每次先销毁echarts实例
// 再重新创建
initChart() {
this.$nextTick(() => {
if (this.chart) {
this.chart.dispose(); // 销毁实例
this.chart = echarts.init(this.$el)
this.setOptions(this.chartData)
} else {
this.chart = echarts.init(this.$el)
this.setOptions(this.chartData)
}
})
},
直接在el-dialog中使用echarts
直接在dialog中使用echarts，必须在dialog的opened（Dialog 打开动画结束时的回调），调用setOptions()；

否则会出现echarts报错等问题。

如下所示：

<el-dialog :visible=”open” @opened=”initChart()”>
<h3>测试原生echarts在el-dialog中的使用</h3>
<– 原生echarts –>
<div ref=”my-echarts” style=”width: 100%;height: 300px;”></div>

// 记得import echarts
import echarts from ‘echarts’
methods: {
initCharts() {
this.chart = echarts.init(this.$refs.my-echarts)
this.chart.setOption({…})
}
}
————————————————
版权声明：本文为CSDN博主「alin31」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/alin31/article/details/119826270

在dialog中使用echarts不显示,或显示不全的问题

相关文章

归档