钉钉小程序使用antv/my-f2

移动端小程序使用antv/my-f2，antv/f2不适合小程序使用

小程序开发者工具引入@antv/my-f2

开发环境引入(使用npm 或 cnpm)

开发依赖直接开发工具导入失败 所以手动导入

npm install @antv/my-f2 --save -dev

cnpm install @antv/my-f2 --save -dev

下载完成后，进行init配置package.json

直接空格即可自动根据依赖生成

npm init 或者 cnpm init

生成json自动添加在package.json中

"devDependencies": {
 "@antv/my-f2": "^2.1.5"
}

开发环境配置完成后

引入@antv/my-f2运行依赖
npm install @antv/my-f2 --save
npm 或 cnpm 都可以

运行环境引用

官方文档是直接引入json在页面配置使用

{
  "usingComponents": {
    "f2": "@antv/my-f2"
  }
}

由于文件层级原因引入失败找到antv/my-f2文件夹复制出来用于自定义组件

1.找到node_modules文件夹下的_@antv_my-f2@2.1.5@@antv

2.找到es文件夹 node_modules/_@antv_my-f2@2.1.5@@antv/my-f2/es

3.复制es文件夹 选中自定义的模块文件夹右键>新建小程序组件

4.将es文件夹粘贴进去，再将es下index文件的内容按后缀名依次复制粘贴到对应自定义小程序组件的文件下

引用antv/my-f2复制的文件

在需要引入antv/my-f2的页面json下usingComponents属性加入
“/pages/model/my-f2/my-f2” 为自定义组件页面的相对路径（右键复制相对路径）

 "usingComponents": {
    "f2": "/pages/model/my-f2/my-f2"
  }

简单使用antv/my-f2

可以直接参考官方文档或者继续

https://github.com/antvis/my-f2/blob/master/README.md

axml文件

<view class="f2-chart">
  <f2 onInit="onInitChart"></f2>
</view>

acss文件

.f2-chart {
  width: 100%;
  height: 500rpx;
}

js文件

Page({
  data: {},
  onInitChart(F2, config) {
    // 创建chart
    const chart = new F2.Chart(config);
    // 展示数据
    const data = [
      { value: 63.4, city: 'New York', date: '2011-10-01' },
      { value: 62.7, city: 'Alaska', date: '2011-10-01' },
      { value: 72.2, city: 'Austin', date: '2011-10-01' },
      { value: 58, city: 'New York', date: '2011-10-02' },
      { value: 59.9, city: 'Alaska', date: '2011-10-02' },
      { value: 67.7, city: 'Austin', date: '2011-10-02' },
      { value: 53.3, city: 'New York', date: '2011-10-03' },
      { value: 59.1, city: 'Alaska', date: '2011-10-03' },
      { value: 69.4, city: 'Austin', date: '2011-10-03' },
    ];

    // xy轴配置
    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'timeCat',
        // 日期格式化
        mask: 'MM-DD'
        // 横行显示点个数
        // tickCount: 3
       },
      value: {
        // 纵行最大值
        max: 300,
        // 纵行显示点个数
        tickCount: 4
        // 纵行最小值
        // min: 0,
        // 纵行文本格式转换
        // formatter: function formatter(val) {
        //   return val + '%';
        // }
      }
    });
    chart.area().position('date*value').color('city').adjust('stack');
    chart.line().position('date*value').color('city').adjust('stack');
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }
});