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

下載說明

圖片來源 echarts-for-weixin 文檔.png

引入組件說明

圖片來源 echarts-for-weixin 文檔.png

導(dǎo)入組件

{
  "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工具類

使用

在實際項目中可根據(jù)自身需求決定使用初始化echart方式

圖片來源 echarts-for-weixin 文檔.png

使用問題小計

1、組件使用 hidden 后， echact 不顯示
解決思路： setData() 成功后， 通過懶加載初始化 echact

        /** `setData` 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層
         *（異步），同時改變對應(yīng)的 `this.data` 的值（同步）。
         *
         * **注意：**
         *
         * 1. **直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致**。
         * 1. 僅支持設(shè)置可 JSON 化的數(shù)據(jù)。
         * 1. 單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。
         * 1. 請不要把 data 中任何一項的 value 設(shè)為 `undefined` ，否則這一項將不被設(shè)置并可能遺留一些潛在問題。
         */
        setData(
            /** 這次要改變的數(shù)據(jù)
             *
             * 以 `key: value` 的形式表示，將 `this.data` 中的 `key` 對應(yīng)的值改變成 `value`。
             *
             * 其中 `key` 可以以數(shù)據(jù)路徑的形式給出，支持改變數(shù)組中的某一項或?qū)ο蟮哪硞€屬性，如 `array[2].message`，`a.b.c.d`，并且不需要在 this.data 中預(yù)先定義。
             */
            data: Partial<D> & IAnyObject,
            /** setData引起的界面更新渲染完畢后的回調(diào)函數(shù)，最低基礎(chǔ)庫： `1.5.0` */
            callback?: () => void
        ): void

2、force-use-old-canvas 在微信新的基礎(chǔ)中不用使用，使用后真機不顯示echact圖標內(nèi)容

force-use-old-canvas="true"