基于AntV G2实现一个通用可视化Vue插件

╰+哭是因爲堅強的太久メ 2022-12-06 15:23 162阅读 0赞

![p-charts][]

## 前言 ##

[AntV G2][]坚持自然、确定性、意义感、生长性的设计价值观。与其他可视化插件不同的是，G2是以数据驱动的高交互可视化图形语法，具有高度的易用性和可扩展性。

随着业务可视化不断发展，数据复杂度越来越高。实现一个通用的可视化插件越来越迫切。本文基于G2实现了一个可视化Vue插件——[p-charts][p-charts 1]。

> 提示：[p-charts][p-charts 1]是基于AnV G2 v3.x最新版本，因为v3.x版本文档比较成熟。后续会紧跟v4.x版本进行升级。

目前，[p-charts][p-charts 1]只实现了p-pie（饼图）、p-bar（条形图）、p-column（柱状图）、p-line-chart（折线图）。后续会对常用其他图形进行扩展。

## 案例 ##

[点这里][Link 1]

## 快速开始 ##

### 安装 ###

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][p-charts 1]的选项和数据采用**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][antv_data-set]进行转换，转换方式非常多，比如：数据过滤、字段过滤、数据加工、数据排序、获取子集、数据补全、数据百分比、数据统计、数据分箱等，详细说明及使用参考[Transform][]。

本文[p-charts][p-charts 1]数据转换主要采用两种：**数据加工**和**数据百分比**。

*  **数据转换**：数据加工对数据字段值为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（数据展开）][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图表][Chart]

chartProps: { 
      height: 500,
      padding: [50, 120, 100, 120]
    }

#### 图例配置选项legendProps ####

图例配置选项有：position、title、background等，具体参考文档[Legend图例][Legend]

legendProps: { 
      position: 'bottom'
    }

#### 提示信息配置选项tooltipProps ####

图例配置选项有：showTitle、offset、itemTpl、crosshairs等，参考文档[Tooltip提示信息][Tooltip]

tooltipProps: { 
      showTitle: true
    }

#### 数据调整选项adjustProps ####

[参考文档][Link 2]

adjustProps: [
      { 
        type: 'dodge',
        marginRatio: 1 / 32
      }
    ]

#### 图形文本配置选项labelProps ####

图形文本选项配置有：offset、textStyle等，参考文档[Label 图形文本][Label]

labelProps: { 
      textStyle: { 
        fill: '#0050b3',
        fontSize: '12',
        // fontWeight: 'bold',
        rotate: -60
      }
    }

#### X坐标轴配置选项xFieldProps ####

坐标轴Axis选项配置有：标题title、坐标轴线line、文本label、刻度线tickLine、网格grid等，参考文档[Axis坐标轴][Axis]

默认配置如下：

xFieldProps: { 
      label: { 
        textStyle: { 
          rotate: 16
        }
      }
    }

#### Y坐标轴配置选项yFieldProps ####

同上，默认配置如下：

yFieldProps: { 
      line: { 
        lineWidth: 2,
        lineDash: [3, 3]
      },
      label: { 
        textStyle: { 
          fill: '#aaaaaa'
        }
      },
      title: { 
        offset: 60
      }
    }

#### 数据转换配置选项transformProps ####

数据转换配置类型非常多，参考本文章节“数据转换”，参考文档[Transform数据转换][Transform 1]

默认配置为空：

transformProps: []

### p-map组件 ###

p-map组件是基于[AntV L7][]封装的行政区划填充图，参考[AntV L7][AntV L7 1]

> 目前只支持CountryLayer（中国地图），后续会继续完善优化，支持各省市区县地图

#### 配置选项 ####

##### 场景Scene配置选项chartProps #####

参考文档[场景Scene][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'
    },

## 合作交流 ##

[作者博客][Link 3]，欢迎合作与交流，有兴趣的同学欢迎加入我们。提交[issues][]。

## 总结 ##

[p-charts][p-charts 1]是基于AntV G2的Vue插件，大大提升了数据可视化工作效率，后续会不断扩展壮大。

转载请注明：[我的技术分享][Link 3] » [基于AntV G2实现一个通用可视化Vue插件][AntV G2_Vue]

[p-charts]: /images/20221123/f35b66d35d9a4df18c44597a3ead4dde.png
[AntV G2]: https://g2-v3.antv.vision/zh
[p-charts 1]: https://github.com/silianpan/p-charts
[Link 1]: http://silianpan.cn/p-charts
[p-pie]: https://github.com/silianpan/p-charts/blob/master/src/packages/pie/p-pie.vue
[antv_data-set]: https://g2-v3.antv.vision/zh/docs/manual/tutorial/data-set
[Transform]: https://g2-v3.antv.vision/zh/docs/api/transform
[p-column]: https://github.com/silianpan/p-charts/blob/master/src/packages/column/p-column.vue
[demo-column3]: https://github.com/silianpan/p-charts/blob/master/src/demo/demo-column3.vue
[demo-column2]: https://github.com/silianpan/p-charts/blob/master/src/demo/demo-column2.vue
[demo-bar2]: https://github.com/silianpan/p-charts/blob/master/src/demo/demo-bar2.vue
[fold]: https://g2-v3.antv.vision/zh/docs/api/transform#fold-%E5%AD%97%E6%AE%B5%E5%B1%95%E5%BC%80
[Chart]: https://g2-v3.antv.vision/zh/docs/api/chart
[Legend]: https://g2-v3.antv.vision/zh/docs/manual/tutorial/legend
[Tooltip]: https://g2-v3.antv.vision/zh/docs/manual/tutorial/tooltip
[Link 2]: https://g2-v3.antv.vision/zh/docs/api/geometry
[Label]: https://g2-v3.antv.vision/zh/docs/manual/tutorial/label
[Axis]: https://g2-v3.antv.vision/zh/docs/manual/tutorial/axis
[Transform 1]: https://g2-v3.antv.vision/en/docs/api/transform
[AntV L7]: https://l7.antv.vision/zh/
[AntV L7 1]: https://l7.antv.vision/zh/examples/district/basic
[Scene]: https://l7.antv.vision/zh/docs/api/scene
[Link 3]: http://silianpan.cn/
[issues]: https://github.com/silianpan/p-charts/issues
[AntV G2_Vue]: http://silianpan.cn/index.php/2020/08/29/p-charts/