前言
假期雖然結束了，但是它以另外一種形式展示我們身上（摸摸自己的小肚子）。在小程序上以圖形化顯示數據就是分給我的假期預研任務，查了一下網上大佬們的文章了解到了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
|
1
2
3
4
5
|
{ "usingComponents": { "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas" }} |
xxx.wxml
|
1
2
3
|
<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。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根據放置的ec-canvas的路徑引入echartslet 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就用上了。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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
|
1
2
3
|
data: { isUseNewCanvas: true // 這里改成true， 默認是false} |
因為：isUseNewCanvas默認是false，是舊版的canvas。
|
1
2
3
4
|
<!-- 新的：接口對其了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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
{ "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寫??面這樣：
|
1
|
url: '/baoziTask/pages/roubaozi/roubaozi' |
那怎么查看分包成功呢？
在開發者工具右上角有一個詳情按鈕，點擊查看詳情側滑框，可以看到"本地代碼"這一行，后面的大小可以點擊，點擊后可以看到主包和各個分包的大小。看到主包沒有超過2MiB的話，那就可以上傳成功了！
群眾：為什么你要在KB和MB中間加個 i ？小傲嬌：因為要準確表達是1024
總結
到此這篇關于微信小程序使用Echarts和分包的文章就介紹到這了,更多相關微信小程序Echarts和分包內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6931230680898600968
