微信小程序使用Echarts和分包的完整步驟

前言

假期雖然結束瞭,但是它以另外一種形式展示我們身上(摸摸自己的小肚子)。在小程序上以圖形化顯示數據就是分給我的假期預研任務,查瞭一下網上大佬們的文章瞭解到瞭Ucharts,F2,Wx-charts和Echarts,隻嘗試瞭F2和Echarts,由於Echarts的最近更新最近和我對Echarts更為熟悉,所以我選擇瞭Echarts,F2也試瞭下,雖然弄出來瞭,但是我不是太熟悉所以就放棄瞭。

進入正題

首先我是看到別人的文章寫Echarts的,給瞭官網的傳送門,然後就去官網順著看瞭,比較簡單,這裡我也給個傳送門吧。大體上的步驟

1、下載官網例子。

2、把官網例子中的ec-canvas文件夾復制到項目目錄中。

3、在具體的頁面中像使用組件一樣引入ec-canvas。

4、在具體的頁面的js中進行初始化。

在下載完官網例子後,找到ec-canvas文件夾,裡面有echarts.js,wx-canvas.js還有ec-canvas四件套。然後把這個文件夾復制到自己項目的目錄下,一開始我是放到utils下的,後來分包之後就放別的地方,這裡就當放在utils下瞭。然後項目就大瞭700+KiB。

頁面中

xxx.json

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

xxx.wxml

<view class="container-echarts margin-top-10">
 <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

xxx.js 首先要引入echarts然後才能用下面的initChart方法,所以根據放置的ec-canvas的路徑引入echarts。

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根據放置的ec-canvas的路徑引入echarts
let chart = null // 用一個變量保存echarts的初始化
let options = { // 圖形配置,用過echarts的人都知道是嘛意思~ 這裡給出官網線圖的基礎例子
 xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
  type: 'value'
 },
 series: [{
  data: [150, 230, 224, 218, 135, 147, 260],
  type: 'line'
 }]
} 
function initChart(canvas, width, height, dpr) { // 這裡的canvas,width,height,dpr都可以不用管
 const chart = echarts.init(canvas, null, {
 width: width,
 height: height,
 devicePixelRatio: dpr // 像素
 });
 canvas.setChart(chart);
 chart.setOption(options);
 return chart;
}

Page({
 data: {
 ec: {
  onInit: initChart // 這裡不要加括號哦!
 }
 }
});

保存運行,到這一步理論上echarts已經可以顯示瞭,實際怎麼樣還要自己調試的。

用一個chart變量保存echarts的初始化,官網上把options也寫在方法裡,我給拿出來瞭。那chart有什麼用呢?因為大部分的數據都是異步獲取的,所以要動態渲染echarts。當拿到數據後,這個chart就用上瞭。

chart.setOption({
 xAxis: {
 data: newData.map(item => {
  return item[0];
 })
 },
 series: {
 data: newData.map(item => {
  return item[1];
 })
 }
})

這裡關於data的數據格式,看每個人的options裡面要渲染的是什麼圖吧。我這裡用的是官網給的這個例子傳送門,echarts的數據更新可以直接用setOption。

在開發者工具中的放大縮小滾動沒有用,但是上傳到體驗版上後在手機上是好的。微信對canvas有type=”2d”,在ec-canvas中想要使用type=”2d”的話,要改動ec-canvas.js

data: {
 isUseNewCanvas: true // 這裡改成true, 默認是false
}

因為:isUseNewCanvas默認是false,是舊版的canvas。

<!-- 新的:接口對其瞭H5 -->
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
<!-- 舊的 -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

echarts.js體積大的問題,上傳項目2MiB限制問題

就下載的ec-canvas裡面的echarts.js有幾百KiB,相對於2MiB的來說挺大的,當我上傳項目的時候提示我超出限制,那能想到的就是減小echarts.js的體積和分包兩個能即時見效的方法瞭。

echarts.js體積大的問題

在echarts的官網有按需構建的方法(傳送門—在線定制),進入下面的在線定制,選擇自己需要圖,我就選瞭折線圖,坐標系選瞭直角坐標系,組件裡除瞭刷選,工具欄和自定義圖形外別的都選瞭,其它選項把svg也勾上瞭,然後點擊下載進入building頁面,這裡等它構建完成會自動下載一個echarts.min.js文件,大小最後少瞭200來KiB。然後把它重命名成echarts.js替換進ec-canvas裡。

上傳項目2MiB限制問題

echarts.js的體積減少瞭,但是上傳的限制問題還在,那就是分包瞭。

在app.json裡面,有一個subpackages

{
 "subPackages": [
 {
  "root": "xxx/xxx",
  "name": "xxx",
  "independent": false,
  "pages": [
  "pages/xxx",
  "pages/xxx",
  "pages/xxx"
  ]
 },
 {
  "root": "baoziTask/",
  "name": "baozi",
  "pages": [
  "pages/roubaozi/roubaozi"
  ]
 }
 ],
}

這個分包在官網上講的挺簡單的,但是在我使用時是這樣理解的。

root是要分包的路徑,我是放到根目錄的。那麼baoziTask下的所有文件都會被認為是一個包。那不在這個baoziTask路徑下的文件都會被打包進app這個主包內。

name就是分包的別名,預下載的時候會用,這個預下載就當在某個頁面的時候,想主動下載這個可能被使用的分包,以提高訪問速度。比如當我進入某個頁面的時候,很大可能會點擊某處跳轉到某個分包裡面,這個時候可以預下載這個分包,而不用跳轉的時候才下載這個分包。

independent是分包是否獨立,但是我沒用過就沒有直觀的感覺。說是可以單獨運行,不依賴app這個主包。這個需要配置,不是代碼的下載,配置preloadRule,具體的話得看官網和自己嘗試瞭。傳送門—分包預下載

pages就更好理解瞭啊,就是包內的頁面唄。

想要跳轉到這些分包內的頁面的時候給跳轉的url寫對路徑就可以瞭,就比如跳轉到roubaozi的時候url寫⬇️面這樣:

url: '/baoziTask/pages/roubaozi/roubaozi'

那怎麼查看分包成功呢?

在開發者工具右上角有一個詳情按鈕,點擊查看詳情側滑框,可以看到”本地代碼”這一行,後面的大小可以點擊,點擊後可以看到主包和各個分包的大小。看到主包沒有超過2MiB的話,那就可以上傳成功瞭!

群眾:為什麼你要在KB和MB中間加個 i ?小傲嬌:因為要準確表達是1024

總結

到此這篇關於微信小程序使用Echarts和分包的文章就介紹到這瞭,更多相關微信小程序Echarts和分包內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: