Uni-App微信小程序平臺兼容常用圖表庫
?前言?
從使用場景上來說，這篇更應該看作是如何在微信小程序中使用常用h5圖表庫 (antv/f2、echarts等) 。但是得益于uni-app的跨平臺能力，能讓我們使用更加熟悉的vue框架來實現微信小程序的開發。對于uni-app用戶來說，如若使用圖表能力，只能去dcloud社區插件 (https://ext.dcloud.net.cn/) 中搜尋，亦或是自己動手。下面來看一下，如何自己封裝組件使用這些h5圖表庫。
?antv/f2?
由于新的4.x版本使用的是jsx語法，不是很習慣。這里演示的是3.x (https://f2-v3.antv.vision/zh/docs/tutorial/getting-started) 版本。在官方文檔中我們很容易發現：F2 是基于 CanvasRenderingContext2D (https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 的標準接口繪制的，所以只要能提供標準 CanvasRenderingContext2D 接口的實現對象，F2就能進行圖表繪制。
因為在小程序中給的 context? 對象不是標準的 CanvasRenderingContext2D , 所以封裝的核心思路是將 context? 和 CanvasRenderingContext2D 對齊，所以 F2 針對支付寶和微信這2個常見的場景做了一層 context 的對齊，詳情可見：https://github.com/antvis/f2-context，其他小程序也可以按同樣的思路封裝。
當然微信小程序，f2已經兼容過，在使用的時候可以省略這一步。
首先在src (基于vue-cli) 目錄下components文件夾下新建組件f2-uni，在f2-uni.vue文件的template中添加。
<template>
<canvas
type="2d"
class="f2-canvas"
="touchStart"
="touchMove"
="touchEnd"
>
</canvas>
</template>
給容器設定個寬高。
<style lang="less">
.f2-canvas {
width: 100%;
height: 600rpx;
}
</style>
組件接收一個參數onInit，用來接收F2構造方法和config。
props: {
onInit: {
type: Function,
default: () => {}
}
},
注冊組件初始化的時候調用方法，從這里也能看出，小程序與h5在dom操作時選擇器方法的差別。
const query = uni.createSelectorQuery().in(this)
query.select('.f2-canvas')
.fields({
node: true,
size: true
})
.exec(res => {
const { node, width, height } = res[0]
const context = node.getContext('2d') // 微信基礎庫2.7.0 以上支持
const pixelRatio = uni.getSystemInfoSync().pixelRatio
// 高清設置
node.width = width * pixelRatio
node.height = height * pixelRatio
const config = { context, width, height, pixelRatio }
const chart = this.onInit(F2, config)
if (chart) {
this.canvasEl = chart.get('el')
}
})
注：canvas.getContext 基礎庫2.7.0開始支持，如果對兼容性有要求可參考官方兼容處理 (https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 。
touch事件處理 (其他兩個同理) 。
function wrapEvent (e) {
if (!e) return
if (!e.preventDefault) {
e.preventDefault = function () {}
}
return e
}
touchStart (e) {
const canvasEl = this.canvasEl
if (!canvasEl) {
return
}
canvasEl.dispatchEvent('touchstart', wrapEvent(e))
}至此組件主體封裝已完成，在頁面中使用。
<f2-uni class="f2-chart" :onInit="onInitChart"></f2-uni>
methods: {
onInitChart: (F2Constructor, config) => {
const chart = new F2Constructor.Chart(config)
const data = [
{ value: 63.4, city: 'New York', date: '2011-10-01' },
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
{ value: 58, city: 'New York', date: '2011-10-02' },
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
{ value: 53.3, city: 'New York', date: '2011-10-03' },
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
{ value: 69.4, city: 'Austin', date: '2011-10-03' }
]
chart.source(data, {
date: {
range: [0, 1],
type: 'timeCat',
mask: 'MM-DD'
},
value: {
max: 300,
tickCount: 4
}
})
chart.area().position('date*value').color('city').adjust('stack')
chart.line().position('date*value').color('city').adjust('stack')
chart.render()
// 注意：需要把chart return 出來
return chart
}
}
}
成功渲染出示例圖表。
本文旨在提供思路，具體封裝可以更加靈活易用。
完整代碼 (https://code.juejin.cn/pen/7113852538541047821) 。
?echarts?
與上面同理，主要針對小程序的dom選擇器和canvas context做一些兼容處理。具體封裝可參考dcloud社區中一款不錯的插件 echarts for uniapp(https://ext.dcloud.net.cn/plugin?id=8017)下載插件zip包，可查看源碼。
如果只在微信小程序平臺編譯使用，且條件編譯不生效，我提煉了純凈版：代碼片段 (https://code.juejin.cn/pen/7113871812777230372)。
