前言
AntV G2保持天然、确定性、意义感、成长性的设计价值观。与其余可视化插件不同的是，G2是以数据驱动的高交互可视化图形语法，具备高度的易用性和可扩展性。
随着业务可视化一直倒退，数据复杂度越来越高。实现一个通用的可视化插件越来越迫切。本文基于G2实现了一个可视化Vue插件——p-charts。
提醒：p-charts是基于AnV G2 v3.x最新版本，因为v3.x版本文档比拟成熟。后续会紧跟v4.x版本进行降级。
目前，p-charts只实现了p-pie（饼图）、p-bar（条形图）、p-column（柱状图）、p-line-chart（折线图）。后续会对罕用其余图形进行扩大。
案例
点这里
疾速开始
装置
npm install -S p-charts# oryarn add p-charts应用
// main.jsimport PCharts from 'p-charts'Vue.use(PCharts)案例：饼图（p-pie）
<template> <p-pie :data="PieJson" :options="options" ref="pieRef" @pie-title-click="handleTitleClick" @pie-label-click="handleLabelClick" /></template><script>import PieJson from './data/pie1.json'export default { data() { return { PieJson, options: { fieldMap: { time: 'year', name: 'budgetSubject', // 统计指标，能够更换 value: 'budgetNum' }, title: `总收入和总支出占比状况-估算数（单位：万元）`, colorList: ['#1890ff', '#37c661'] } } }, methods: { updateData() { this.$refs.pieRef.initData() }, handleTitleClick() { console.log('title-click') }, handleLabelClick(data) { console.log('label-click', data) } }}</script>实现原理
本文以p-pie饼图实现为例。
选项和数据
p-charts的选项和数据采纳props传递。组件中定义默认选项配置。
defaultOptions: { // 题目 title: '', // chart自身属性：width,height等 chartProps: { height: 400 }, tooltipProps: { showTitle: false }, // 图形半径 radius: 0.7, // 图形色彩列表 colorList: [], // 字段映射 fieldMap: { name: 'budgetSubject', value: 'budgetFinalNum' }, // 值单位 valueUnit: '万元'}在mouted生命周期中组合最新的选项
this.newOptions = { ...this.defaultOptions, ...this.options }数据转换
数据转换采纳@antv/data-set进行转换，转换形式十分多，比方：数据过滤、字段过滤、数据加工、数据排序、获取子集、数据补全、数据百分比、数据统计、数据分箱等，具体阐明及应用参考Transform。
本文p-charts数据转换次要采纳两种：数据加工和数据百分比。
- 数据转换：数据加工对数据字段值为null或undefined的值进行归0解决。
- 数据百分比：数据百分比转换为类型percent，统计每项数据的百分比。
const ds = new DataSet()const dv = ds.createView().source(data)dv.transform({ type: 'map', callback(row) { if ( row[valueOp] === null || row[valueOp] === undefined || isNaN(row[valueOp]) ) { row[valueOp] = 0 } return row }}).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：次要用于字段映射，根本图形次要有三个字段。
- 工夫线字段time：次要用于坐标轴（柱状图X轴，条形图Y轴）单项或分组这里的time字段不肯定示意工夫，有可能是其余字段，如部门，参考：案例demo-column3
- 名称字段name：次要用于图例或数据阐明字段
- 值字段value：示意哪个字段的值
- groupField：分组字段，次要用于组合分组，如demo-column3依据部门字段分组。这里的配置值是fieldMap的key，而不是value
- itemField：条目字段（图例字段），示意数据值的字段阐明，如demo-column3中每一项名称的收入。同样，这里的配置值是fieldMap的key，而不是value
依据以上阐明，demo-column3配置如下：
分组：依据fieldMap中的time字段分组，即依据部门（govDept）分组；
条目字段为fieldMap中的name字段，即估算科目（subject）；
值字段为：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: '小计', outBase: '根本收入', outProject: '我的项目收入'}- foldFields：次要重命名的字段
- foldFieldsRename：重命名映射
重命名采纳数据转换类型为fold（数据开展），参考p-column，配置如下：
dv.transform({ type: 'fold', fields: foldFieldsOp, key: this.newOptions.fieldMap[this.newOptions.itemField], value: valueOp})案例地址demo-column2
其余选项阐明
值单位valueUnit
值单位次要用于提示信息值的计量单位。默认值为“万元”、“个”或“人”
色彩列表colorList
colorList: ['#ff786b', '#0fdd7e', '#bc9dfb', '#ff2e6a', '#7effa2', '#e57ec0', '#2c818f', '#ff7730']图形根本选项chartProps
图形根本选项有：height、width、padding、background等，具体参考文档Chart图表
chartProps: { height: 500, padding: [50, 120, 100, 120]}图例配置选项legendProps
图例配置选项有：position、title、background等，具体参考文档Legend图例
legendProps: { position: 'bottom'}提示信息配置选项tooltipProps
图例配置选项有：showTitle、offset、itemTpl、crosshairs等，参考文档Tooltip提示信息
tooltipProps: { showTitle: true}数据调整选项adjustProps
参考文档
adjustProps: [ { type: 'dodge', marginRatio: 1 / 32 }]图形文本配置选项labelProps
图形文本选项配置有：offset、textStyle等，参考文档Label 图形文本
labelProps: { textStyle: { fill: '#0050b3', fontSize: '12', // fontWeight: 'bold', rotate: -60 }}X坐标轴配置选项xFieldProps
坐标轴Axis选项配置有：题目title、坐标轴线line、文本label、刻度线tickLine、网格grid等，参考文档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组件是基于AntV L7封装的行政区划填充图，参考AntV L7
目前只反对CountryLayer（中国地图），后续会持续欠缺优化，反对各省市区县地图
配置选项
场景Scene配置选项chartProps
参考文档场景Scene
默认配置如下：
chartProps: { map: new Mapbox({ center: [116.2825, 39.9], pitch: 0, style: 'blank', zoom: 3, minZoom: 0, maxZoom: 10 })}字段映射配置fieldMap
参考本文章节“分组聚合”，默认配置如下：
fieldMap: { name: 'name', value: 'num'},单干交换
作者博客，欢送单干与交换，有趣味的同学欢送退出咱们。提交issues。
总结
p-charts是基于AntV G2的Vue插件，大大晋升了数据可视化工作效率，后续会一直扩大壮大。
转载请注明：我的技术分享 » 基于AntV G2实现一个通用可视化Vue插件