在Nuxt中使用Antv-G2plot

在自己的项目中用到了图表，虽然Echarts很火但是…默认样式比较丑，所以选择了阿里的图表库Antv的G2plot组件。

因为我使用了基于Nuxt的Vue SSR，所以当服务端渲染的时候，会报比较常见的document不存在错误。官方文档关于这种使用插件的方法有相关描述，不过提供了很多种方案，初学者第一次遇到相关问题的时候可能不知道如何选择。在我尝试搜索的时候，网络上大多推荐使用静态js方案引入，或者通过添加到config中的plugin并且启用仅浏览器载入。这些方案测试的时候单独使用都不是很适合价值G2plot（如果有人尝试成功了的话请联系我修改）。

经过一番测试下来，官网提供的注入Vue实例的方法最适合，文档中是这样描述的：

有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。

将内容注入Vue实例，避免重复引入，在Vue原型上挂载注入一个函数，所有组件内都可以访问(不包含服务器端)。

官方文档链接为：

https://zh.nuxtjs.org/guide/plugins#%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97

具体使用步骤为：

安装：

（省略nuxt配置的部分）

npm install @antv/g2plot

或

yarn add npm @antv/g2plot

注入Vue实例：

//plugins/g2.js
import Vue from 'vue'
let g2 = require("@antv/g2plot")

Vue.prototype.$g2 = g2

//nuxt.config.js
export default {
 plugins: [
    {
      src: "~/plugins/g2",
      ssr: false
    },
  ],]
}

使用：

<div id="c1"></div>

//import { Bar } from '@antv/g2plot';
const Bar = this.$g2.Bar
const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const barPlot = new Bar('c1', {
  data,
  xField: 'sales',
  yField: 'year',
  colorField: 'year',
});

barPlot.render();

即可正常使用啦√