preface

AntV G2 adheres to the design values of nature, certainty, sense of meaning and growth. Unlike other visualization plug-ins, G2 is a data-driven graphical syntax for interactive visualization with a high degree of ease of use and scalability.

As business visualization continues to evolve, data complexity increases. Implementing a common visual plug-in is becoming more and more urgent. This paper implements a visual Vue plug-in – P-Charts based on G2.

Tip: P-Charts is based on the latest version of AnV G2 V3.x as v3.x version documentation is more mature. The v4.x version will be upgraded later.

At present, P-Charts only realizes P-pie, P-bar, P-column and P-line-chart. Other commonly used graphics will be extended later.

case

Click here

Quick start

The installation

npm install -S p-charts
# or
yarn add p-charts
Copy the code

use

// main.js
import PCharts from 'p-charts'
Vue.use(PCharts)
Copy the code

Example: 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'.// Statistics indicator can be replaced
          value: 'budgetNum'
        },
        title: 'Total income and total expenditure proportion - budget number (unit: ten thousand yuan).colorList: ['#1890ff'.'#37c661']}}},methods: {
    updateData() {
      this.$refs.pieRef.initData()
    },
    handleTitleClick() {
      console.log('title-click')},handleLabelClick(data) {
      console.log('label-click', data)
    }
  }
}
</script>
Copy the code

Realize the principle of

This paper takes p-PIE chart implementation as an example.

Options and data

Options and data of P-Charts are passed by props. Component defines the default option configuration.

defaultOptions: {
  / / title
  title: ' '.// Chart attributes: width,height, etc
  chartProps: {
    height: 400
  },
  tooltipProps: {
    showTitle: false
  },
  // Graph radius
  radius: 0.7.// List of graphic colors
  colorList: [].// Field mapping
  fieldMap: {
    name: 'budgetSubject'.value: 'budgetFinalNum'
  },
  / / value unit
  valueUnit: 'ten thousand'
}
Copy the code

Combine the latest options in the Mouted life cycle

this.newOptions = { ... this.defaultOptions, ... this.options }Copy the code

Data conversion

Data conversion is carried out by @ANTV /data-set. There are many conversion methods, such as: data filtering, field filtering, data processing, data sorting, subset acquisition, data completion, data percentage, data statistics, data sorting, etc. For details, refer to Transform.

In this paper, P-Charts data conversion mainly adopts two types: data processing and data percentage.

  • Data conversion: Data processing returns null or undefined values to 0.
  • Data percentage: The data percentage is converted to percent, and the percentage of each item is counted.
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'
})
Copy the code

Group aggregation

Because p-PIE does not have group aggregation, the p-column column is used as an example, for example, demo-column3

The group aggregation configuration is as follows:

// Group field (group field)
groupField: 'name'.// Entry field (detail field, legend field)
itemField: 'time'.// Field mapping
fieldMap: {
  time: 'year'.name: 'budgetSubject'.value: 'budgetFinalNum'
}
Copy the code
  • FieldMap: Mainly used for field mapping, the basic graph has three fields.
    • The time line field is mainly used in the coordinate axes (X-axis and Y-axis of the bar chart). In this case, the time field may not indicate the time but may indicate other fields, such as department. For details, see Demo-column3
    • Name field Name: used for legend or data description fields
    • Value field value: Indicates the value of the field
  • GroupField: groupField, for example, demo-column3 groups data by department. The configuration value here is the key of the fieldMap, not the value
  • ItemField: itemField (legend field), representing the field description of the data value, such as the expenditure of each item name in demo-column3. Again, the configuration value here is the key of the fieldMap, not the value

Demo-column3 is configured as follows:

Group: Group by the Time field in the fieldMap, that is, by department (govDept); The entry field is the Name field in the fieldMap, which is the budget subject; The value field is subtotal, that is, data value.

groupField: 'time'.itemField: 'name'.fieldMap: {
  time: 'govDept'.name: 'subject'.value: 'subtotal'
},
Copy the code

Based on the preceding configuration rules, the configuration of Demo-Column2 is as follows:

