钉钉小程序+f2/my-f2实现折线图

参考文档：https://github.com/antvis/my-f2

1、效果图

2、钉钉小程序默认初始化出来的项目是没有package.json的，需要新增package.json后再安装依赖，使用命令行 npm init --yes 创建 package.json 文件

3、使用命令行 npm install @antv/my-f2 --save 安装依赖

4、使用自定义组件
test-my-f2.json 文件

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

test-my-f2.axml 文件

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

test-my-f2.js 文件

Page({
  data: {},
  onInitChart(F2, config) {
    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' },
    ];
    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'timeCat',
        mask: 'MM-DD'
      },
      value: {
        max: 300,
        tickCount: 4
      }
    });
    chart.area().position('date*value').color('city').adjust('stack');
    chart.line().position('date*value').color('city').adjust('stack');
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }
});

test-my-f2.acss 文件

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

效果图

5、将js代码修改为我们之前在html5和vue中使用过的代码

1. 修改代码

Page({
  data: {},
  onInitChart(F2, config) {
    const data = [{
      date: '2017-06-05',
      value: 116
    },
    {
      date: '2017-06-06',
      value: 129
    },
    {
      date: '2017-06-07',
      value: 135
    },
    {
      date: '2017-06-08',
      value: 86
    },
    {
      date: '2017-06-09',
      value: 73
    },
    {
      date: '2017-06-10',
      value: 85
    },
    {
      date: '2017-06-11',
      value: 73
    },
    {
      date: '2017-06-12',
      value: 68
    },
    {
      date: '2017-06-13',
      value: 92
    },
    {
      date: '2017-06-14',
      value: 130
    },
    {
      date: '2017-06-15',
      value: 245
    },
    {
      date: '2017-06-16',
      value: 139
    },
    {
      date: '2017-06-17',
      value: 115
    },
    {
      date: '2017-06-18',
      value: 111
    },
    {
      date: '2017-06-19',
      value: 309
    },
    {
      date: '2017-06-20',
      value: 206
    },
    {
      date: '2017-06-21',
      value: 137
    },
    {
      date: '2017-06-22',
      value: 128
    },
    {
      date: '2017-06-23',
      value: 85
    },
    {
      date: '2017-06-24',
      value: 94
    }];

    // Step 1: 创建 Chart 对象
    const chart = new F2.Chart(config);

    // Step 2: 载入数据源
    chart.source(data, {
      value: {
        tickCount: 10,  // 坐标轴上刻度点的个数
        min: 50,    // 手动指定value字段最小值
        max: 350    // 手动指定value字段最大值
      },
      date: {
        type: 'timeCat',    // 指定date字段为时间类型
        range: [0, 0.8],    // 占x轴80%
        tickCount: 3   // 坐标轴上刻度点的个数
      }
    });

    // Step 3:使用图形语法进行图表的绘制
    // 注意：f2是移动端图表库，只有在移动端才能显示图例
    chart.tooltip({
      custom: true,   // 是否自定义 tooltip 提示框
      showXTip: true, // 是否展示 X 轴的辅助信息
      showYTip: true, // 是否展示 Y 轴的辅助信息
      snap: true, // 是否将辅助线准确定位至数据点
      crosshairsType: 'xy',   // 辅助线的种类
      crosshairsStyle: {  // 配置辅助线的样式
        lineDash: [2],  // 点线的密度
        stroke: 'rgba(255, 0, 0, 0.25)',
        lineWidth: 2
      }
    });

    // 坐标轴配置（此处是为date对应的坐标轴进行配置）
    chart.axis('date', {
      label: function label(text, index, total) {
        const textCfg = {
          textAlign: 'center'
        };
        // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        textCfg.text = 'day: ' + text;  // textCfg.text 支持文本格式化处理
        return textCfg;
      }
    });
    // 点按照 x 轴连接成一条线，构成线图
    chart.line().position('date*value');

    // Step 4: 渲染图表
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }
});

2. 保存并编译之后，发现页面报错
   
3. 经过调试、查阅官方文档、官方issues等，发现是tooltip中 showXTip: true 和 showYTip: true 的问题，注释掉就不会报错
   
4. 关于如何显示 tooltip中 showXTip: true 和 showYTip: true 的问题，和微信小程序的方法不太一样，查阅了文档，暂时没有成功解决，各位大神如果有解决方案，欢迎评论留言