项目需求是这样的,用户能够自定选择echart 曲线图 是横向仍是竖向显示。个人作法是 写了一个横向的echart图表,也写了一个竖向的echart图表,而后二者共用存在store里的图表数据,就能实现切换显示了。dom
实际项目中发现的问题是若是用v-show 切换两个图表,后来显示的会由于没有高度 而没有办法撑开。函数
解决办法 换成v-if,由于v-if从新改了dom,因此图表能够从新获取高度从而从新渲染图表,实现图表的切换, 可是切换后的图表 没有数据了。spa
解决办法 用v-if切换图表,而且在updated 钩子函数中再给store的里面的来从新赋予数值。code
代码以下:template中blog
<div> <el-button type='primary' @click="testIf=!testIf">test</el-button> </div> <div class="testLeft" v-if="testIf"> <vertical-chart :style="{width:'300px',height:'400px'}"></vertical-chart> </div> <div class="testLeft" v-else> <line-chart :style="{width:'400px',height:'300px'}"></line-chart> </div>
在 script中ip
updated(){ //更改store里的数值 }