代码实例（vue elementui admin 后台管理系统中使用g2）

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">实时监控: {{ name }}</div>
    <div id="container" class="chart" />
  </div>
</template>


<script>
// 准备数据
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]
import { Chart } from '@antv/g2'

export default {
  data() {
    return {
    }
  },
  mounted() {
    console.log('运行')
    this.fetchData()
    // setTimeout(this.fetchData, 1000)
  },
  methods: {
    fetchData() {
      // 初始化图表实例
      const chart = new Chart({
        container: 'container',
        theme: 'classic'
      })
      // 声明可视化
      chart
        .interval() // 创建一个 Interval 标记
        .data(data) // 绑定数据
        .encode('x', 'genre') // 编码 x 通道
        .encode('y', 'sold') // 编码 y 通道

      // 渲染可视化
      chart.render()
    }
  }
}
</script>

控制台 g2报错如下

Uncaught (in promise) TypeError: privateMap.get is not a function __classPrivateFieldGet tslib.es6.js:209 maybeAppendByClassName selection.js:91 render axis.js:46 connectedCallback gui.js:33 mountChildren index.esm.js:15768 appendChild index.esm.js:7832 append selection.js:83 componentsTransitions plot.js:484 join selection.js:206 plotView plot.js:480 __awaiter plot.js:7 __awaiter plot.js:3 plotView plot.js:426 plot plot.js:131 each selection.js:240 plot plot.js:130 join selection.js:206 plot plot.js:125 fulfilled plot.js:4 promise callbackstep plot.js:6 fulfilled plot.js:4 promise callbackstep plot.js:6 fulfilled plot.js:4 promise callbackstep plot.js:6 __awaiter plot.js:7 __awaiter plot.js:3 plot plot.js:39 render render.js:76 promise callbackrender render.js:76 render chart.js:148 render chart.js:146 fetchData metric.vue:54 mounted metric.vue:36 VueJS 24 tslib.es6.js:209 Uncaught (in promise) TypeError: node is null select selection.js:5 selectG2Elements utils.js:28 tooltip tooltip.js:371 Tooltip tooltip.js:458 plot plot.js:164 fulfilled plot.js:4 promise callbackstep plot.js:6 fulfilled plot.js:4 promise callbackstep plot.js:6 fulfilled plot.js:4 promise callbackstep plot.js:6 __awaiter plot.js:7 __awaiter plot.js:3 plot plot.js:39 render render.js:76 promise callbackrender render.js:76 render chart.js:148 render chart.js:146 fetchData metric.vue:54 mounted metric.vue:36 VueJS 24

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Metric> at src/views/dashboard/metric.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root>