釘釘小程式+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"
  }
}
           

test-mini-chart.axml 檔案

<view class="line">
  <line
    categories="{{categories}}"
    series="{{series}}"
    xAxis="{{xAxis}}"
    yAxis="{{yAxis}}"
    legend="{{legend}}"
    tooltip="{{tooltip}}"
  />
</view>
           

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() { },
});

           

test-mini-chart.acss 檔案

.line{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50%;
}