前言
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
# or
yarn add p-charts
使用
// main.js
import 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插件，大大提升了数据可视化工作效率，后续会不断扩展壮大。
评论区