当前位置 > it书童 > vue > 正文
推荐小册
java注解
java注解是什么

Java的Lambda表达式
Java的Lambda表达式

聊聊jvm
jvm调优

java异常处理
java异常处理机制

java拾遗
java知识点,java面试题

java多线程
java多线程入门

学习spring源码
如何阅读spring源码

仿 spring 自制框架
造轮子,模仿 spring 自制一个框架

SpringCloud
SpringCloud微服务入门

微服务商城
使用微服务搭建一个电商项目

vue 引入 g2plot

vue it书童 2020-04-26 21:39:10 0赞 0踩 1594阅读 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