{"id":43617652,"url":"https://github.com/domisolo/taro-f2-react","last_synced_at":"2026-02-04T12:38:47.431Z","repository":{"id":57702484,"uuid":"504096904","full_name":"domisolo/taro-f2-react","owner":"domisolo","description":"在 Taro React 中使用 @antv/f2 。","archived":false,"fork":false,"pushed_at":"2024-08-27T15:00:25.000Z","size":90,"stargazers_count":28,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T20:52:39.779Z","etag":null,"topics":["antv","antv-f2","f2","miniprogram","mp","react","taro","tarojs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/taro-f2-react","language":"TypeScript","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/domisolo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-16T09:41:12.000Z","updated_at":"2025-05-03T06:51:14.000Z","dependencies_parsed_at":"2024-08-23T11:28:29.835Z","dependency_job_id":"a310c5ae-4bba-4d8c-bf7b-e299ec796a49","html_url":"https://github.com/domisolo/taro-f2-react","commit_stats":null,"previous_names":["domisooo/taro-f2-react","daniel-zd/taro-f2-react","domisolo/taro-f2-react"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/domisolo/taro-f2-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domisolo%2Ftaro-f2-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domisolo%2Ftaro-f2-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domisolo%2Ftaro-f2-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domisolo%2Ftaro-f2-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/domisolo","download_url":"https://codeload.github.com/domisolo/taro-f2-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domisolo%2Ftaro-f2-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29084434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","antv-f2","f2","miniprogram","mp","react","taro","tarojs"],"created_at":"2026-02-04T12:38:46.764Z","updated_at":"2026-02-04T12:38:47.424Z","avatar_url":"https://github.com/domisolo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# taro-f2-react\n\n\u003e 在 Taro React 中使用 @antv/f2 。\n\n# Demo\n\u003cimg src=\"https://github.com/domisolo/taro-f2-react/blob/main/docs/screenshot.png\" alt=\"Demo\" width=\"30%\" /\u003e\n\n# Install\n\n```bash\n#via pnpm\n$ pnpm add taro-f2-react @antv/f2@4.0.51\n\n# via npm\n$ npm i taro-f2-react\n\n# via yarn\n$ yarn add taro-f2-react\n```\n\n# Usage\n\n不需要额外配置 usingComponents 小程序原生组件，通过 import 引入 taro-f2-react 组件即可。\n\u003cbr\u003e详细使用文档参考 [@antv/f2](https://f2.antv.vision/zh/docs/tutorial/getting-started)\n\u003cbr\u003e接下来就可以愉快的在 Taro 中使用 F2 了\n\n```javascript\nimport React from \"react\";\nimport { View } from \"@tarojs/components\";\nimport F2Canvas from \"taro-f2-react\";\nimport { Chart, Interval } from \"@antv/f2\";\n\nconst data = [\n  { genre: \"Sports\", sold: 275 },\n  { genre: \"Strategy\", sold: 115 },\n  { genre: \"Action\", sold: 120 },\n  { genre: \"Shooter\", sold: 350 },\n  { genre: \"Other\", sold: 150 },\n];\n\nfunction Index() {\n  return (\n    \u003cView style={{ width: \"100%\", height: \"260px\" }}\u003e\n      \u003cF2Canvas\u003e\n        \u003cChart data={data}\u003e\n          \u003cInterval x=\"genre\" y=\"sold\" /\u003e\n        \u003c/Chart\u003e\n      \u003c/F2Canvas\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## 多图表\n\n有时候需要在同一个页面展示多个图表，这个时候就可以通过指定 F2Canvas 不同的 id 来实现\n| 属性 | 类型 | 默认值 | 是否必填 |\n| ------- | ------- | ------- | ------- |\n| id | string | f2Canvas | 否 |\n\n```javascript\n\u003cF2Canvas id=\"myCanvas1\"\u003e\n  \u003cChart data={data}\u003e\n    \u003cInterval x=\"genre\" y=\"sold\" /\u003e\n  \u003c/Chart\u003e\n\u003c/F2Canvas\u003e\n\n...\n\n\u003cF2Canvas id=\"myCanvas2\"\u003e\n  \u003cChart data={data}\u003e\n    \u003cInterval x=\"genre\" y=\"sold\" /\u003e\n  \u003c/Chart\u003e\n\u003c/F2Canvas\u003e\n```\n\n# 异常处理\n\n## TypeError: Cannot destructure property 'node' of 'res[0]' as it is null.\nTaro 在 \u003e= 3.6.0 版本中 Dev 模式下新增了 split chunks，导致加载第三方 UI 组件时，无法正确的挂载组件，可以通过修改以下配置关闭此特性，问题即可解决。\n```\n{\n  ...\n  compiler: {\n    type: 'webpack5',\n    prebundle: {\n      enable: false,\n    },\n  },\n  ...\n}\n```\n\n# 关于 @antv/f2 5.x\n* 由于开发者反馈 @antv/f2 5.x 版本的问题较多，最新版本修改为支持 4.x 版本\n* 如果想体验 @antv/f2 5.x 版本，可以安装 taro-f2-react 1.2.0 版本\n\n# Support\n\nTaro \u003e= 3.x\n\u003cbr\u003e @antv/f2@4.x\n\n## LICENSE [MIT](LICENSE)\n\nCopyright © 2022 Daniel Zhao.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdomisolo%2Ftaro-f2-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdomisolo%2Ftaro-f2-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdomisolo%2Ftaro-f2-react/lists"}