TypeScript 使用 echart 小结

可使用封装好的 echarts-for-weixin

下载说明

图片来源 echarts-for-weixin 文档.png

引入组件说明

图片来源 echarts-for-weixin 文档.png

导入组件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

ts/js 引入 echarts

import * as echarts from "../../../../../utils/lib/ec-canvas/echarts"; //引入外部的js工具类

ts 文件引入会报找不到文件, 使用 //@ts-ignore 屏蔽ts检查

//@ts-ignore 
import * as echarts from "../../../../../utils/lib/ec-canvas/echarts"; //引入外部的js工具类

使用

在实际项目中可根据自身需求决定使用初始化echart方式

图片来源 echarts-for-weixin 文档.png

使用问题小计

1、组件使用 hidden 后， echact 不显示
解决思路： setData() 成功后， 通过懒加载初始化 echact

        /** `setData` 函数用于将数据从逻辑层发送到视图层
         *（异步），同时改变对应的 `this.data` 的值（同步）。
         *
         * **注意：**
         *
         * 1. **直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致**。
         * 1. 仅支持设置可 JSON 化的数据。
         * 1. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
         * 1. 请不要把 data 中任何一项的 value 设为 `undefined` ，否则这一项将不被设置并可能遗留一些潜在问题。
         */
        setData(
            /** 这次要改变的数据
             *
             * 以 `key: value` 的形式表示，将 `this.data` 中的 `key` 对应的值改变成 `value`。
             *
             * 其中 `key` 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 `array[2].message`，`a.b.c.d`，并且不需要在 this.data 中预先定义。
             */
            data: Partial<D> & IAnyObject,
            /** setData引起的界面更新渲染完毕后的回调函数，最低基础库： `1.5.0` */
            callback?: () => void
        ): void

2、force-use-old-canvas 在微信新的基础中不用使用，使用后真机不显示echact图标内容

force-use-old-canvas="true"