前言
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
其他选项说明
颜色列表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 } }
合作交流
作者博客,欢迎合作与交流,有兴趣的同学欢迎加入我们。提交issues。
总结
p-charts是基于AntV G2的Vue插件,大大提升了数据可视化工作效率,后续会不断扩展壮大。