AntV移动可视化F2个人使用总结

最近在做移动端App时，用到了AntV移动可视化F2，发现网上对F2使用的资料甚少。
通过F2的文档和自己的摸索，总结了几个常用图表以及常用功能的用法。

安装与引用

安装

打开项目所在的终端，输入以下命令
npm install @antv/f2 --save

//引用
import F2 from '@antv/f2';

chart对象的创建和基本配置

1、创建一个canvas元素(宽高可以在标签上设置，也可以在之后的chart对象中设置)

<canvas id="myChart" width="400" height="300"></canvas>

2、创建一个chart对象

const chart = new F2.Chart();

3、对chart对象进行自己想要的操作和配置

const chart = new F2.Chart({
				id: 'myChart', //指定canvas元素
				pixelRatio: window.devicePixelRatio, // 设置像素比
				width: 400, //画布的长(也可以直接在canvas标签上设置)
				height: 300, //画布的宽(同理)
				padding: [10, 10, 20, 30], //绘图区和图表边框的距离, 用来显示坐标轴文本、图例 。
				appendPadding: 10, //图表的外边距
			});

以下是之后渲染图表所用到的数据data

const data = [{
			name: '芳华',
			percent: 0.22,
			a: '1',
			date: '2017-06-04',
			value: 275
		}, {
			name: '妖猫传',
			percent: 0.05,
			a: '1',
			date: '2017-06-05',
			value: 115
		}, {
			name: '机器之血',
			percent: 0.33,
			a: '1',
			date: '2017-06-06',
			value: 120
		}, {
			name: '心理罪',
			percent: 0.17,
			a: '1',
			date: '2017-06-07',
			value: 350
		}, {
			name: '寻梦环游记',
			percent: 0.23,
			a: '1',
			date: '2017-06-08',
			value: 150
		}];

F2各函数介绍(常用的函数与函数中常用的属性)

source数据装载

//参数一: 需要渲染的数据  参数二: 对数据进行处理(Obj)。
chart.source(data, {
	percent: {
		tickCount: 7, //坐标轴刻度个数(具体看数据渲染是X轴还是Y轴, 来操作对应轴的刻度数)
		formatter(val) { //格式化数据
			return val*100 + '%'
		},
		ticks: [80, 100, 120, 140, 160], //指定坐标轴上刻度点的文本信息, 会按照 ticks 的个数和文本来显示(经测试, 仅对数值类字段有效)
	},
	date: {
		type: 'timeCat', //分三种类型: 1、linear: 数值类型; 2、cat: 分类类型(如: 男, 女); 3、timeCat: 时间类型。
		//range: [0, 1], //数据在画布的输出范围, 值为Array, 取值范围为0~1。
		mask: 'YYYY-MM', //用来格式化日期格式(只有type为timeCat时才可以)
	}
});

tooltip提示信息

