以下chart是在正常页面中（不在蒙层中）：
用echart组件时，渲染数据多数情况下会是动态添加，也就是前台获取数据，通过props传递给echart组件。对于vue生命周期函数执行顺序不熟悉的小伙伴儿，会碰到数据渲染失败的问题，原因如下：
下边是父组件father, 引入了子组件son, 来看下执行顺序：
<!-- father -->
<template><div class="f"><son></son></div>
</template>
<script>
import son from './home_son'
export default {name: 'home',components: { son },created() {console.log('father - created')this.$axios.get('http://localhost:3000').then(res => {console.log('res', res)})},mounted() {console.log('father - mounted')}
}
</script><!-- son-->
<template><div><h1>son</h1></div>
</template>
<script>
export default {name:'homeSon',created() {console.log('son- created')},mounted() {console.log('son - mounted')}
}
</script>执行顺序：
父组件 created先执行，但是紧接着子组件 created - mounted执行了，最后是后台返回的数据，所以，你想把后台数据渲染到页面，结果令人失望！
解决方法：
在echart组件中，用watch去监听父级传来的属性，只有在新的值newval传过来才可以初始化chart：
<template><div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
export default {props: {xAxisdata: {type: Array,default() {return ['虹口店']}}},watch: {xAxisdata: {handler(newval, oldval) {if(newval) {this.initChart()}return newval},deep: true}},methods: {initChart() {this.chart = echarts.init(this.$el, 'macarons')// 绘制图表this.chart.setOption({ // ··· ···})}}
}
</script>以下chart是在蒙层中：
以element Dialog 对话框为例，chart图表组件作为子组件被引用，组件标签在蒙层中，显示蒙层时chart组件渲染不显示时有发生，具体原因因为 Dialog 对话框：
element文档：
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
所以，chart图标嵌套在Dialog 中被打开之前是不会渲染的，但是我们通过ref来获取到chart组件的话，需要在open事件回调中来获取：
</template></div> <!-- 蒙层 --><el-dialog :visible.sync="dialogVisible" title="详情" width="70%" @open="openFn"><!--如果加上v-if，图表会不断的销毁与创建--><bar-chart v-if="dialogVisible" ref="bchart" :x-axisdata="chart.xAxisdata" seriesname="总销量" :seriesdata="chart.seriesdata" /></el-dialog></div>
</template>
<script>
export default {
// ···methods: {openFn() {this.$nextTick(() => {this.$refs.bchart.initChart() // 获取到组件 执行初始化方法，此时在chart组件中就不需要执行初始化工作了，在这里执行即可！})}}
}
</script>
