前言
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 插件,大大晋升了数据可视化工作效率,后续会一直扩大壮大。
转载请注明:我的技术分享 » 基于 AntV G2 实现一个通用可视化 Vue 插件