chart.tooltip(false); //关闭提示信息
chart.tooltip({
	alwaysShow: true, //移出触发区域, 是否仍显示提示框内容(false)
	showTooltipMarker: true, //是否显示 tooltipMarker
	tooltipMarkerStyle: { //设置 tooltipMarker 的样式
		fill: 'red', //颜色
	},
	showItemMarker: true, //是否显示每条记录项前面的 marker
	itemMarkerStyle: { //设置每条记录项前面的 marker 的样式
		radius: 10,
		fill: 'green'
	},
	offsetX: 0, //X方向的偏移
	offsetY: 0, //Y方向的偏移
	triggerOn: ['touchstart', 'touchmove'], //tooltip 的触发行为
	triggerOff: 'touchend', //tooltip 消失的触发行为(与alwaysShow 同时设置时, alwaysShow会失效)
	showTitle: true, //是否展示标题(false)
	showCrosshairs: true, //是否显示辅助线
	crosshairsStyle: { //配置辅助线的样式
		stroke: 'rgba(0, 0, 0, 0.25)',
				lineWidth: 2
	},
	background: { //设置 tooltip 背景样式
		radius: 10,
		fill: 'yellow',
		padding: [ 6, 10 ]
	},
	titleStyle: { //tooltip 标题的文本样式
		fontSize: 24,
		fill: 'red',
		textAlign: 'start',
		textBaseline: 'top'
	},
	nameStyle: { //tooltip name 项的文本样式配置
		fontSize: 12,
		fill: 'skyblue',
		textAlign: 'start',
		textBaseline: 'middle'
	},
	valueStyle: { //tooltip value 项的文本样式配置
		fontSize: 24,
		fill: 'red',
		textAlign: 'start',
		textBaseline: 'middle'
	},
	crosshairsType: 'xy', //辅助线的种类 有三个值: 1、x 2、y(默认) 3、xy
	showXTip: true, //是否展示 X 轴的辅助信息
	showYTip: true, //是否展示 Y 轴的辅助信息
	xTip: { //配置 x 轴辅助信息的文本样式
		fontSize: 10, // 字体大小
		fill: '#1890ff', // 字体颜色
	},
	yTip(val) { //配置 y 轴辅助信息的文本样式
		// 返回值必须是对象
		return {
			val: val.toFixed(2),//这里随便写的, 如果是非 Number 类型会报错, 导致图标渲染失败！
		};
	},
	snap: true, //是否将辅助线准确定位至数据点
	onShow: function onShow(ev) { //点击显示详情
		const items = ev.items;
		items[0].name = null;
    	items[0].name = items[0].title;
    	items[0].value = '¥ ' + items[0].value;
	}
	});

Axis坐标轴配置

chart.axis(false); //不渲染坐标轴
chart.axis('date', { //渲染坐标轴(默认true) 参数一: 选择设置的字段(当前设置的为 x 轴)
	label: function(text, index, total) { //配置坐标轴文本(当值为回调函数时, 返回值必须为对象)
		//console.log(text, index, total);
		const textCfg = {};
		if (index === 0) {
			textCfg.textAlign = 'center'; //textAlign: 设置坐标文本在刻度线的位置
		} else if (index === total - 1) {
			textCfg.textAlign = 'center';
		}
		return textCfg;
	},
	line: { //配置坐标轴线
		top: false,
		stroke: 'red', //轴线颜色
		lineWidth: 1 //轴线粗细
	},
	labelOffset: 20, //坐标文本与轴线的距离
	tickLine: { //配置坐标轴刻度线样式
		lineWidth: 1, //刻度线宽度
		stroke: 'red', //刻度线颜色
		length: 5 //刻度线长度
	},
	grid: function(text, index, totle) { //配置坐标轴网格线(在极坐标下, 可通过配置 type: 'arc'; 绘制圆弧; 当值为回调函数时, 返回值必须为对象)
		console.log(text, index, totle);
		if(text === '2017-06-30') {
			return {
				stroke: 'yellow',
			}
		}
		return {
			stroke: 'green',
		}
	},
	position: 'bottom' //配置坐标轴显示位置(当配置 x 轴时, 默认为 bottom, 无法配置其他值)
})

Geometry几何标记对象，决定了图表的类型

//绘制线图
chart
.line({ //绘制折线图
	connectNulls: false //设置是否连接空数据(false)
}) 
.position('date*value') //由 date 和 value 两个属性决定图形位置, date 映射至 x 轴, value 映射至 y 轴
.shape('smooth') //设置数据映射到图形的形状(值可以为 String, Object 或带有返回值的 function) 当用在 line 后面时, 值有三个: 1、line: 直线(默认值) 2、dash: 虚线 3、smooth: 平滑线

