1. 需求詳解
很多時候,我們在項目中會大量使用到可視化圖表數據,在大量工作中,我們最熟悉的可視化數據一定是echarts這個工具,它非常好用並免費.聽起來很香,對!它真的很香。
但是當我們在特定場景中,比如小程序,那它就是一個非常頭痛的存在,為什么?在小程序中代碼上傳大小規定只有2M,而echarts在小程序中使用必須要在本地使用,無法使用連接的方式外部引用(微信官方規定項目有請求白名單)。
那么在項目中使用了echarts會非常占用我們有限的空間,那怎么辦呢，下面就告訴大家在小程序項目使用可視化工具的方法。
2. 使用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>
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數據
data: {
isUseNewCanvas: true // 這里改成true， 默認是false
}
在組件中使用數據 2種方式
<!-- 新的：接口對其了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>
3. 分包加載
好,上面是我們使用echarts的使用步驟,但是echarts文件大小有500KB+ 它嚴重影響了我們項目打包大小,所以這里必須使用分包加載
在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，具體的話得看官網和自己嘗試了。