uCharts 入门问题总结

运行环境：微信小程序 & Taro开发

1. 开启canvas2d

不开启2d，canvas层级过高，会覆盖页面中的popup，modal...

<Canvas type="2d"></Canvas>

开启canvas 2d后，支持同层渲染，但是需要处理设备像素与物理像素canvas大小问题，不然绘制会很糊

// 如果在组件中，Taro.createSelectorQuery()一定要在函数组件中使用
Taro.createSelectorQuery()
  .select(`#${CanvasId}`)
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    const dpr = Taro.getSystemInfoSync().pixelRatio;

    // res中的width,height是css像素单位
    // 下面求画布真实的物理像素
    const w = (canvas.width = res[0].width * dpr);
    const h = (canvas.height = res[0].height * dpr);
    const context = canvas.getContext('2d');

    uChartsInstance[CanvasId] = new uCharts({
      canvas2d: true,
      context,
      pixelRatio: dpr,
      width: w,
      height: h,
      // ...其他配置
    });
  }

2. 开启滚动

解决图表数据太多展示不全，x轴刻度重叠问题

<Canvas
  type="2d"
  id={CanvasId}
  disableScroll={false}
  onTouchStart={onTouchStart}
  onTouchMove={onTouchMove}
  onTouchEnd={onTouchEnd}
></Canvas>

const onTouchStart = (e: CanvasTouchEvent) => {
  uChartsInstance[e.target.id].scrollStart(e);
};
const onTouchMove = (e: CanvasTouchEvent) => {
  uChartsInstance[e.target.id].scroll(e);
};
const onTouchEnd = (e: CanvasTouchEvent) => {
  uChartsInstance[e.target.id].scrollEnd(e);
};

uChartsInstance[CanvasId] = new uCharts({
  // 开启滚动条，X轴配置里需要配置itemCount单屏幕数据点数量
  enableScroll: true,
  scrollPosition: 'left',
  // 开启滚动，解决Y轴左右两侧黑色边框问题
  background: '#FFFFFF',
  xAxis: {
    itemCount: 8,
    scrollShow: categories.length > 8, // 满足一定条件显示滚动条
    scrollAlign: 'left',
    scrollBackgroundColor: '#F7F7FF',
    scrollColor: '#DEE7F7',

    // 开启了一定要配置rotateAngle
    rotateLabel: true,
    rotateAngle: 30,
    fontSize: 8,
  }
});

3. 实例更新数据

当api接口查询条件变更，比如：查询天数，图表需要更新数据

if (typeof uChartsInstance[CanvasId] !== 'undefined') {
  uChartsInstance[CanvasId].updateData({
    // 连续更新数据时，滚动条的位置，默认current，这里需要设置为left
    scrollPosition: 'left',
    // ...其他配置
  });

  // 当数据categories.length大于itemCount(满足滚动，且滚动了一定位置)，再次通过筛选条件（比如：天数），数据categories.length小于itemCount，此时不满足滚动条件，不会出现滚动条
  // 解决 updateData方法 不会自动校正滚动位置展示，上面的scrollPosition一定要配置left
  uChartsInstance[CanvasId].translate(0);
  return;
}

4. 点击图例显示提示窗ToolTip

<Canvas
  type="2d"
  id={CanvasId}
  disableScroll={false}
  onTouchEnd={onTouchEnd}
></Canvas>

// 安卓微信小程序不展示tooltip，见问题：https://www.ucharts.cn/v2/#/ask/question?id=959
// node_modules/@qiun/ucharts/u-charts.js getTouches方法，安卓手机存在 touches.clientX，需置为空
const deleteEventClientX = (e: CanvasTouchEvent) => {
  try {
    (e.changedTouches[0] as any).clientX = void 0;
  } catch (_err) {
    //
  }
};

const onTouchEnd = (e: CanvasTouchEvent) => {
  uChartsInstance[e.target.id].touchLegend(e);

  // deleteEventClientX只放在showToolTip之前执行
  deleteEventClientX(e);
  uChartsInstance[e.target.id].showToolTip(e);
};