//绘制填充阴影
chart
.area({ //填充坐标系与线图之间的区域图 (填充颜色的透明度默认不是1)
	startOnZero: true //设置 Y 轴的基线是否从 0 开始(true)
}) 
.position('date*value') //同上
.color('l(90) 0:#1890FF 1:#f7f7f7') //1、color('red'): 将图标渲染成指定颜色(非数据源字段); 2、color('date'): 将指定字段进行映射(使用内置颜色 注: 字段的值必须为字符串); 3、color('date', ['red']): 按指定颜色映射; 4、color('date', 'red-blue-green'): 使用渐变色映射; 5、color('l(0) 0:red 0.5:blue 1:yellow'): 使用渐变色(l中填渐变的角度)
.shape('smooth') //同上 当为用在 area 后面时, 值有两个: 1、area(默认) 2、smooth
.style({ //配置图形渲染的样式
	fillOpacity: 1, //填充颜色的透明度
	lineWidth: 1, //画笔线条的宽度
	//stroke: '#fff' //画笔的颜色
})
.size(10) //配置数据映射到图形的大小(值可以为 Number 或 字段名) (当图形受其他样式影响时, 会被覆盖: 权重不高)

//绘制柱状图与饼图
chart.interval() //笛卡尔坐标系时为柱状图, 极坐标系下为饼图、环图等
.adjust({ //几何标记对象调整数据;
	type: 'dodge', //type有两个值 1、stack: 层叠图 2、dodge: 分组图; 
	marginRatio: 0 //调整分组各柱子间的间距, 取值范围(0 ~ 1), 仅当 type = 'dodge' 时生效
})
.style({
    lineWidth: 2,
    stroke: '#fff',
    lineJoin: 'round',
    lineCap: 'round'
  });

注：chart.interval() 等返回的不是 chart 对象，而是一个 geom 几何标记对象 Geom。

Coordinate配置坐标系

chart.coord('polar', { //设置坐标系: 1、笛卡尔坐标系(rect即直角坐标系)(默认); 2、极坐标系(polar)
transposed: true, //坐标系翻转
startAngle: Math.PI, //极坐标的起始角度(值为弧度制)
endAngle: 2*Math.PI, //极坐标的结束角度(值为弧度制)
innerRadius: 0.5, //内圈的半径(绘制圆环时用到)
radius: 0.8, //圆的半径
})

Legend图例

注: color, size 这两个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例

chart.legend({ //设置图例 值为 false 关闭图例 当 color 映射某个字段时, 设置字段无效
	position: 'right', //设置图例的位置 'top'(默认)、 'right'、 'bottom'、 'left'
	align: 'center', //当 position 为 'top' 或 'bottom' 时生效, 值可设置为 'left'(默认)、 'center'、 'right'
	verticalAlign: 'top', //当 position 为 'left' 或 'right' 时生效, 值可设置为 'top'、 'middle'、 'bottom'
	itemWidth: 5, //设置每个图例的宽度(Number), 默认 auto
	showTitle: true, //是否显示图例标题(false)
	titleStyle: { //设置图例标题的样式
		textAlign: 'left', //文本对齐方式 
		fill: 'pink', // 文本的颜色
		fontSize: 18, // 文本大小
		fontWeight: 'bold', // 文本粗细
		textBaseline: 'middle' //文本基准线
	},
	offsetX: 5, //图例 x 方向的整体偏移(0)
	offsetY: 5, //图例 y 方向的整体偏移(0)
	titleGap: 15, //标题与图例的距离(12) 显示标题时生效
	itemMarginBottom: 15, //每个图例的下方留白(12)
	wordSpace: 5, //marker 与文本之间的距离(6)
	unCheckStyle: { //设置取消选中的图例 marker 以及文本的样式
		fill: 'red'
	},
	clickable: true, //是否允许点击(true)
	itemFormatter: function(val) { //格式化每项的文本
		return val.slice(0, 4)
	},
	marker: {
		symbol: 'circle', // marker 的形状
		radius: 5 // 半径大小
	}, //设置图例 marker 的样式 值为 String 类型时, 可选 square 或 circle(默认), 值为 Object 类型时, 可配置一些绘图属性
	nameStyle: { //设置图例项的文本样式
		fill: 'skyblue',
		fontSize: 12
	},
	selectedMode: 'single', //设置图例的选中模式 multiple(多选默认) 或 single(单选)
})

