源码搜藏网

本文实例为大家分享了vue+F2生成折线图的具体代码，供大家参考，具体内容如下

1、效果图

2、打开命令窗口，通过 npm 安装F2

npm install @antv/f2 --save

3、使用 import 或 require 引入F2

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

4、在页面上创建一个具备宽高的 canvas 标签，并指定 id：

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

5、编写图表绘制代码

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。