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

参考文档：mini-chart

1、效果图

2、在GitHub上下载 mini-chart 组件，得到 mini-chart-master 文件

3、首先，将 mini-chart-master/components 文件下的 line 组件，拷贝到自己项目的 mini-chart 目录中

4、然后发现，line 组件依赖于 @antv/my-f2.js、…/mixins/methods.js、…/util.js，分别找到对应文件中对应的js，拷贝到自己项目的 mini-chart 目录中




5、最终得到，自己项目的 mini-chart 目录如下

7、到此为止，准备工作就做好了，下面开始创建折线图
test-mini-chart.json 文件

{
  "usingComponents": {
    "line": "../../mini-chart/line/index"
  }
}
1
2
3
4
5

test-mini-chart.axml 文件

<view class="line">
  <line
    categories="{{categories}}"
    series="{{series}}"
    xAxis="{{xAxis}}"
    yAxis="{{yAxis}}"
    legend="{{legend}}"
    tooltip="{{tooltip}}"
  />
</view>
1
2
3
4
5
6
7
8
9
10

test-mini-chart.js 文件

Page({
  data: {
    categories: ['2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'],
    series: [
      {
        type: 'a',
        style: 'dash',
        point: {
          size: 3,
          stroke: '#F00',
          lineWidth: 1,
        },
        data: [116, 129, 135, 86, 73, 85, 73, 68, 92, 130, 245, 139, 115, 111, 309, 206, 137, 128, 85, 94, 71, 106, 84, 93, 85, 73, 83, 125, 107, 82, 44, 72, 106, 107, 66, 91, 92, 113, 107, 131, 111, 64, 69, 88, 77, 83, 111, 57, 55, 60],
      },
      {
        type: 'b',
        color: '#93F',
        style: 'smooth',
        data: [60, 55, 57, 111, 83, 77, 88, 69, 64, 111, 131, 107, 113, 92, 91, 66, 107, 106, 72, 44, 82, 107, 125, 83, 73, 85, 93, 84, 106, 71, 94, 85, 128, 137, 206, 309, 111, 115, 139, 245, 130, 92, 68, 73, 85, 73, 86, 135, 129, 116],
      },
    ],
    xAxis: {
      type: "timeCat", // 指定date字段为时间类型
      range: [0, 0.8], // 占x轴80%
      tickCount: 3 // 坐标轴上刻度点的个数
    },
    yAxis: {
      tickCount: 10, // 坐标轴上刻度点的个数
      min: 50, // 手动指定value字段最小值
      max: 350 // 手动指定value字段最大值
    },
    legend: {
      position: 'top',
      offsetY: 5
    },
    tooltip: {
      showTitle: true,
      showCrosshairs: true,
      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
      }
    },
  },
  onReady() { },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

test-mini-chart.acss 文件

.line{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50%;
}
1
2
3
4
5
6
7