前言

假期雖然結(jié)束了，但是它以另外一種形式展示我們身上（摸摸自己的小肚子）。在小程序上以圖形化顯示數(shù)據(jù)就是分給我的假期預(yù)研任務(wù)，查了一下網(wǎng)上大佬們的文章了解到了Ucharts，F(xiàn)2，Wx-charts和Echarts，只嘗試了F2和Echarts，由于Echarts的最近更新最近和我對(duì)Echarts更為熟悉，所以我選擇了Echarts，F(xiàn)2也試了下，雖然弄出來(lái)了，但是我不是太熟悉所以就放棄了。

進(jìn)入正題

首先我是看到別人的文章寫(xiě)Echarts的，給了官網(wǎng)的傳送門(mén)，然后就去官網(wǎng)順著看了，比較簡(jiǎn)單，這里我也給個(gè)傳送門(mén)吧。大體上的步驟

1、下載官網(wǎng)例子。

2、把官網(wǎng)例子中的ec-canvas文件夾復(fù)制到項(xiàng)目目錄中。

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

4、在具體的頁(yè)面的js中進(jìn)行初始化。

在下載完官網(wǎng)例子后，找到ec-canvas文件夾，里面有echarts.js,wx-canvas.js還有ec-canvas四件套。然后把這個(gè)文件夾復(fù)制到自己項(xiàng)目的目錄下，一開(kāi)始我是放到utils下的，后來(lái)分包之后就放別的地方，這里就當(dāng)放在utils下了。然后項(xiàng)目就大了700+KiB。

頁(yè)面中

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方法，所以根據(jù)放置的ec-canvas的路徑引入echarts。

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根據(jù)放置的ec-canvas的路徑引入echarts
let chart = null // 用一個(gè)變量保存echarts的初始化
let options = { // 圖形配置，用過(guò)echarts的人都知道是嘛意思～ 這里給出官網(wǎng)線圖的基礎(chǔ)例子
 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 // 這里不要加括號(hào)哦！
 }
 }
});

保存運(yùn)行，到這一步理論上echarts已經(jīng)可以顯示了，實(shí)際怎么樣還要自己調(diào)試的。

用一個(gè)chart變量保存echarts的初始化，官網(wǎng)上把options也寫(xiě)在方法里，我給拿出來(lái)了。那chart有什么用呢？因?yàn)榇蟛糠值臄?shù)據(jù)都是異步獲取的，所以要?jiǎng)討B(tài)渲染echarts。當(dāng)拿到數(shù)據(jù)后，這個(gè)chart就用上了。

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

這里關(guān)于data的數(shù)據(jù)格式，看每個(gè)人的options里面要渲染的是什么圖吧。我這里用的是官網(wǎng)給的這個(gè)例子傳送門(mén)，echarts的數(shù)據(jù)更新可以直接用setOption。

在開(kāi)發(fā)者工具中的放大縮小滾動(dòng)沒(méi)有用，但是上傳到體驗(yàn)版上后在手機(jī)上是好的。微信對(duì)canvas有type="2d"，在ec-canvas中想要使用type="2d"的話，要改動(dòng)ec-canvas.js

data: {
 isUseNewCanvas: true // 這里改成true， 默認(rèn)是false
}

因?yàn)椋篿sUseNewCanvas默認(rèn)是false，是舊版的canvas。

<!-- 新的：接口對(duì)其了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體積大的問(wèn)題，上傳項(xiàng)目2MiB限制問(wèn)題

就下載的ec-canvas里面的echarts.js有幾百KiB，相對(duì)于2MiB的來(lái)說(shuō)挺大的，當(dāng)我上傳項(xiàng)目的時(shí)候提示我超出限制，那能想到的就是減小echarts.js的體積和分包兩個(gè)能即時(shí)見(jiàn)效的方法了。

echarts.js體積大的問(wèn)題

在echarts的官網(wǎng)有按需構(gòu)建的方法（傳送門(mén)---在線定制），進(jìn)入下面的在線定制，選擇自己需要圖，我就選了折線圖，坐標(biāo)系選了直角坐標(biāo)系，組件里除了刷選，工具欄和自定義圖形外別的都選了，其它選項(xiàng)把svg也勾上了，然后點(diǎn)擊下載進(jìn)入building頁(yè)面，這里等它構(gòu)建完成會(huì)自動(dòng)下載一個(gè)echarts.min.js文件，大小最后少了200來(lái)KiB。然后把它重命名成echarts.js替換進(jìn)ec-canvas里。

上傳項(xiàng)目2MiB限制問(wèn)題

echarts.js的體積減少了，但是上傳的限制問(wèn)題還在，那就是分包了。

在app.json里面，有一個(gè)subpackages

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

這個(gè)分包在官網(wǎng)上講的挺簡(jiǎn)單的，但是在我使用時(shí)是這樣理解的。

root是要分包的路徑，我是放到根目錄的。那么baoziTask下的所有文件都會(huì)被認(rèn)為是一個(gè)包。那不在這個(gè)baoziTask路徑下的文件都會(huì)被打包進(jìn)app這個(gè)主包內(nèi)。

name就是分包的別名，預(yù)下載的時(shí)候會(huì)用，這個(gè)預(yù)下載就當(dāng)在某個(gè)頁(yè)面的時(shí)候，想主動(dòng)下載這個(gè)可能被使用的分包，以提高訪問(wèn)速度。比如當(dāng)我進(jìn)入某個(gè)頁(yè)面的時(shí)候，很大可能會(huì)點(diǎn)擊某處跳轉(zhuǎn)到某個(gè)分包里面，這個(gè)時(shí)候可以預(yù)下載這個(gè)分包，而不用跳轉(zhuǎn)的時(shí)候才下載這個(gè)分包。

independent是分包是否獨(dú)立，但是我沒(méi)用過(guò)就沒(méi)有直觀的感覺(jué)。說(shuō)是可以單獨(dú)運(yùn)行，不依賴app這個(gè)主包。這個(gè)需要配置，不是代碼的下載，配置preloadRule，具體的話得看官網(wǎng)和自己嘗試了。傳送門(mén)---分包預(yù)下載

pages就更好理解了啊，就是包內(nèi)的頁(yè)面唄。

想要跳轉(zhuǎn)到這些分包內(nèi)的頁(yè)面的時(shí)候給跳轉(zhuǎn)的url寫(xiě)對(duì)路徑就可以了，就比如跳轉(zhuǎn)到roubaozi的時(shí)候url寫(xiě)⬇️面這樣：

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

那怎么查看分包成功呢？

在開(kāi)發(fā)者工具右上角有一個(gè)詳情按鈕，點(diǎn)擊查看詳情側(cè)滑框，可以看到"本地代碼"這一行，后面的大小可以點(diǎn)擊，點(diǎn)擊后可以看到主包和各個(gè)分包的大小?？吹街靼鼪](méi)有超過(guò)2MiB的話，那就可以上傳成功了！

群眾：為什么你要在KB和MB中間加個(gè) i ？小傲嬌：因?yàn)橐獪?zhǔn)確表達(dá)是1024

總結(jié)

到此這篇關(guān)于微信小程序使用Echarts和分包的文章就介紹到這了,更多相關(guān)微信小程序Echarts和分包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論