Taro 引入 echarts 组件踩坑记

应用链接：Taro 物料市场

坑点1

运行代码报错： this.pieChart.refresh isnot a function
因为节点是 ref 过来的，所以在Taro生命 didMount 的时候可能 this.pieChart 节点还没有加载进来。 有考虑过在 didShow 的时候再去 执行 this.pieChart.refresh， 但是 disShow 有时 this.pieChart 也不一定 能加载好。所以我的方案是每隔一定时间(100ms) 去检测 this.pieChart 是否加载好，如果已加载，再执行 refresh 方法,参考代码如下

componentDidShow() {
        const chartData = [
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
        ];

        let _this = this;
        let showChart = function() {
            if (_this.pieChart) {
                _this.pieChart.refresh(chartData);
                return false;
            }

            setTimeout(function() {
                showChart()
            }, 100)
        }

        showChart(_this.pieChart);
    }

坑点2

所有一切都准备好了，没有报错但是，但是就是显示图表。
查看源码，发现该区块的高度是0，啊，原来是有的，但只是高度是0，不显示，怎么整勒？我也是从内到外每个view 每个 标签，通过 css 文件和内联添加高度，还是不显示。最后却把 ec-canvas.wxss 的height 属性删了，居然显示了！！！！，奇怪不已。但是这种方式的话 需要最外层给 canvas标签写一个高度才能显示， 不科学呀，首先是不灵活，而且 如果我有多个图表，不可能每个图表都一样的高度吧。 所以… 继续吧…
经过多次尝试，后来终于发现了问题所在。我的chart 组件包着的外层view，我只给了min-height属性，没有写 height 属性。如下

.chart-view {
  min-height: 100vh;
  width: 100%;
}

不显示，我加了 height 属性，显示了。如下

.chart-view {
  min-height: 100vh;
  height: 500px;
  width: 100%;
}

嗯。 挺奇怪的。
所以我的猜想，应该是最开始我的 .chart-view 这个节点还没有得知我的屏幕高度，canvas 画布就开始绘制了，而且canvas画布默认高度就是0，所以就没显示。后来我再设置如下,不设置 height 属性， min-height 给定实际高度 1000px

.chart-view {
  min-height: 1000px;
  width: 100%;
}

还是不显示，到此，我就不晓得什么原因了，先这样用着吧。

坑点3

就是代码打包超过2M的问题。
虽然项目的代码比较庞大，之前拆分成了许多的子包，但是，主包还是太大，超过了 2M，于是我大胆的决定，不要把 echars 组件放在组件包，单独放。结果，Nice ,图表完美显示。
总感觉，写代码的路上，我是不幸运的那一个，不过说实在，我可能比较擅长机电类，不太适合计算机类。哎， 为了生活，还得继续…
如果你也碰到我同样的问题，欢迎探讨指教。QQ:379382995
… 就这样吧。下班。