共计 3354 个字符，预计需要花费 9 分钟才能阅读完成。
数据可视化插件——AntV
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践
平常开发中大家都会接触一些数据可视化工具，常用的 echarts，Highcharts，D3 等。个人觉得 AntV 的 UI 好看一些，再加上 F2 是移动端可视化方案，所以就有了接下来的爬坑过程。
开始使用
vue 项目开发，我写的是折线面积图 + 滑动
下载
npm install @antv/f2 –save
直接引入就 ok
const F2 = require(‘@antv/f2’);
开始画图 创建 canvas, 指定 id
<canvas id=”myChart” width=”400″ height=”260″></canvas>
开始绘制
// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
{genre: ‘Sports’, sold: 275},
{genre: ‘Strategy’, sold: 115},
{genre: ‘Action’, sold: 120},
{genre: ‘Shooter’, sold: 350},
{genre: ‘Other’, sold: 150},
];
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: ‘myChart’,
pixelRatio: window.devicePixelRatio // 指定分辨率
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position(‘genre*sold’).color(‘genre’);
// Step 4: 渲染图表
chart.render();
嘿嘿，都是 copy 官网的
相关 API 使用
最常用的，毕竟其他的我也不会
Axis- 坐标轴配置 这个我主要用来自定义 X 轴 Y 轴内容。就那这个数据来举例吧
list: [
{“date”: “2018-08-08″,”record”: 166},
{“date”: “2019-01-01″,”record”: 174},
{“date”: “2019-01-02″,”record”: 166},
{“date”: “2019-01-03″,”record”: 166},
{“date”: “2019-01-05″,”record”: 187},
{“date”: “2019-01-06″,”record”: 189},
{“date”: “2019-01-17″,”record”: 156},
{“date”: “2019-04-18″,”record”: 231}
]
//date 为 X 轴，record Y 轴
chart.axis(‘date’, {
label: function label(text, index, total) {
var cfg = {
textAlign: ‘center’,// 定义样式
};
if (index === 0) {
cfg.textAlign = ‘start’;
cfg.text = ‘+’ + text;// 可以更改 X 轴数据格式等
cfg.fill = ‘#F5222D’;// 文字颜色
}
if (index > 0 && index === total – 1) {
cfg.textAlign = ‘end’;
}
return cfg;
}
});
// 定义 X 轴 Y 轴
var defs = {
date: {
type: ‘timeCat’,// 类型为日期
mask: ‘YY/MM/DD’,// 日期格式
tickCount: 4,// 区间，写几就有几个区间
},
record: {
tickCount: 5,
min: 0,// 轴的最小值 & 最大值
alias: ‘ 身高 ’// 定义这个轴是啥类型
}
};
chart.source(this.list, defs);// 载入数据
tooltip- 自定义提示 这一块没有研究透彻，自己看看吧链接
chart.tooltip(false)// 直接关闭，没任何提示
chart.tooltip({
showItemMarker: false,
onShow: function onShow(ev) {
// 自定义提示内容
var items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = items[0].value + “%”;
}
});
guide
chart.guide().text({
position: [‘min’, ‘max’],
content: ‘ 提示 ’,
style: {
textBaseline: ‘middle’,
textAlign: ‘start’
},
offsetY: -23,
offsetX: -25
});
就是这个东西
线，面积，点
// 先 X 轴后 Y 轴
chart.line().position(“date*record”).color(“#FFB024”);// 线
chart.area().position(“date*record”).style({fillStyle: “l(90) 0:rgba(255,202,106,1) 1:rgba(255,201,104,0.3)”,fillOpacity: 1});// 面积渐变色
chart.point().position(‘date*record’).color(‘red’);// 点
滑动 + 滚动条
手机上看图，如果 X 轴数据过多，都堆一起了，所以就用滑动了
// 引入
const ScrollBar = require(“@antv/f2/lib/plugin/scroll-bar”);
const pan = require(“@antv/f2/lib/interaction/pan”);
// 注册
var chart = new F2.Chart({
id: ‘myChart’,
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar, pan]
});
// 官网用法
// X 轴为 1955-2015，5 年一个区间，载入数据都时候定义一个最大最小都区间
chart.source(data, {
release: {
min: 1990,
max: 2010
}
});
chart.interaction(‘pan’);
// 定义进度条
chart.scrollBar({
mode: ‘x’,
xStyle: {
offsetY: -5
}
});
我的写法
// 因为我们 X 轴日期格式为 2019-01-01 这种 换算了一下
当数据大于五条当时候开始滑动
const a = 1000000000
var dataMap = data.map((item, index) => {
return {
date: index + a,
record: item.record
}
})
var min = a, max = a + 4, tickCount = 5;
if (dataMap.length > 5) {
tickCount = 5;
chart.scrollBar({
mode: “x”,
xStyle: {
backgroundColor: “#e8e8e8”,
fillerColor: “#808080”,
offsetY: -2
}
});
chart.interaction(“pan”);
}else if(dataMap.length == 1){
max = a;
tickCount = 2;
chart.point().position(“date*record”).color(“#FFB024”);
}else{
max = dataMap.length +a -1
tickCount = dataMap.length;
}
chart.source(dataMap,{
date: {
min:min,
max:max,
tickCount:tickCount
}
})
chart.axis(‘date’, {
label: function label(text, index, total) {
const cfg = {
textAlign: ‘center’
}
cfg.text = data[text-a].date
return cfg;
}
});
结语
第一次发文章，可能不是太好，希望大家喜欢，原谅我不会弄动图，所以没放效果图。