Animate动画机制

chart.animate({ //配置动画效果 值为 false 时, 关闭动画效果
	appear: { //出场动画配置
		animation: 'fadeIn', //执行的具体动画(内置的动画名或 Function)
		easing: 'bounceOut', //动画缓动函数(内置的动画名或 Function)
		delay: 0.5, //动画延迟执行时间 单位 ms
		duration: 1200 //动画执行时间 单位 ms
	},
	update: {}, //更新动画配置(参数同appear)
	enter: {}, //图表发生数据变更时，新进场的元素动画配置(参数同appear)
	leave: {} //离场动画配置(参数同appear)
	});

具体动画效果请参考F2文档

pieLabel用于绘制饼图文本的插件

chart.pieLabel({ //绘制饼图文本的插件
	sidePadding: 30, //文本与画布左右的距离(Number)
	anchorOffset: 2, //锚点的偏移量
	anchorStyle: { //锚点的样式
		fill: '', //锚点的颜色(String)
	},
	inflectionOffset: 2, //拐点的偏移量
	skipOverlapLabels: true, //是否忽略重叠文本(false)
	activeShape: true, //图形被选中的时, 是否激活图形(false)
	activeStyle: { //激活图形的样式
		offset: -1, //激活光环偏移距离
		fillOpacity: 1, //激活光环的填充透明度
		appendRadius: 4 //激活光环大小
	},
	lineStyle: { //连接线的样式
		stroke: 'rgba(255,0,0,0.3)', //设置画笔的颜色(#000)
	},
	lineHeight: 2, //文本的行高(Number)
	label1: function (data) { //默认连接线上方的文本(带返回值的函数, 返回值必须为 Object), 位置可通过 label1OffsetY 调整
		return {
			text: '￥' + data.money, //展示的文本
			fill: '#343434', //文本颜色
			fontWeight: 'bold' //字体样式
			textAlign: 'end' //字体位置
		}
	},
	label1OffsetY: 10, //label1与连接线垂直方向的偏移, 位置可通过 label2OffsetY 调整
	label2: function(data) { //默认连接线下方的文本(配置与label1相同)
		return {
	      text: data.type,
	      fill: '#999',
	      offset: 10, //会被外部的 label2OffsetY 覆盖
	      textAlign: 'end',
		};
	},
	label2OffsetY: 10, //label2与连接线垂直方向的偏移
	onClick: function(ev) { //点击事件 ev(事件对象)       ev: { chart: {}, dat: {}, native: {}, type: 'click', x: 339, y: 67}
		const data = ev.data; //被点击图形的原始数据
		if (data) {
			$('#title').text(data.type);
			$('#money').text(data.money);
		}
	}
});

注: 当锚点的偏移量和拐点的偏移量相等时，连接线会变成一条直线

Guide绘制图表的辅助元素

data.forEach(function(obj) {
	chart.guide().text({
	    position: [ obj.action, 2.5 ],
	    content: (obj.percent * 100).toFixed(0) + '%',
	    style: {
	      textBaseline: 'middle',
	      textAlign: 'center',
	      fill: '#fff'
	    }
	  });
	 chart.guide().html({
	   position: [ '41%', obj.total*19+ 2 +'%'],
	   alignX: 'left',
	   alignY: 'bottom',
	   offsetX: 25,
	   html: `<div style="flex-direction: row;align-items: center;display: flex;"><div style="height:0.5px;background-color:#999999;width:150px;"></div><div style="margin-left:0px;font-size: 12px;color:#666666;text-align: left;white-space:nowrap;flex-direction: row;align-items: center;display: flex;"><div style="margin-left:10px;padding-right: 0px;width:80px">${obj.action}</div></div></div>`,
	 });
 }

结尾

由于项目中只用到了这几个常用的图标，所以才看了看，顺便总结了一下。
如果有描述不准确的地方，欢迎留言指正！