小程序echart 动态刷新数据

先看官方实例代码:

import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    color: ['#37a2da', '#32c5e9', '#67e0e3'],
  
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      console.log(chart)
    }, 2000);
  }
});

简单解释一下,这个页面首先在全局声明了一个空的chart对象,然后在页面的data里面有一个ec对象,里面有个onInit属性。
ecahrt的初始化逻辑是在页面一进来的时候如果ec对象里面有函数就会被执行。如果ec里面配置了 lazyLoad: true就需要手动触发初始化方法。
如果你没有把图表封装成组件,向上面这样写就没问题。
但是如果你有多个页面公用了这一个文件就会导致一个问题,A页面初始化之后的全局chart这个变量会被B页面重新赋值。
如果从B页面通过返回按钮回到A页面的时候,这时候你再用setOption方法更新图表的时候就不是A页面一开始初始化的那个实例了。

如果有上面我说的这种业务需求就需要使用lazyLoad的方式,手动初始化echart,改成下面这样


Component({

 // data: {
 //   ec: {
 //     onInit: initChart //这种方式就是页面加载的时候echart会检测ec对象里面的值是是否有一个初始化方法
 //   }
 // },
  data: {

    ec: {
      lazyLoad: true
    }
    ...

然后写一个手动初始化的方法,例如这样:

Component({
  properties: {
    name: {
      type: String,
      value: '默认name'
    }
  },
  data: {
    ec: {
      lazyLoad: true
    }
  },
  methods: {
    init(title) {
      let name = this.data.name
      this.chartDom = this.selectComponent('#' + name)
      let optData = {
        title
      }
      this.chartDom.init((canvas, width, height) => {
        initChart(canvas, width, height,optData)
      });
    }
  }
})

像上面每次更新数据的时候就在页面里面去出发子组件的init方法,然后把数据通过参数传进来进行更新,这样做就不怕多个页面里面的echart实例冲突了。

小程序1rpx边框在部分ios设备下显示不全

原因:当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.5*2=401,302*2=604等等都会重现这个bug
解决方案:
第一种方式是设置标签父容器的宽度到无bug值,即(奇数或奇数.5)*2,例如281*2rpx,281.5*2rpx可以解决;(有时候这个也不一定解决)
第二种方式是补充像素单位:

wxml中为有问题的标签旁边增加space的view后如下:

<view class='label-con'>
    <view class='space'></view>
    <view class='label'>a</view>
    <view class='label'>b</view>
    <view class='label'>c</view>
    <view class='label'>d</view>
</view>

wxss中增加space类为:

    .space{
        width: 1rpx;
        height: 100%;
        float: left;
    }

小程序项目采坑记录之利用try catch跟踪问题

最近忙了半年的小程序终于上线了,第一天上线就暴露出来很多问题,面对每日几万人的使用量,n种不同的终端设备,测试部门测不出来一些问题也是情有可原。
其中比较典型的一个问题就是,小程序的管理后台会报警提示我一个页面进来的参数JSON格式不正确,但是这个问题出现的几率十分不规律。1万个人里面可能也就2-3个人会出现吧。而且测试部的同事根本就不能复现出来这个bug。
因为告警只提示你摸个页面会出现JSON错误,而没有具体的Log。
困扰了很久之后,我终于想出来了一个办法,利用try chatch把报错信息捕捉到,然后把JSON对象打印到页面上面。就这样用了一个很简单的小办法就解决了这个难题,现在把这个技巧分享出来,代码如下:

 onLoad(options) {
        let that = this
        let params = {}
        let p = decodeURIComponent(options.params || '')
        try {
            params = JSON.parse(p || '{}')
        }
        catch (exception) {
            wx.showModal({
                title: '数据错误',
                content: '错误代码:' + p,
                showCancel: false,
            })
            console.log(exception)
            return
        }
        ......