侧边栏壁纸
博主头像
silianpan博主等级

Feel no regret for this life.

  • 累计撰写 41 篇文章
  • 累计创建 22 个标签
  • 累计收到 5 条评论

基于AntV G2实现一个通用可视化Vue插件 | 🏆 技术专题第三期征文

silianpan
2022-03-18 / 0 评论 / 0 点赞 / 1,919 阅读 / 4,610 字
温馨提示:
本文最后更新于 2022-03-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

image.png

前言

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插件,大大提升了数据可视化工作效率,后续会不断扩展壮大。

🏆 技术专题第三期 | 数据可视化的那些事......

0

评论区