项目作者: antvis

项目描述 :
F2 的微信小程序
高级语言: JavaScript
项目地址: git://github.com/antvis/wx-f2.git


F2 微信小程序

F2 的微信小程序版本,支持原生 F2 的所有功能,欢迎使用反馈。

快速体验

  • 微信扫码体验

  • 使用微信开发者工具打开此项

说明

为了方便使用,我们封装了微信小程序的自定义组件,故需要微信小程序支持使用 npm 安装第三包。
重要:版本要求

  1. 小程序基础库版本 2.7.0 或以上
  2. 开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。

如何使用

1. 安装依赖

项目默认初始化出来的是没有package.json的,需要新增package.json后再安装

  1. ## 没有package.json时执行下面这段
  2. ## echo "{}" > package.json
  3. npm install @antv/wx-f2 --save

安装好依赖包之后,点击工具顶部菜单栏的详情:

勾选“使用 npm 模块”选项:

最后点击开发者工具中的菜单栏:工具 —> 构建 npm 即可运行。

如果碰到 @babel/runtime 未找到npm包入口文件,直接忽略就行了,不影响使用(强迫症碍眼的话,手动删除node_modules/@babel/runtime目录)

  1. rm -rf node_modules/@babel/runtime

2. 使用自定义组件

1. 打开json文件,引入组件

  1. {
  2. "usingComponents": {
  3. "f2": "@antv/wx-f2"
  4. }
  5. }

2. wxml 使用组件

  1. <view class="container">
  2. <f2 class="f2-chart" onInit="{{onInitChart}}" ></f2>
  3. </view>

3. wxss 设置宽高

  1. .f2-chart {
  2. width: 100%;
  3. height: 500rpx;
  4. }

4. 实例化图表

  1. Page({
  2. data: {
  3. onInitChart(F2, config) {
  4. const chart = new F2.Chart(config);
  5. const data = [
  6. { value: 63.4, city: 'New York', date: '2011-10-01' },
  7. { value: 62.7, city: 'Alaska', date: '2011-10-01' },
  8. { value: 72.2, city: 'Austin', date: '2011-10-01' },
  9. { value: 58, city: 'New York', date: '2011-10-02' },
  10. { value: 59.9, city: 'Alaska', date: '2011-10-02' },
  11. { value: 67.7, city: 'Austin', date: '2011-10-02' },
  12. { value: 53.3, city: 'New York', date: '2011-10-03' },
  13. { value: 59.1, city: 'Alaska', date: '2011-10-03' },
  14. { value: 69.4, city: 'Austin', date: '2011-10-03' },
  15. ];
  16. chart.source(data, {
  17. date: {
  18. range: [0, 1],
  19. type: 'timeCat',
  20. mask: 'MM-DD'
  21. },
  22. value: {
  23. max: 300,
  24. tickCount: 4
  25. }
  26. });
  27. chart.area().position('date*value').color('city').adjust('stack');
  28. chart.line().position('date*value').color('city').adjust('stack');
  29. chart.render();
  30. // 注意:需要把chart return 出来
  31. return chart;
  32. }
  33. },
  34. });

API

如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

License

MIT license