Antv F2可视化文档的使用（uniapp调用）
最近在做移动端uniapp项目时时，用到了AntV移动可视化F2，发现网上对F2使用方法甚少。
通过F2的文档和自己的摸索练习，总结了几个常用图表以及常用功能的用法。
Antv F2移动端可视化使用方法个人总结
uniapp移动端安装与引用（多端使用）
- 安装与引用
- chart对象的创建和基本配置
- F2各函数介绍(常用的函数与函数中常用的属性)
- source数据装载
- tooltip提示信息
- Axis坐标轴配置
- showTooltip默认激活坐标数据位置
- Geometry几何标记对象，决定了图表的类型
- Coordinate配置坐标系
- Legend图例
- Animate动画机制
- pieLabel用于绘制饼图文本的插件
- Guide绘制图表的辅助元素
一、安装与引用
1.1首先建一个uniapp项目，这里我不多做解释了
1.2其次在HBuliderX导入AntvF2封装好的组件
1.2.1HBuliderX导入地址
//导入插件地址
https://ext.dcloud.net.cn/plugin?id=46131.2.2页面局部引用
//局部引入插件
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
二、chart对象的创建和基本配置
1、创建一个canvas元素(宽高可以在标签上设置）
2、创建一个chart对象
const chart = new F2.Chart(config);3.以下是之后渲染图表所用到的数据data
//定义初始化数据
data: [{
day: '周一',
value: 300
}, {
day: '周二',
value: 400
}, {
day: '周三',
value: 350
}, {
day: '周四',
value: 500
}, {
day: '周五',
value: 490
}, {
day: '周六',
value: 600
}, {
day: '周日',
value: 900
}]三、F2各函数介绍(常用的函数与函数中常用的属性)
1.source数据装载
// 1.source数据装载
chart.source(this.data, { //参数一: 需要渲染的数据 参数二: 对数据进行处理(Obj)。
value: {
tickCount: 4, //坐标轴刻度个数(具体看数据渲染是X轴还是Y轴, 来操作对应轴的刻度数)
min: 0, //初始化值从多少开始
max: 1200, //初始化最大值
formatter(val) { //格式化数据为y轴加单位
return val * 1 + '元'
},
ticks: [200, 400, 600, 800, 1000,
1200
], //指定坐标轴上刻度点的文本信息, 会按照 ticks 的个数和文本来显示(经测试, 仅对数值类字段有效) //指定y轴坐标刻度会覆盖上面的显示内容
},
day: {
range: [0, 1]
}
});2.tooltip提示信息
//2.tooltip提示信息
chart.tooltip(false); //关闭提示信息
chart.tooltip({
alwaysShow: true, //移出触发区域, 是否仍显示提示框内容(false) 就是点击了一下离开是否仍然显示
showTooltipMarker: true, //是否显示 tooltipMarker（false） 就是说是否显示点击后的标记数据点
tooltipMarkerStyle: { //设置 tooltipMarker 的样式 （#fff） 就是说点击后的标记数据点的颜色
fill: 'red', //颜色
},
showItemMarker: true, //是否显示每条记录项前面的 marker （true） 就是说是否显示提示窗前面的颜色标识
itemMarkerStyle: { //设置每条记录项前面的 marker 的样式（默认是线条的颜色） 就是说提示窗前的颜色标识样式以及大小
radius: 4,
fill: 'green'
},
offsetX: 0, //X方向的偏移 提示框偏移位置
offsetY: 0, //Y方向的偏移 提示框偏移位置
triggerOn: ['touchstart', 'touchmove'], //tooltip 的触发行为
triggerOff: 'touchend', //tooltip 消失的触发行为(与alwaysShow 同时设置时, alwaysShow会失效)
showTitle: true, //是否展示标题(false)
showCrosshairs: true, //是否显示辅助线 （false）
custom: false, //是否显示点击提示窗的值 （false） true不显示
crosshairsStyle: { //配置辅助线的样式
stroke: 'rgba(199, 199, 199, 0.2)', //辅助线的线条的背景颜色
lineWidth: 2, //辅助线的线条宽度
lineDash: [2] //xy轴垂直竖直虚线每段dash的宽度
},
background: { //设置 tooltip 背景样式
radius: 10, //提示框背景框的圆角
fill: 'rgba(0,0,0,0.6)', //提示框背景填充颜色
padding: [6, 10] //边距
},
titleStyle: { //tooltip 标题的文本样式
fontSize: 14, //提示窗标题字体大小
fill: 'red', //提示窗标题字体颜色
textAlign: 'start',
textBaseline: 'top'
},
nameStyle: { //tooltip name 项的文本样式配置
fontSize: 12, //name文本字体大小
fill: 'skyblue', //name文本字体颜色
textAlign: 'start',
textBaseline: 'middle'
},
valueStyle: { //tooltip value 项的文本样式配置
fontSize: 14, //数据值字体大小
fill: '#fff', //文本值字体颜色
textAlign: 'start',
textBaseline: 'middle'
},
crosshairsType: 'xy', //辅助线的种类 有三个值: 1、x 2、y(默认) 3、xy
showXTip: true, //是否展示 X 轴的辅助信息
showYTip: false, //是否展示 Y 轴的辅助信息
xTip: { //配置 x 轴辅助信息的文本样式
fontSize: 14, // 字体大小
// fill: '#1890ff', // 字体颜色
},
yTip(val) { //配置 y 轴辅助信息的文本样式
// 返回值必须是对象
console.log(val, typeof(val))
// const value = parseInt(val) //进行字符串转化
// console.log(value, typeof(value))
// return {
// val: value.toFixed(2), // 如果是非 Number 类型会报错, 导致图标渲染失败！
// };
},
snap: false, //是否将辅助线准确定位至数据点
onShow: function onShow(ev) { //点击显示详情
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
},
});3.Axis坐标轴配置
3.1 X轴Axis坐标配置
// 3.Axis X轴坐标轴配置
chart.axis('day', false); //不绘制x轴坐标 （默认true）
chart.axis('day', { //渲染坐标轴(默认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';
}
const cfg = {
fontSize: 12,
stroke: 'rgba(110, 118, 36, 0.8)'
}; //改变x轴坐标字体颜色 以及字体大小
return textCfg, cfg;
},
line: { //配置坐标轴线
top: false,
stroke: '#b9b9b9', //轴线颜色
lineWidth: 1 //轴线粗细
},
labelOffset: 10, //坐标文本与轴线的距离
tickLine: { //配置坐标轴刻度线样式 （默认false 不显示）
lineWidth: 1, //刻度线宽度
stroke: 'red', //刻度线颜色
length: 0 //刻度线长度
},
// grid: function(text, index, totle) { //配置坐标轴网格线(在极坐标下, 可通过配置 type: 'arc'; 绘制圆弧; 当值为回调函数时, 返回值必须为对象) （如果不配置则不显示）
// console.log(text, index, totle);
// if(text === '周一') { //判断
// return {
// stroke: 'yellow',
// }
// }
// return {
// stroke: 'green',
// }
// },
position: 'bottom' //配置坐标轴显示位置(当配置 x 轴时, 默认为 bottom, 无法配置其他值)
})3.2 Y轴Axis坐标配置
//4.Axis Y轴坐标轴配置
chart.axis('value', { //更改y轴坐标数据显示颜色以及字体大小
label: function label(text, index, total) {
const cfg = {
fontSize: 12,
stroke: 'rgba(118, 118, 118, 0.8)'
}; //改变x轴坐标字体颜色 以及字体大小
return cfg;
},
line: { //配置坐标轴线 （默认false，不配置就是false）
top: false,
stroke: '#b9b9b9', //轴线颜色
lineWidth: 0 //轴线粗细
},
labelOffset: 4, //坐标文本与轴线的距离
tickLine: { //配置坐标轴刻度线样式 （默认false 不显示）
lineWidth: 1, //刻度线宽度
stroke: 'red', //刻度线颜色
length: 0 //刻度线长度
},
grid: function(text, index,
totle
) { //配置坐标轴网格线(在极坐标下, 可通过配置 type: 'arc'; 绘制圆弧; 当值为回调函数时, 返回值必须为对象) （y轴如果不配置则默认显示#fff）
return {
stroke: '#354154',
}
},
position: 'left' //配置坐标轴显示位置(当配置 y 轴时, 默认为 left, 只能配置left或right无法配置其他值)
});4.showTooltip默认激活坐标数据位置
// 显露默认选中
const point = chart.getPosition(this.data[1]) //默认激活的状态下标
chart.showTooltip(point) //展示提示符5.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() //笛卡尔坐标系时为柱状图, 极坐标系下为饼图、环图等
.position('a*percent')
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']) //配置的颜色
.adjust({
type: 'stack', //type有两个值 1、stack: 层叠图 2、dodge: 分组图;
marginRatio: 0 //调整分组各柱子间的间距, 取值范围(0 ~ 1), 仅当 type = 'dodge' 时生效
})
.style({
lineWidth: 0, //分割线宽度
stroke: '#fff', //分割线的颜色
lineJoin: 'round',
lineCap: 'round'
})
.animate({ 配置动画效果 值为 false 时, 关闭动画效果
appear: { //出场动画配置
duration: 1200, //动画的秒数
delay: 0.2, //动画延迟执行时间 单位 ms
easing: 'bounceOut', //动画缓动函数(内置的动画名或 Function)
}
});
//默认显示数据点
// chart.point().position('day*value').style({ //point()表示的原点指示的方法 .style可以更改原点的边框颜色和知指示点的大小
// stroke: '#fff',
// lineWidth: 1
// });
折线图
层叠图分割线为0
分组图分割线为0
6.Coordinate配置坐标系
chart.coord('polar', { //设置坐标系: 1、笛卡尔坐标系(rect即直角坐标系)(默认); 2、极坐标系(polar)
transposed: true, //坐标系翻转
startAngle: Math.PI, //极坐标的起始角度(值为弧度制)
endAngle: 2*Math.PI, //极坐标的结束角度(值为弧度制)
innerRadius: 0.5, //内圈的半径(绘制圆环时用到)
radius: 0.8, //圆的半径
})
极坐标图环形图
7.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(单选)
})
legend图例
8.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文档
9.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);
}
}
});
饼状图点击激活
10.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: `${obj.action}`,
});
}