用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({...})
	}
}