在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><div slot="footer"><el-button @click="open = false">关闭</el-button></div>
</el-dialog>// 记得import echarts
import echarts from 'echarts'
methods: {initCharts() {this.chart = echarts.init(this.$refs.my-echarts)this.chart.setOption({...})}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！