H5端vue2使用antv f2记录

是祈安呐

已于 2023-05-30 16:46:12 修改

阅读量579

点赞数

分类专栏：学习笔记文章标签： javascript 开发语言前端

于 2023-05-30 16:44:56 首次发布

本文链接：https://blog.csdn.net/Ariel_lj/article/details/130950584

版权

学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

附上3.x版本官网飞机票

npm引入依赖包：npm install @antv/f2 --save 注意vue2我这里使用的3.8.11版本

main.js中引用注册：

import F2 from '@antv/f2';
Vue.prototype.F2 = F2;

创建一个容器，给定宽高

<div style="width: 100%; height: 300px">
	<canvas id="LineChart" style="width: 100%; height: 100%"></canvas>
</div>

定义数据集合

list: [
		{
			mouth: "当月",
			sales: 100,
		},
		{
			mouth: "上月",
			sales: 200,
		},
		{
			mouth: "3月",
			sales: 300,
		},
		{
			mouth: "2月",
			sales: 40,
		},
		{
			mouth: "1月",
			sales: 100,
		},
		{
			mouth: "12月",
			sales: 260,
		},
	]

初始化图表

mounted() {
	this.initChart();
},
methods: {
	initChart() {
		const chart = new this.F2.Chart({
			id: "LineChart",
			pixelRatio: window.devicePixelRatio,
		});

		chart.source(this.list);
		chart.tooltip({
			showCrosshairs: true,
		});
		chart.scale({
			mouth: {
				range: [0, 1],
			},
			sales: {
				tickCount: 5,
				min: 0,
			},
		});
		chart.axis("mouth", {
			label: function label(text, index, total) {
				const textCfg = {};
				if (index === 0) {
					textCfg.textAlign = "left";
				} else if (index === total - 1) {
					textCfg.textAlign = "right";
				}
				return textCfg;
			},
		});
		chart.area().position("mouth*sales");
		chart.line().position("mouth*sales");
		chart.render();
	},
}