在vue中如何封装G2图表

在Vue中封装G2图表需要进行如下步骤：

第一步：安装必要插件

首先需要安装g2plot和@g2plot/vue插件，g2plot是G2的包装库，提供更加便利的API，@g2plot/vue是g2plot的Vue包装器。

npm i g2plot @g2plot/vue

第二步：创建自定义组件

在src/components目录下新建一个G2Chart.vue组件，具体代码如下：

<template>
  <div>
    <div ref="container"></div>
  </div>
</template>

<script>
import * as G2Plot from '@antv/g2plot'

export default {
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartInstance: null // 存储当前图表实例
    }
  },
  mounted() {
    // 初始化图表实例
    this.chartInstance = new G2Plot['Line']({
      // 渲染到指定容器
      container: this.$refs.container,
      // 自定义配置项
      ...this.$attrs,
      // 绑定数据
      data: this.chartData
    })
    // 渲染图表
    this.chartInstance.render()
  },
  beforeUnmount() {
    // 销毁图表实例，释放相关资源
    this.chartInstance.destroy()
  }
}
</script>

<style scoped>
/* 样式 */
</style>

第三步：使用自定义组件

在Vue组件中使用自定义组件，代码示例如下：

<template>
  <div>
    <h2>{{ chartTitle }}</h2>
    <g2-chart
      :chart-data="chartData"
      :x-field="xField"
      :y-field="yField"
    />
  </div>
</template>

<script>
import G2Chart from './G2Chart.vue'

export default {
  components: {
    G2Chart
  },
  data() {
    return {
      chartTitle: '折线图',
      chartData: [
        { date: '2021-01-01', value: 100 },
        { date: '2021-02-01', value: 150 },
        { date: '2021-03-01', value: 120 },
        { date: '2021-04-01', value: 80 },
        { date: '2021-05-01', value: 90 }
      ],
      xField: 'date',
      yField: 'value'
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

上述代码中，G2Chart组件接收chartData、xField和yField三个属性作为图表的数据和坐标轴字段，用户可以根据需要自由配置。

示例一：柱状图

<template>
  <div>
    <h2>{{ chartTitle }}</h2>
    <g2-chart
      :chart-data="data"
      :x-field="xField"
      :y-field="yField"
      :tooltip="tooltip"
      :legend="legend"
    />
  </div>
</template>

<script>
import G2Chart from './G2Chart.vue'

export default {
  components: {
    G2Chart
  },
  data() {
    return {
      chartTitle: '柱状图',
      data: [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 145 },
        { year: '1958 年', sales: 48 }
      ],
      xField: 'year',
      yField: 'sales',
      tooltip: { formatter: (datum) => ({ name: '销售额', value: datum.sales }) },
      legend: false
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

示例二：饼图

<template>
  <div>
    <h2>{{ chartTitle }}</h2>
    <g2-chart
      :chart-data="data"
      :color-field="colorField"
      :angle-field="angleField"
      :tooltip="tooltip"
    >
      <g2plot-pie-label :connected-padding="40" :label="label" />
    </g2-chart>
  </div>
</template>

<script>
import G2Chart from './G2Chart.vue'
import { PieLabel } from '@antv/g2plot'

export default {
  components: {
    G2Chart,
    G2plotPieLabel: PieLabel
  },
  data() {
    return {
      chartTitle: '饼图',
      data: [
        { type: '分类一', value: 27 },
        { type: '分类二', value: 25 },
        { type: '分类三', value: 18 },
        { type: '分类四', value: 15 },
        { type: '分类五', value: 10 },
        { type: '其他', value: 5 }
      ],
      colorField: 'type',
      angleField: 'value',
      tooltip: { formatter: (datum) => ({ name: '占比', value: `${datum.value}%` }) },
      label: {
        type: 'inner',
        content: '{value}%',
        style: {
          fontSize: 14,
          textAlign: 'center'
        }
      }
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

上述示例中，G2Chart组件作为容器组件，包含了具体的图表实现。用户只需要提供数据和自定义配置即可快速实现不同类型的图表。