踩坑：uniapp框架下app使用echarts图表白屏

今天继续说一下使用uniapp开发app遇到的坑----ecahrts直接导致手机模拟器白屏。

之前使用h5开发，然后通过hbuilderx打包成跨端app，此时的app类似h5套壳，本质上应该仍然是浏览器访问h5。这时候项目中使用的插件echarts可以非常正常的显示。
然后将echarts搬到uniapp后会发现，一边开发一边通过浏览器看，会觉得很不错，打开手机模拟器，一片空白！！！
浏览器一切正常的情况下，手机模拟器不仅白屏，而且还不知道为什么，把引入之类的全部注释，甚至是最后将依赖卸载，依旧无法解决问题！

这时候自然又是找度娘问问，后面发现不兼容，只好去插件市场安装一个专门的图表插件，
链接：https://ext.dcloud.net.cn/plugin?id=7978

下载了案例后，照猫画虎搞进项目，结果自定义图例也是浏览器生效，手机上不生效，那就暂时这样算了，接下来封装一下吧，为了后续复用。
看了案例后会发现 option整个对象放置在data中，然后setOption(option)，
按照往常web端的封装方式，一般固定的就不会想着后续传值操作，一般选择将需要改的比如：横纵坐标的值，进行操作，因此改成下面的样子：

浏览器依旧非常友好，一切正常，这时候看下手机，god，又白屏！！！
修修改改，最后发现手机只有这种情况可以正常显示，
1.使用案例中的监听方式，完整的option依旧放在data中

2.要传值的地方依旧使用 props（父传子那样），同时在changeOption方法中进行赋值，通过updateEcharts进行监听就可以正常更新视图了

3.父组件中直接在使用子组件的地方给子组件一个ref，然后通过父传子，同时在父组件调用子组件的方法来实现后续值的动态更新

这样操作就稳稳了！如果还要继续封装的话，就自己再搞吧！