前言AntVG2秉承自然、确定、意义、成长的设计价值观。与其他可视化插件不同，G2是一个数据驱动、高交互的可视化图形语法，具有很强的可用性和扩展性。随着业务可视化的不断发展，数据的复杂度越来越高。实现一个通用的可视化插件越来越迫切。本文实现了一个基于G2的可视化Vue插件-p-charts。提示：p-charts基于最新版的AnVG2v3.x，因为v3.x版本的文档更加成熟。后续升级沿用v4.x版本。目前p-charts只实现了p-pie（饼图）、p-bar（柱状图）、p-column（柱状图）、p-line-chart（折线图）。其他常用的图??形以后会扩展。案例点此快速开始安装npminstall-Sp-charts#oryarnaddp-chartsuse//main.jsimportPChartsfrom'p-charts'Vue.use(PCharts)case:piechart(p-pie)实现原理本文以p-pie饼图的实现为例。选项和数据p-charts的选项和数据作为道具传递。默认选项配置在组件中定义。defaultOptions:{//标题title:'',//图表本身的属性：宽度、高度等chartProps:{height:400},tooltipProps:{showTitle:false},//图形半径radius:0.7,//graphcolorlistcolorList:[],//字段映射fieldMap:{name:'budgetSubject',value:'budgetFinalNum'},//valueunitvalueUnit:'10,000'}结合mouted生命周期中的最新选项this.newOptions={...this.defaultOptions,...this.options}数据转换数据转换使用@antv/data-set进行转换，转换方式有很多种，如：数据过滤，字段过滤，数据处理，数据排序，以及子集获取、数据补全、数据百分比、数据统计、数据分箱等，具体使用方法参见Transform。本文中p-charts数据转换主要采用数据处理和数据百分比两种方式。数据转换：数据处理返回值为0的数据字段值为null或undefined。数据百分比：将数据百分比转换为类型百分比，统计每项数据的百分比。constds=newDataSet()constdv=ds.createView().source(data)dv.transform({type:'map',callback(row){if(row[valueOp]===null||row[valueOp]===undefined||isNaN(row[valueOp])){row[valueOp]=0}returnrow}}).transform({type:'percent',field:valueOp,dimension:nameOp,as:'percent'})分组聚合因为p-pie（饼图）没有分组聚合，所以这次我们以p-column（直方图）为例进行说明，案例demo-column3的分组聚合配置为：//组合字段（分组字段）groupField:'name',//录入字段（明细字段、图例字段）itemField:'time',//字段映射fieldMap:{time:'year',name:'budgetSubject',value:'budgetFinalNum'}fieldMap：主要用于字段映射，基本图形主要有3个字段。Timeline字段时间：主要用于坐标轴（直方图X轴，柱状图Y轴）单项或分组。这里的时间字段不一定表示时间，也可以是其他字段，比如部门。参考：案例demo-column3name字段名：主要用于图例或数据描述字段值字段值：表示哪个字段的值groupField：分组字段，主要用于组合分组，如demo-column3按部门字段分组。这里的配置值是fieldMap的key，不是valueitemField：入口字段（legendfield），表示数据值的字段描述，比如demo-column3中的每一项名称的支出。同样，这里的配置值是fieldMap的key，不是value。根据上面的描述，demo-column3的配置如下：分组：根据fieldMap中的时间字段进行分组，即按照部门（govDept）进行分组；entry字段为fieldMap中的name字段，为预算科目（subject）；value字段为：subtotal，即数据值。groupField:'time',itemField:'name',fieldMap:{time:'govDept',name:'subject',value:'subtotal'}，根据上述配置原则，demo-column2配置如下：groupField:'name',itemField:'time',fieldMap:{time:'outType',name:'subject',value:'outValue'}demo-bar2条形图，按年份分组如下：fieldMap:{time:'year',name:'budgetSubject',value:'budgetNum'}数据字段key重命名为了让图例说明更清晰，需要对图例字段进行映射。foldFields:['subtotal','outBase','outProject'],foldFieldsRename:{subtotal:'subtotal',outBase:'基本支出',outProject:'项目支出'}foldFields:主要重命名字段foldFieldsRename:rename名称地图重命名采用数据转换类型为fold（数据扩展），参考p-column，配置如下：dv.transform({type:'fold',fields:foldFieldsOp,key:this.newOptions.fieldMap[this.newOptions.itemField],value:valueOp})案例地址demo-column2其他选??项描述值单位valueUnit值单位主要用于提示信息值的计量单位。默认值为“一万”、“一”或“人”颜色列表,'#2c818f','#ff7730']图形基本选项chartProps图形基本选项包括：height,width,padding,background等，详见文档Chart图表chartProps:{height:500,padding:[50,120,100,120]}图例配置选项legendProps图例配置选项包括：position,title,background等，具体参考文档LegendlegendProps:{position:'bottom'}提示信息配置选项tooltipProps图例配置选项包括：showTitle、offset、itemTpl、crosshairs等，参考文档Tooltip提示信息tooltipProps:{showTitle:true}数据调整选项adjustProps参考文档adjustProps:[{type:'dodge',marginRatio:1/32}]图文配置选项labelProps图文选项配置with:offset,textStyle等，参考文档Label图形文字labelProps:{textStyle:{fill:'#0050b3',fontSize:'12',//fontWeight:'bold',rotate:-60}}X轴配置选项xFieldPropsaxis轴选项配置包括：title标题、坐标轴线、文本标签、刻度线tickLine、gridgrid等，参考文档Axis坐标轴默认配置如下：xFieldProps:{label:{textStyle:{rotate:16}}}Y坐标轴配置选项yFieldProps同上，默认配置如下：yFieldProps:{line:{lineWidth:2,lineDash:[3,3]},label:{textStyle:{fill:'#aaaaaa'}},title:{offset:60}}数据转换配置选项transformProps数据转换配置有很多种，请参考本文“数据转换”章节，参考文档Transform数据转换，默认配置为空：transformProps:[]p-map组件p-map组件是基于AntVL7包的行政区划填充地图。供参考，AntVL7目前只支持CountryLayer（中国地图），未来会不断完善优化，支持所有省市县地图配置选项场景配置选项chartProps参考文档场景默认配置如下：chartProps：{map:newMapbox({center:[116.2825,39.9],pitch:0,style:'blank',zoom:3,minZoom:0,maxZoom:10})}字段映射配置fieldMap参考章节“GroupAggregation”"在本文中，默认的conf结构如下：fieldMap:{name:'name',value:'num'}，作者合作交流Blog，欢迎合作交流。欢迎有兴趣的同学加入我们并提交问题。总结p-charts是一款基于AntVG2的Vue插件，极大的提高了数据可视化工作的效率，未来还会不断的扩展壮大。转载请注明：我的技术分享?基于AntVG2实现一个通用的可视化Vue插件
