关于数据可视化:基于AntV-G2实现一个通用可视化Vue插件

前言

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 插件