数据可视化插件——AntVAntV是蚂蚁金服新一代数据可视化解决方案，致力于提供一套简单、方便、专业、可靠、无限的数据可视化解决方案。可能的数据可视化最佳实践。大家会接触到一些数据可视化工具，常用的echarts、Highcharts、D3等，个人觉得AntV的UI更好看，F2是移动端的可视化方案，所以才有了下一个爬坑的过程.开始使用vue项目开发，我写了折线面积图+幻灯片下载npminstall@antv/f2--save直接importokconstF2=require('@antv/f2');开始绘制创建画布，指定id开始绘制//F2对数据源格式的要求只是一个JSON数组，每个元素数组的是一个标准的JSON对象。constdata=[{genre:'Sports',sold:275},{genre:'Strategy',sold:115},{genre:'Action',sold:120},{genre:'Shooter',售出:350},{genre:'Other',sold:150},];//第一步：创建图表对象constchart=newF2.Chart({id:'myChart',pixelRatio:window.devicePixelRatio//指定分辨率});//Step2:加载数据源chart.source(data);//Step3:创建图文法，绘制直方图，图位置由genre和sold两个属性决定，genre映射到x轴，sold映射到y轴chart.interval().position('genre*sold').color('genre');//第4步：渲染图表chart.render();哎，是copy官网相关的最常用的API了，毕竟其他的Axis-axis配置我就不知道了。我主要用这个来自定义X轴和Y轴的内容。以此数据为例列表：[{"date":"2018-08-08","re??cord":166},{"date":"2019-01-01","re??cord":174},{“日期”：“2019-01-02”，“记录”：166}，{“日期”：“2019-01-03”，“记录”：166}，{“日期”：“2019-01-05","re??cord":187},{"date":"2019-01-06","re??cord":189},{"date":"2019-01-17","re??cord":156},{"date":"2019-04-18","re??cord":231}]//日期为X轴，记录Y轴chart.axis('date',{label:functionlabel(text,index,total){varcfg={textAlign:'center',//定义样式};if(index===0){cfg.textAlign='start';cfg.text='+'+text;//可以更改X轴数据格式等cfg.fill='#F5222D';//文本颜色}if(index>0&&index===total-1){cfg.textAlign='end';}returncfg;}});//定义X轴Y轴vardefs={date:{type:'timeCat',//类型为日期mask:'YY/MM/DD',//日期格式tickCount:4,//interval，想写多少就写多少interval},record:{tickCount:5,min:0,//坐标轴的最小值和最大值alias:'height'//定义坐标轴的类型}};chart.source(this.list,defs);//加载数据tooltip-自定义提示这块没研究透，自己看直接链接chart.tooltip(false)//关闭，没有任何提示chart.tooltip({showItemMarker:false,onShow:functiononShow(ev){//自定义提示内容varitems=ev.items;items[0].name=null;items[0].name=items[0].title;items[0].value=items[0].value+"%";}});guidechart.guide().text({position:['min','max'],content:'prompt',style:{textBaseline:'middle',textAlign:'start'},offsetY:-23,offsetX:-25});这是线，面积，点//先是X轴，再是Y轴("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轴数据太多，全部堆起来，所以用Sliding//引入constScrollBar=require("@antv/f2/lib/plugin/scroll-bar");constpan=require("@antv/f2/lib/interaction/pan");//注册varchart=newF2.Chart({id:'myChart',pixelRatio:window.devicePixelRatio,plugins:[ScrollBar,pan]});//官网usage//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-01this经过一次转换，当数据大于5时，开始滑动consta=1000000000vardataMap=data.map((item,index)=>{return{date:index+a,record:item.record}})varmin=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");}elseif(dataMap.length==1){max=a;tickCount=2;图表.point().position("日期*记录").color("#FFB024");}else{max=dataMap.length+a-1tickCount=dataMap.length;}chart.source(dataMap,{date:{min:min,max:max,tickCount:tickCount}})chart.axis('date',{label:functionlabel(text,index,total){constcfg={textAlign:'center'}cfg.text=data[text-a].datereturncfg;}});最后结语有时间发一篇文章，可能不是很好，希望大家喜欢，见谅我不会做动画，所以没发效果图
