vue中使用antv G2图表

效果图：

一、安装

在vue项目中，使用命令

yarn add @antv/g2 --save

等命令行自动完成安装后，在vue项目的 main.js中加入如下引用说明：

const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2

二、代码

以下是完整代码，使用的是antvG2官方网站中的折线图例子的代码。

<template>
  <a-card :bordered="false">
    <div id="c1"></div>
  </a-card>
</template>
<script>
export default {
  name: 'TemperatureReport',
  data() {
    return {
      datas: [
        { month: '1', city: '2020年实际', temperature: 7 },
        { month: '2', city: '2020年实际', temperature: 3.9 },
        { month: '3', city: '2020年实际', temperature: 6.9 },
        { month: '4', city: '2020年实际', temperature: 4.2 },
        { month: '5', city: '2020年实际', temperature: 9.5 },
        { month: '6', city: '2020年实际', temperature: 5.7 },
        { month: '7', city: '2020年实际', temperature: 14.5 },
        { month: '8', city: '2020年实际', temperature: 8.5 },
        { month: '9', city: '2020年实际', temperature: 18.4 },
        { month: '10', city: '2020年实际', temperature: 11.9 },
        { month: '11', city: '2020年实际', temperature: 21.5 },
        { month: '12', city: '2020年实际', temperature: 15.2 },
        { month: '1', city: '2021年实际', temperature: 25.2 },
        { month: '2', city: '2021年实际', temperature: 17 },
        { month: '3', city: '2021年实际', temperature: 26.5 },
        { month: '4', city: '2021年实际', temperature: 16.6 },
        { month: '5', city: '2021年实际', temperature: 23.3 },
      ],
    }
  },
  created() {},
  mounted() {
    this.initComponent()
  },
  methods: {
    initComponent() {
      const chart = new this.$G2.Chart({
        container: 'c1',
        width: 600,
        height: 300,
      })
      chart.data(this.datas)
      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      })
      chart.axis('temperature', {
        label: {
          formatter: (val) => {
            return val + ' °C'
          },
        },
      })
      chart.line().position('month*temperature').color('city').shape('smooth')
      chart.point().position('month*temperature').color('city').shape('circle')
      chart.render()
    },
  },
}
</script>