移动端F2
官方文档地址：https://www.yuque.com/antv/f2
使用局限：ios系统，可能出于性能限制，最多可画2000多像素的图，我的图标大概300px，最多能展示7张图，超过渲染不出来，不报错。无语😓。安卓机也有限制，但是较宽松，基本不会超出。ios目前没有查出解决方法，有解决方法的大佬可以给我留言呀，共同进步。
第一步：各种渠道的下载安装方式，不懂得自行到官网下载安装；
第二步：基础设置
html
<canvas id='main' width="200%" height="300px"></canvas> //指定id，宽高
const data = [
{ date: '09-01', value: 275, type: '测试1' },
{ date: '09-02', value: 115 , type: '测试1'},
{ date: '09-01', value: 120 , type: '测试2'},
{ date: '09-02', value: 350 , type: '测试2'},
{ date: '09-01', value: 150, type: '测试3' },
{ date: '09-02', value: 150, type: '测试3' },
];
chart = new F2.Chart({
id: ‘main’,
pixelRatio: window.devicePixelRatio //指定分辨率
});
//设置渲染数据
chart.source(data, {
date: {
range: [0, 1], //不写坐标点中间会断裂，写了更平滑
tickCount: 8 //横坐标展示几个坐标点
}
});
横坐标多的可以设置滚动条，
chart.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: "#e8e8e8",
fillerColor: "#808080",
offsetY: -60
}
})
我本来是做了滚动条，但是opp和vivo系列的手机，渲染了滚动条一滑动屏幕直接黑掉了，也是很无语。猜测是性能问题，根本画不过来，直接把手机爆了。小米和苹果，华为没有这种问题。如果想解决可以尝试设置两个div，外层div屏幕痛宽，内层div足够宽可以一次性全部画出来，外层div出滚动条，模拟出现滚动条，不过会有坐标轴也跟着移动。试过echarts，没有出现黑屏这个问题，但是也会有滑动滚动条不流畅页面卡死的问题。实在不行，说服产品改需求吧。
第三步：渲染
我用的折线图
chart.line().position('date*value').color('type');
chart.render();
position里面传横坐标和纵坐标字段，color可以设置根据什么字段来区分线条颜色，可以根据UI设置各线条颜色。
详情参考官网。
第四步：其他设置
//图例设置，再详细可以参考官网
chart.legend({
position: 'bottom',
align: 'left',
itemWidth: null,
nameStyle: {
fontSize: 25, // 文本大小
},
itemGap: 22,
offsetY: 20
});
//设置坐标轴
this.chart.axis(value, {
line: {//坐标轴线
lineWidth: 0.5,
stroke: '#E4F4FF',
top: false
},
grid: (text,) => {//坐标轴网格线
return {
stroke: 'rgba(0,174,102,0.1)',
top: false,
opacity: 0.5
}
},
label: function label() { //坐标轴文本
return {
fontSize: 25,
fontFamily: 'PingFangSC-Regular'
};
}
});
//设置手指点击图，出现的说明框
this.chart.tooltip({
offsetY: 60,
showCrosshairs: true,
crosshairsStyle: {
stroke: 'rgba(0, 0, 0, 0.25)'
},
nameStyle: {
fontSize: 25,
fill: '#fff',
textAlign: 'start',
textBaseline: 'middle'
},
valueStyle: {
fontSize: 25,
fill: '#fff',
textAlign: 'start',
textBaseline: 'middle'
}
});
以上设置的nameStyle为标题，valueStyle为内容。
第五步：修改，重绘
chart.source(newData, {
date: {
range: [0, 1],
tickCount: 8
}
});
chart.repaint();
自此，一个完整的图表就渲染就完成了。
注意：网上有chart.clear(),清除图表，没有效果，还会报错，找不到这个方法。还有人在repaint后面又加了一行chart.render(),亲测会在图上多绘制一次，出现重影。
另：如非特殊需求，尽量不要在移动端图形出现滚动条，血的教训，卡死你没商量。如果你是用数据驱动结构的框架，比如，react和vue这种，不要在切换数据的时候将chart组件移除，有数据重新创建，这对于canvas相当于又占了一次像素，没几次你的苹果手机就占满全部canvas允许的像素而白屏了。
虽然文章的文档写的不是很全，但是也可以给大家一个指引，想设置什么可以跟着我的说明自己去找文档，节约点时间。毕竟antv的文档一言难尽。。。。。。
