{"id":13604044,"url":"https://github.com/xioxin/taro-f2","last_synced_at":"2025-04-11T22:32:23.993Z","repository":{"id":49842489,"uuid":"159637309","full_name":"xioxin/taro-f2","owner":"xioxin","description":"Taro多端F2图表","archived":false,"fork":true,"pushed_at":"2019-11-05T12:46:30.000Z","size":708,"stargazers_count":108,"open_issues_count":36,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T14:47:12.033Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"NervJS/taro-ui-sample","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xioxin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-29T09:03:09.000Z","updated_at":"2025-02-08T09:56:48.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/xioxin/taro-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/xioxin%2Ftaro-f2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xioxin%2Ftaro-f2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xioxin%2Ftaro-f2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xioxin%2Ftaro-f2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xioxin","download_url":"https://codeload.github.com/xioxin/taro-f2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489836,"owners_count":21112651,"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":[],"created_at":"2024-08-01T19:00:38.835Z","updated_at":"2025-04-11T22:32:23.161Z","avatar_url":"https://github.com/xioxin.png","language":"TypeScript","funding_links":[],"categories":["第三方库和组件"],"sub_categories":["Taro1"],"readme":"# Taro多端F2图表\n\n[![](https://img.shields.io/npm/v/taro-f2.svg?style=flat-square)](https://www.npmjs.com/package/taro-f2)\n\n目前支持: H5、微信小程序、支付宝小程序\n\n微信部分实现方法完全照搬: https://github.com/antvis/wx-f2\n\nF2图表具体使用方法请参考: https://github.com/antvis/f2\n\n\u003e 直接克隆代码 可查阅示例\n\n##  更新日志\n* 2.1.2: `onCanvasInit` 增加scope导出, 增加导出图片示例, 如果h5编译报错可以尝试将`@tarojs/webpack-runner`降级到 1.2.x。具体参见:[#18](https://github.com/xioxin/taro-f2/issues/18)\n* 2.1.0: 支持了按需引用\n  - `onInit` 修改为 `onCanvasInit`,回调不再返回F2\n  - 增加 `F2Canvas.f2Fix()` 方法, 用于为F2增加小程序等兼容代码\n  - 增加示例代码\n* 1.2.0: 使用新的打包方式，注意升级Taro库到 1.2.0 或更高版本\n* 1.1.2: 改用低版本@tarojs/cli编译，新版本貌似改了h5的编译方式了\n* 1.1.0: 增加支付宝小程序支持, 修复h5模糊的问题\n\n\n## 安装\n\n```\n$ yarn add taro-f2 @antv/f2\n```\n\u003e 注意 @antv/f2 需要手动安装\n\n#### 修改项目配置文件 config/index.js\n在 `h5` 的 `esnextModules` 中增加 `taro-f2`\n```\n{\n  h5: {\n    esnextModules: ['taro-f2']\n  }\n}\n```\n\n在 `weapp` 的 `compile.include` 中增加 `taro-f2`\n\n```\n{\n  weapp: {\n    compile: {\n      include: ['taro-f2']\n    }\n  }\n}\n```\n\n\n## 使用指南\n\n在 Taro 文件中引入组件\n```jsx harmony\nimport { F2Canvas } from \"taro-f2\";\nimport { fixF2 } from \"taro-f2/dist/weapp/common/f2-tool.ts\";\nimport F2 from \"@antv/f2\"\n```\n\n\n## 按需引用\n假如一个业务场景下仅需要绘制饼图（不带动画）\n```jsx harmony\nimport { F2Canvas } from \"taro-f2\";\nimport { fixF2 } from \"taro-f2/dist/weapp/common/f2-tool.ts\";\nconst F2 = require('@antv/f2/lib/core'); // 必须引入\nrequire('@antv/f2/lib/geom/interval'); // 引入 interval 几何标记\nrequire('@antv/f2/lib/coord/polar'); // 引入 极坐标\nrequire('@antv/f2/lib/geom/adjust/stack'); // 引入数据层叠调整类型\n```\n\n\n## 事件\n\n| 事件名称 | 说明 | 返回参数 |\n|:---|:---|:---|\n| onCanvasInit | 画板初始化完毕事件 | (canvas: any, width: number, height: number, scope: any): void \u003cbr\u003e canvas: 小程序下为伪Canvas元素 |\n\n\n\u003e F2Canvas宽高为100% 设置宽高需要在外面套个View\n\n\n## 保存图片\n```jsx harmony\nif(process.env.TARO_ENV === 'h5'){\n  const a = document.createElement(\"a\");\n  a.href = canvas.toDataURL('image/png');\n  a.download = '图表.png';\n  a.click();\n}else {\n  const saveTempFile = Taro.canvasToTempFilePath({\n    canvasId: canvas.ctx.canvasId,\n  }, scope);\n  saveTempFile.then(image =\u003e {\n    Taro.saveImageToPhotosAlbum({\n      filePath: image.tempFilePath,\n    }).then(() =\u003e {\n      Taro.showToast({ title: '保存成功', icon: 'none' })\n    }, () =\u003e {\n      Taro.showToast({ title: '保存相册失败', icon: 'none' })\n    })\n  }, () =\u003e {\n    Taro.showToast({ title: '无法读取canvas', icon: 'none' })\n  })\n}\n```\n\n\n## 示例\n\n```jsx harmony\nimport Taro, { Component } from '@tarojs/taro'\nimport { View } from '@tarojs/components'\nimport { F2Canvas } from 'taro-f2'\nimport { fixF2 } from 'taro-f2/dist/weapp/common/f2-tool.ts'\nimport F2 from '@antv/f2'\n\nexport default class Index extends Component {\n\n  drawRadar(canvas, width, height){\n    \n    // ⚠️ 别忘了这行\n    // 为了兼容微信与支付宝的小程序，你需要通过这个命令为F2打补丁\n    fixF2(F2);\n\n    const data = [\n      { name: '超大盘能力', value: 6.5 },\n      { name: '抗跌能力', value: 9.5 },\n      { name: '稳定能力', value: 9 },\n      { name: '绝对收益能力', value: 6 },\n      { name: '选证择时能力', value: 6 },\n      { name: '风险回报能力', value: 8 }\n    ];\n    const chart = new F2.Chart({\n      el: canvas,\n      width,\n      height\n    });\n    chart.source(data, {\n      value: {\n        min: 0,\n        max: 10\n      }\n    });\n    chart.coord('polar');\n    chart.axis('value', {\n      grid: {\n        lineDash: null\n      },\n      label: null,\n      line: null\n    });\n    chart.axis('name', {\n      grid: {\n        lineDash: null\n      }\n    });\n    chart.area()\n      .position('name*value')\n      .color('#FE5C5B')\n      .style({\n        fillOpacity: 0.2\n      })\n      .animate({\n        appear: {\n          animation: 'groupWaveIn'\n        }\n      });\n    chart.line()\n      .position('name*value')\n      .color('#FE5C5B')\n      .size(1)\n      .animate({\n        appear: {\n          animation: 'groupWaveIn'\n        }\n      });\n    chart.point().position('name*value').color('#FE5C5B').animate({\n      appear: {\n        delay: 300\n      }\n    });\n    chart.guide().text({\n      position: ['50%', '50%'],\n      content: '73',\n      style: {\n        fontSize: 32,\n        fontWeight: 'bold',\n        fill: '#FE5C5B'\n      }\n    });\n    chart.render();\n  }\n\n  render () {\n    return (\n      \u003cView className='index'\u003e\n        \u003cView style='width:100%;height:500px'\u003e\u003cF2Canvas onCanvasInit={this.drawRadar.bind(this)}\u003e\u003c/F2Canvas\u003e\u003c/View\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxioxin%2Ftaro-f2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxioxin%2Ftaro-f2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxioxin%2Ftaro-f2/lists"}