vue+F2生成折线图的方法
作者：Upward Force
这篇文章主要为大家详细介绍了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: 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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。