├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── package.json ├── rollup.config.js ├── scripts └── cp.js └── src ├── index.js ├── index.json ├── index.wxml └── index.wxss /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [Makefile] 16 | indent_style = tab 17 | indent_size = 1 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | coverage/ 3 | demos/assets/ 4 | dist/ 5 | lib/ 6 | mocks/ 7 | node_modules/ 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "egg" 4 | ], 5 | "globals": { 6 | "$": true, 7 | "DataSet": true, 8 | "G2": true, 9 | "d3": true, 10 | "_": true, 11 | "Component": true, 12 | "my": true, 13 | "wx": true 14 | }, 15 | "parser": "babel-eslint", 16 | "parserOptions": { 17 | "sourceType": "module" 18 | }, 19 | "rules": { 20 | "no-bitwise": [ 21 | 0 22 | ], 23 | "experimentalDecorators": [ 24 | 0 25 | ], 26 | "comma-dangle": [ 27 | "error", 28 | "never" 29 | ], 30 | "no-console": [ 31 | "error", 32 | { 33 | "allow": [ 34 | "warn", 35 | "error" 36 | ] 37 | } 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 18 | 19 | * **F2 Version**: 20 | * **Platform**: 21 | * **Mini Showcase(like screenshots)**: 22 | * **CodePen Link**: 23 | 24 | 25 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 10 | 11 | ##### Checklist 12 | 13 | 14 | - [ ] commit message follows commit guidelines 15 | 16 | ##### Description of change 17 | 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | package-lock.json 4 | 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | miniprogram_dist 12 | miniprogram_dev 13 | node_modules 14 | coverage 15 | dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | package-lock.json 4 | 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | test 12 | tools 13 | docs 14 | miniprogram_dev 15 | node_modules 16 | coverage -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Alipay.inc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # F2 微信小程序 2 | 3 | F2 的微信小程序版本，支持原生 [F2](https://f2.antv.vision/) 的所有功能，欢迎使用反馈。 4 | 5 | ## 快速体验 6 | 7 | - 微信扫码体验 8 | 9 | ![](https://gw.alipayobjects.com/zos/rmsportal/wmRJtPHkkoimGbPCeScc.jpg#align=left&display=inline&height=344&originHeight=344&originWidth=344&status=done&style=none&width=344) 10 | 11 | - 使用微信开发者工具打开此项 12 | 13 | ## 说明 14 | 为了方便使用，我们封装了微信小程序的自定义组件，故需要微信小程序支持使用 npm 安装第三包。
**重要：版本要求** 15 | 16 | 1. 小程序基础库版本 2.7.0 或以上 17 | 1. 开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 18 | 19 | 20 | ## 如何使用 21 | ### 1. 安装依赖 22 | 项目默认初始化出来的是没有`package.json`的，需要新增`package.json`后再安装 23 | 24 | ```bash 25 | ## 没有package.json时执行下面这段 26 | ## echo "{}" > package.json 27 | 28 | npm install @antv/wx-f2 --save 29 | ``` 30 | 31 | 安装好依赖包之后，点击工具顶部菜单栏的详情： 32 | 33 | ![](https://gw.alipayobjects.com/zos/rmsportal/sAYeeUhRjrchjvJONsvp.png#align=left&display=inline&height=314&originHeight=314&originWidth=582&status=done&style=none&width=582) 34 | 35 | 勾选“使用 npm 模块”选项： 36 | 37 | ![](https://gw.alipayobjects.com/zos/rmsportal/NLCSaOYDPNQVaIAZBoiC.png#align=left&display=inline&height=1596&originHeight=1596&originWidth=1054&status=done&style=none&width=1054) 38 | 39 | 最后点击开发者工具中的菜单栏：工具 --> 构建 npm 即可运行。 40 | 41 | ![](https://gw.alipayobjects.com/zos/rmsportal/kORAowbzpNioXseBQoxC.png#align=left&display=inline&height=746&originHeight=746&originWidth=392&status=done&style=none&width=392) 42 | 43 | 如果碰到 **@babel/runtime 未找到npm包入口文件**，直接忽略就行了，不影响使用（强迫症碍眼的话，手动删除`node_modules/@babel/runtime`目录） 44 | ```bash 45 | rm -rf node_modules/@babel/runtime 46 | ``` 47 | ![](https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/8997fffd-f9e4-45e4-b773-45f85e33f2f2.jpg) 48 | 49 | ### 2. 使用自定义组件 50 | #### 1. 打开json文件，引入组件 51 | ```json 52 | { 53 | "usingComponents": { 54 | "f2": "@antv/wx-f2" 55 | } 56 | } 57 | ``` 58 | 59 | #### 2. wxml 使用组件 60 | ```xml 61 | 62 | 63 | 64 | ``` 65 | 66 | #### 3. wxss 设置宽高 67 | ```css 68 | .f2-chart { 69 | width: 100%; 70 | height: 500rpx; 71 | } 72 | ``` 73 | 74 | #### 4. 实例化图表 75 | ```js 76 | Page({ 77 | data: { 78 | onInitChart(F2, config) { 79 | const chart = new F2.Chart(config); 80 | const data = [ 81 | { value: 63.4, city: 'New York', date: '2011-10-01' }, 82 | { value: 62.7, city: 'Alaska', date: '2011-10-01' }, 83 | { value: 72.2, city: 'Austin', date: '2011-10-01' }, 84 | { value: 58, city: 'New York', date: '2011-10-02' }, 85 | { value: 59.9, city: 'Alaska', date: '2011-10-02' }, 86 | { value: 67.7, city: 'Austin', date: '2011-10-02' }, 87 | { value: 53.3, city: 'New York', date: '2011-10-03' }, 88 | { value: 59.1, city: 'Alaska', date: '2011-10-03' }, 89 | { value: 69.4, city: 'Austin', date: '2011-10-03' }, 90 | ]; 91 | chart.source(data, { 92 | date: { 93 | range: [0, 1], 94 | type: 'timeCat', 95 | mask: 'MM-DD' 96 | }, 97 | value: { 98 | max: 300, 99 | tickCount: 4 100 | } 101 | }); 102 | chart.area().position('date*value').color('city').adjust('stack'); 103 | chart.line().position('date*value').color('city').adjust('stack'); 104 | chart.render(); 105 | // 注意：需要把chart return 出来 106 | return chart; 107 | } 108 | }, 109 | }); 110 | ``` 111 | 112 | ## API 113 | 114 | - F2 API 参见：[https://f2.antv.vision/zh/docs/api/f2](https://f2.antv.vision/zh/docs/api/f2) 115 | 116 | ## 如何贡献 117 | 118 | 如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/wx-f2/issues) 看看有没有类似的 bug 或者建议。 119 | 120 | ## License 121 | 122 | [MIT license](https://github.com/antvis/wx-f2/blob/master/LICENSE) 123 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@antv/wx-f2", 3 | "version": "2.1.1", 4 | "description": "F2 for weixin mini-program", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "build": "npm run clean && rollup -c && npm run cp", 8 | "cp": "node ./scripts/cp.js", 9 | "clean": "rm -rf dist", 10 | "lint": "eslint ./src --ext .js" 11 | }, 12 | "miniprogram": "dist", 13 | "dependencies": { 14 | "@antv/f2": "~3.7.0" 15 | }, 16 | "devDependencies": { 17 | "@rollup/plugin-commonjs": "^11.0.1", 18 | "@rollup/plugin-node-resolve": "^6.1.0", 19 | "eslint": "^6.8.0", 20 | "eslint-config-egg": "^8.0.0", 21 | "fs-extra": "^8.1.0", 22 | "rollup": "^1.28.0" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/antvis/wx-f2" 27 | }, 28 | "author": "sima.zhang1990@gmail.com", 29 | "license": "MIT" 30 | } 31 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | 4 | export default { 5 | input: 'src/index.js', 6 | output: { 7 | file: 'dist/index.js', 8 | format: 'umd' 9 | }, 10 | plugins: [ 11 | resolve(), 12 | commonjs() 13 | ] 14 | }; 15 | -------------------------------------------------------------------------------- /scripts/cp.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | const path = require('path'); 3 | // copy file 4 | fs.copySync(path.join(__dirname, '../src'), path.join(__dirname, '../dist'), { 5 | filter(src) { 6 | return !src.endsWith('.js'); 7 | } 8 | }); 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import F2 from '@antv/f2'; 3 | 4 | function wrapEvent(e) { 5 | if (!e) return; 6 | if (!e.preventDefault) { 7 | e.preventDefault = function() {}; 8 | } 9 | return e; 10 | } 11 | 12 | Component({ 13 | /** 14 | * 组件的属性列表 15 | */ 16 | properties: { 17 | onInit: { 18 | type: 'Function', 19 | value: () => {} 20 | } 21 | }, 22 | 23 | /** 24 | * 组件的初始数据 25 | */ 26 | data: { 27 | 28 | }, 29 | 30 | ready() { 31 | const query = wx.createSelectorQuery().in(this); 32 | query.select('.f2-canvas') 33 | .fields({ 34 | node: true, 35 | size: true 36 | }) 37 | .exec(res => { 38 | const { node, width, height } = res[0]; 39 | const context = node.getContext('2d'); 40 | const pixelRatio = wx.getSystemInfoSync().pixelRatio; 41 | // 高清设置 42 | node.width = width * pixelRatio; 43 | node.height = height * pixelRatio; 44 | 45 | const config = { context, width, height, pixelRatio }; 46 | const chart = this.data.onInit(F2, config); 47 | if (chart) { 48 | this.chart = chart; 49 | this.canvasEl = chart.get('el'); 50 | } 51 | }); 52 | }, 53 | 54 | /** 55 | * 组件的方法列表 56 | */ 57 | methods: { 58 | touchStart(e) { 59 | const canvasEl = this.canvasEl; 60 | if (!canvasEl) { 61 | return; 62 | } 63 | canvasEl.dispatchEvent('touchstart', wrapEvent(e)); 64 | }, 65 | touchMove(e) { 66 | const canvasEl = this.canvasEl; 67 | if (!canvasEl) { 68 | return; 69 | } 70 | canvasEl.dispatchEvent('touchmove', wrapEvent(e)); 71 | }, 72 | touchEnd(e) { 73 | const canvasEl = this.canvasEl; 74 | if (!canvasEl) { 75 | return; 76 | } 77 | canvasEl.dispatchEvent('touchend', wrapEvent(e)); 78 | } 79 | } 80 | }); 81 | -------------------------------------------------------------------------------- /src/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/index.wxml: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/index.wxss: -------------------------------------------------------------------------------- 1 | .f2-canvas { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | --------------------------------------------------------------------------------