vue+F2生成折線圖的方法

npm install @antv/f2 --save

const F2 = require('@antv/f2');

<template>
  <div class="container">
    <canvas id="myChart"></canvas>
  </div>
</template>

<template>
  <div class="container">
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
const F2 = require("@antv/f2");

export default {
  name: "aaa",
  data() {
    return {
      chartData: [
        {
          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
        }
      ]
    };
  },
  created() {},

  methods: {
    drawChart() {
      var _this = this;
      // Step 1: 建立 Chart 物件
      const chart = new F2.Chart({
        id: "myChart",
        pixelRatio: window.devicePixelRatio // 指定解析度
      });

      // Step 2: 載入資料來源
      chart.source(_this.chartData, {
        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();
    }
  },

  components: {},

  mounted() {
    var _this = this;
    _this.drawChart();
  },

  computed: {},

  watch: {}
};
</script>

<style scoped>
.container {
    background-color: #fff;
}
#myChart {
    width: 100%;
    height: 260px;
}
</style>