vue+F2生成折线图的方法

本文实例为大家分享了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:www.easck.com 116    },    {     date: "2017-06-06",     value: 129    },    {     date: "2017-06-07",     value: 135    },    {     date: "2017-06-08",     value: 86    },  mJXRBnx  {     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%;  www.easck.comheight: 260px;}</style>

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