{"id":13602341,"url":"https://github.com/antvis/wx-f2","last_synced_at":"2025-05-15T14:05:41.161Z","repository":{"id":47313877,"uuid":"129227007","full_name":"antvis/wx-f2","owner":"antvis","description":"F2 的微信小程序","archived":false,"fork":false,"pushed_at":"2021-09-03T10:33:17.000Z","size":737,"stargazers_count":1295,"open_issues_count":146,"forks_count":185,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-05-02T16:39:10.388Z","etag":null,"topics":["antv","charts","f2","miniprogram","visualization","webchat","wei-xin","weixin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-12T09:30:12.000Z","updated_at":"2025-04-26T23:30:22.000Z","dependencies_parsed_at":"2022-09-14T07:10:22.168Z","dependency_job_id":null,"html_url":"https://github.com/antvis/wx-f2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fwx-f2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fwx-f2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fwx-f2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fwx-f2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/wx-f2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253564222,"owners_count":21928228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antv","charts","f2","miniprogram","visualization","webchat","wei-xin","weixin"],"created_at":"2024-08-01T18:01:20.534Z","updated_at":"2025-05-15T14:05:36.151Z","avatar_url":"https://github.com/antvis.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","小程序"],"sub_categories":[],"readme":"# F2 微信小程序\n\nF2 的微信小程序版本，支持原生 [F2](https://f2.antv.vision/) 的所有功能，欢迎使用反馈。\n\n## 快速体验\n\n- 微信扫码体验\n\n![](https://gw.alipayobjects.com/zos/rmsportal/wmRJtPHkkoimGbPCeScc.jpg#align=left\u0026display=inline\u0026height=344\u0026originHeight=344\u0026originWidth=344\u0026status=done\u0026style=none\u0026width=344)\n\n- 使用微信开发者工具打开此项\n\n## 说明\n为了方便使用，我们封装了微信小程序的自定义组件，故需要微信小程序支持使用 npm 安装第三包。\u003cbr /\u003e**重要：版本要求**\n\n1. 小程序基础库版本 2.7.0 或以上\n1. 开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。\n\n\n## 如何使用\n### 1. 安装依赖\n项目默认初始化出来的是没有`package.json`的，需要新增`package.json`后再安装\n\n```bash\n## 没有package.json时执行下面这段\n## echo \"{}\" \u003e package.json\n\nnpm install @antv/wx-f2 --save\n```\n\n安装好依赖包之后，点击工具顶部菜单栏的详情：\n\n![](https://gw.alipayobjects.com/zos/rmsportal/sAYeeUhRjrchjvJONsvp.png#align=left\u0026display=inline\u0026height=314\u0026originHeight=314\u0026originWidth=582\u0026status=done\u0026style=none\u0026width=582)\n\n勾选“使用 npm 模块”选项：\n\n![](https://gw.alipayobjects.com/zos/rmsportal/NLCSaOYDPNQVaIAZBoiC.png#align=left\u0026display=inline\u0026height=1596\u0026originHeight=1596\u0026originWidth=1054\u0026status=done\u0026style=none\u0026width=1054)\n\n最后点击开发者工具中的菜单栏：工具 --\u003e 构建 npm 即可运行。\n\n![](https://gw.alipayobjects.com/zos/rmsportal/kORAowbzpNioXseBQoxC.png#align=left\u0026display=inline\u0026height=746\u0026originHeight=746\u0026originWidth=392\u0026status=done\u0026style=none\u0026width=392)\n\n如果碰到 **@babel/runtime 未找到npm包入口文件**，直接忽略就行了，不影响使用（强迫症碍眼的话，手动删除`node_modules/@babel/runtime`目录）\n```bash\nrm -rf node_modules/@babel/runtime\n```\n![](https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/8997fffd-f9e4-45e4-b773-45f85e33f2f2.jpg)\n\n### 2. 使用自定义组件\n#### 1. 打开json文件，引入组件\n```json\n{\n  \"usingComponents\": {\n    \"f2\": \"@antv/wx-f2\"\n  }\n}\n```\n\n#### 2. wxml 使用组件\n```xml\n\u003cview class=\"container\"\u003e\n  \u003cf2 class=\"f2-chart\" onInit=\"{{onInitChart}}\" /\u003e\n\u003c/view\u003e\n```\n\n#### 3. wxss 设置宽高\n```css\n.f2-chart {\n  width: 100%;\n  height: 500rpx;\n}\n```\n\n#### 4. 实例化图表\n```js\nPage({\n  data: {\n    onInitChart(F2, config) {\n      const chart = new F2.Chart(config);\n      const data = [\n        { value: 63.4, city: 'New York', date: '2011-10-01' },\n        { value: 62.7, city: 'Alaska', date: '2011-10-01' },\n        { value: 72.2, city: 'Austin', date: '2011-10-01' },\n        { value: 58, city: 'New York', date: '2011-10-02' },\n        { value: 59.9, city: 'Alaska', date: '2011-10-02' },\n        { value: 67.7, city: 'Austin', date: '2011-10-02' },\n        { value: 53.3, city: 'New York', date: '2011-10-03' },\n        { value: 59.1, city: 'Alaska', date: '2011-10-03' },\n        { value: 69.4, city: 'Austin', date: '2011-10-03' },\n      ];\n      chart.source(data, {\n        date: {\n          range: [0, 1],\n          type: 'timeCat',\n          mask: 'MM-DD'\n        },\n        value: {\n          max: 300,\n          tickCount: 4\n        }\n      });\n      chart.area().position('date*value').color('city').adjust('stack');\n      chart.line().position('date*value').color('city').adjust('stack');\n      chart.render();\n      // 注意：需要把chart return 出来\n      return chart;\n    }\n  },\n});\n```\n\n## API\n\n- F2 API 参见：[https://f2.antv.vision/zh/docs/api/f2](https://f2.antv.vision/zh/docs/api/f2)\n\n## 如何贡献\n\n如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/wx-f2/issues) 看看有没有类似的 bug 或者建议。\n\n## License\n\n[MIT license](https://github.com/antvis/wx-f2/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fwx-f2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Fwx-f2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fwx-f2/lists"}