不知不觉，又做成了全栈。。。不过也好，理论+实践，才是最佳学习之道。
今天的问题是，VUE中使用Echarts组件绘制一个柱状图，页面在初始加载的时候被压缩
期望的结果是：
代码都是官方的，为啥就不行了呢？
我的需求是：数据呈现两种结果，一种是table，一种是柱状图，两个div都使用v-show绑定变量isShowCharts进行切换，所以有个按钮可点击切换，在切换至柱状图的时候，传入实参true。
刚开始我的写法是这样：
showCharts(v) {this.isShowCharts = vthis.initEcharts()},
结果是，不行！！！
网上大家也都有方案，但尝试后发现依然不好。
后来找专业前端的楠神帮忙调了一下，果然是楠神，几分钟就好了。
楠神给出的代码是：
showCharts(v) {this.isShowCharts = vthis.$nextTick(() => {this.initEcharts()})},mounted() {//this.initEcharts()},
去掉了mounted的加载，就这么简单的调整，OK了！
这个问题的因素呢，在于echart组件渲染的时候（mounted中），它比页面dom元素渲染的更早，以至于，它当时并不知道自己应该渲染出多少宽度，这里我给的初始值是宽度100%，为的是监听窗口变化时，以实现响应式布局。如果给固定宽度的话，是没这个问题的，因为它知道自己的宽度了，当然也不能实现响应式。
window.addEventListener('resize', () => {myChart.resize()})myChartStyle: {float: 'left', width: '100%', height: '400px'}
这个$nextTick是啥来头呢？官方给的解释是这样的，看的我半知半解
和楠神聊下来，大概就是这个意思：
这么着！！！
如果觉得《VUE Echarts组件初始加载压缩问题解析》对你有帮助，请点赞、收藏，并留下你的观点哦！