groupField: 'name'.itemField: 'time'.fieldMap: {
  time: 'outType'.name: 'subject'.value: 'outValue'
}
Copy the code

The Demo-bar2 bar chart is grouped by year as follows:

fieldMap: {
  time: 'year'.name: 'budgetSubject'.value: 'budgetNum'
}
Copy the code

Data field key is renamed

To make the legend specification more explicit, you need to map the legend field specification.

foldFields: ['subtotal'.'outBase'.'outProject'].foldFieldsRename: {
  subtotal: 'subtotal'.outBase: 'Capital expenditure'.outProject: 'Project expenditure'
}
Copy the code
  • FoldFields: main renamed field
  • FoldFieldsRename: Renames the mapping

The data conversion type for renaming is fold (see p-column). The configuration is as follows:

dv.transform({
  type: 'fold'.fields: foldFieldsOp,
  key: this.newOptions.fieldMap[this.newOptions.itemField],
  value: valueOp
})
Copy the code

Case address demo-column2

Other Options

Value unit valueUnit

Value Unit This unit is used to measure the prompt value. The default value is ten thousand yuan, Individual, or person.

ColorList colorList

colorList: ['#ff786b'.'#0fdd7e'.'#bc9dfb'.'#ff2e6a'.'#7effa2'.'#e57ec0'.'#2c818f'.'#ff7730']
Copy the code

Graphics base option chartProps

Basic graphics options include: height, width, padding, background, etc. For details, see Chart Chart

The default configuration is as follows:

chartProps: {
  height: 500.padding: [50.120.100.120]}Copy the code

Legend configuration option legendProps

Legend configuration options include Position, title, and background. For details, see Legend Legend

The default configuration is as follows:

legendProps: {
  position: 'bottom'
}
Copy the code

Message Configuration option tooltipProps

The legend configuration options include showTitle, offset, itemTpl, and Crosshairs. See the Tooltip information in the documentation

The default configuration is as follows:

tooltipProps: {
  showTitle: true
}
Copy the code

adjustProps

Reference documentation

The default configuration is as follows:

adjustProps: [
  {
    type: 'dodge'.marginRatio: 1 / 32}]Copy the code

Graphical text configuration options labelProps

Graphic text options include offset, textStyle, etc. Refer to the document Label graphic text

The default configuration is as follows:

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

X axis configuration option xFieldProps

Axis options include: title, coordinate Axis line, text label, scale line tickLine, grid, etc. Refer to the document Axis Axis

The default configuration is as follows:

xFieldProps: {
  label: {
    textStyle: {
      rotate: 16}}}Copy the code

Y axis configuration option yFieldProps

The default configuration is as follows:

yFieldProps: {
  line: {
    lineWidth: 2.lineDash: [3.3]},label: {
    textStyle: {
      fill: '#aaaaaa'}},title: {
    offset: 60}}Copy the code

Data transformation configuration options transformProps

There are many types of data transformation configuration. See the Transform Data Transformation documentation in the section “Data Transformation” in this article

The default configuration is null:

transformProps: []
Copy the code

P – the map component

P-map component is the administrative division filling map based on AntV L7 package, refer to AntV L7

Currently, only CountryLayer (China map) is supported. In the future, it will continue to improve and optimize to support maps of provinces, regions and counties

Configuration options

Scene Configuration option chartProps

See the document Scene

The default configuration is as follows:

chartProps: {
  map: new Mapbox({
    center: [116.2825.39.9].pitch: 0.style: 'blank'.zoom: 3.minZoom: 0.maxZoom: 10})}Copy the code
FieldMap configuration fieldMap

See section Group Aggregation in this document. The default configurations are as follows:

fieldMap: {
  name: 'name'.value: 'num'
},
Copy the code

Cooperation and communication

Author blog, welcome to cooperate and exchange, interested students welcome to join us. Submit issues.

conclusion

P-charts is a Vue plug-in based on AntV G2, which greatly improves the work efficiency of data visualization and will continue to expand and expand in the future.

๐Ÿ† technology project phase iii | data visualization of those things…