1 |
|
2 | import F2 from '@antv/wx-f2'
|
3 |
|
4 | Component({
|
5 | |
6 |
|
7 |
|
8 | properties: {
|
9 | canvasId: {
|
10 | type: String,
|
11 | value: 'f2-canvas'
|
12 | },
|
13 |
|
14 | opts: {
|
15 | type: Object
|
16 | }
|
17 | },
|
18 |
|
19 | |
20 |
|
21 |
|
22 | data: {
|
23 |
|
24 | },
|
25 |
|
26 | ready() {
|
27 | if (!this.data.opts) {
|
28 | console.warn('组件需绑定 opts 变量,例:<ff-canvas id="mychart-dom-bar" canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>')
|
29 | return
|
30 | }
|
31 |
|
32 | if (!this.data.opts.lazyLoad) {
|
33 | this.init()
|
34 | }
|
35 | },
|
36 |
|
37 | |
38 |
|
39 |
|
40 | methods: {
|
41 | init(callback) {
|
42 | const version = wx.version.version.split('.').map(n => parseInt(n, 10))
|
43 | const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) ||
|
44 | (version[0] === 1 && version[1] === 9 && version[2] >= 91)
|
45 | if (!isValid) {
|
46 | console.error('微信基础库版本过低,需大于等于 1.9.91。')
|
47 | return
|
48 | }
|
49 |
|
50 | const ctx = wx.createCanvasContext(this.data.canvasId, this)
|
51 | const canvas = new F2.Renderer(ctx)
|
52 | this.canvas = canvas
|
53 |
|
54 | const query = wx.createSelectorQuery().in(this)
|
55 | query.select('.f2-canvas').boundingClientRect(res => {
|
56 | if (typeof callback === 'function') {
|
57 | this.chart = callback(canvas, res.width, res.height, F2)
|
58 | } else if (this.data.opts && this.data.opts.onInit) {
|
59 | this.chart = this.data.opts.onInit(canvas, res.width, res.height, F2)
|
60 | }
|
61 | }).exec()
|
62 | },
|
63 | touchStart(e) {
|
64 | if (this.canvas) {
|
65 | this.canvas.emitEvent('touchstart', [e])
|
66 | }
|
67 | },
|
68 | touchMove(e) {
|
69 | if (this.canvas) {
|
70 | this.canvas.emitEvent('touchmove', [e])
|
71 | }
|
72 | },
|
73 | touchEnd(e) {
|
74 | if (this.canvas) {
|
75 | this.canvas.emitEvent('touchend', [e])
|
76 | }
|
77 | },
|
78 | press(e) {
|
79 | if (this.canvas) {
|
80 | this.canvas.emitEvent('press', [e])
|
81 | }
|
82 | }
|
83 | }
|
84 | })
|