当前位置 > it书童 > vue > 正文

vue 引入 g2plot

vue it书童 2020-04-26 21:39:10 0赞 0踩 624阅读 0评论

跟着 官方文档 操作就可以

首先安装扩展

$ npm install @antv/g2plot

接下来并不需要在 main.js 入口文件去引入,直接在需要使用 g2plot 的 vue 文件中引用相应的组件即可

如:

<div id="c1"></div>
import { Bar } from '@antv/g2plot'
export default {
    // ...
    mounted () {
    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()
  }
}

效果如下:

转载须注明出处:https://www.itshutong.com/articles/499/vue-introduces-g2-plot
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录