轉載:https://www.jianshu.com/p/6b9fe45f799f
Github地址:github.com/antvis/wx-f…
AntV F2地址: AntV F2html
https://antv.alipay.com/zh-cn/f2/3.x/demo/
微信小程序圖表組件 wx-f2,專爲移動而生的可視化解決方案,特爲你們提供了微信小程序端版本,體積小巧,性能卓越,底層基於圖形語法,能夠提供很是豐富的圖表類型。html5
可使用微信掃描如下二維碼先體驗一番:git
F2 的微信小程序版本,支持原生 F2 的全部功能,歡迎使用反饋。github
本項目參考了 echarts-for-weixin 的封裝思路,即封裝一個自定義組件 <f2-canvas>,方便用戶使用,該組件位於 /f2-canvas
目錄下。npm
微信小程序自定義組件結構和使用請參考: 自定義組件json
如下是目錄結構說明:canvas
├── f2-canvas // f2-canvas 組件
│ ├── f2-canvas.js
│ ├── f2-canvas.json
│ ├── f2-canvas.wxml
│ ├── f2-canvas.wxss
│ └── lib // f2-canvas 組件依賴的類庫
│ ├── EventEmitter.min.js // 事件發射器,用於監聽、觸發事件, 3.1K
│ ├── f2.js // f2 腳本(壓縮),155K
│ └── renderer.js // f2 專爲適配微信小程序繪圖上下文 context 而封裝的僞 Canvas
├── pages // f2-canvas 組件使用示例
│
複製代碼
因爲目前微信小程序中不支持經過 npm install 來安裝第三方的工具庫,因此須要將本項目中的 /f2-canvas
文件夾拷貝到本身的項目中以便使用。小程序
注意微信小程序
/f2-canvas/lib/
目錄下的 f2.js 文件默認咱們會保證它始終爲 F2 最新穩定版。若有必要,也能夠由用戶本身編譯(如要使用 F2 的按需加載)替換。api
下面咱們就開始使用 f2-canvas
組件來繪製圖表吧,這裏假設用戶已經初步瞭解微信小程序的基礎框架,如不瞭解,請先閱讀官網教程: 官方教程。
以繪製柱狀圖爲例:
<img src="https://gw.alipayobjects.com/zos/rmsportal/aDmzXXwkPmUFLCXwXBvo.gif" width="332">
STEP 1:在 pages 目錄下新建 column 目錄,該目錄須要包含如下幾個文件:
各個文件的內容以下:
index.json
配置文件,引入 f2-canvas 組件,這裏須要注意路徑要正確,因爲微信小程序組件名不容許包含數字,因此這裏將其命名爲 ff-canvas// index.json
{
"usingComponents": {
"ff-canvas": "../../../f2-canvas/f2-canvas"
}
}
複製代碼
index.wxml
視圖,使用 ff-canvas 組件,其中 opts
是一個咱們在 index.js 中定義的對象,必設屬性,它使得圖表可以在頁面加載後被初始化並設置,詳見 index.js 中的使用。<!--index.wxml-->
<view class="container">
<ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>
複製代碼
index.js
邏輯處理,這裏還須要引入 F2 用於繪製圖表,結構以下,注意路徑正確。// index.js
import F2 from '../../../f2-canvas/lib/f2';
let chart = null;
function initChart(canvas, width, height) { // 使用 F2 繪製圖表
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
sales: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}
});
chart.interval().position('year*sales');
chart.render();
return chart;
}
Page({
data: {
opts: {
onInit: initChart
}
},
onReady() {
}
});
複製代碼
因爲 f2-canvas 組件主要是對小程序的畫布上下文和 html5 canvas 的上下文進行了適配以支持 F2 在小程序端的渲染,因此 F2 能繪製什麼圖表,小程序端就能繪製什麼圖表,使用時也只需按照 F2 的語法來寫便可。
本項目只展現了部分 demos,更全的見 AntV F2。
須要注意的是,在建立 chart 的時候,須要使用 'el' 屬性來指定容器,對應 this.data.opts.onInit
方法形參中的 canvas
屬性,另外該方法還會返回 width
, height
屬性分別對應畫布的寬和高。
chart = new F2.Chart({
el: canvas,
width,
height
});
複製代碼
目前因爲小程序不支持 document,因此 Guide.Html 輔助元素組件目前仍沒法使用,其餘 F2 的功能所有支持。
F2 的微信小程序版本,支持原生 F2 的全部功能,歡迎使用反饋。
本 demo 圖表使用微信小程序 F2 自定義圖表組件 f2-canvas 繪製,故須要微信小程序支持使用 npm 安裝第三包。 重要:版本要求
若是須要使用原始版本,請 checkout 該項目的分支: github.com/antvis/wx-f…
使用微信開發者工具打開此項目,而後在項目根目錄下運行:
npm install --production複製代碼
安裝好依賴包以後,點擊工具頂部菜單欄的詳情:
勾選「使用 npm 模塊」選項:
最後點擊開發者工具中的菜單欄:工具 --> 構建 npm 便可運行。
@antv/f2-canvas 模塊爲 F2 的微信小程序圖表自定義組件,依賴於 @antv/wx-f2(F2 對於微信小程序進行的適配),請直接使用 @antv/f2-canvas。
若是須要單獨引入 F2 全局變量時,請安裝 @antv/wx-f2,如不須要,則不須要安裝。
非 npm 包安裝的自定義組件使用方式見 custom-components 分支。
@antv/f2-canvas
的使用詳見: github.com/antvis/f2-c…
F2 API 參見:antv.alipay.com/zh-cn/f2/3.…