【VUE】引入使用G2图表__Vue.js
发布于 3 年前 作者 banyungong 857 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

关于G2图表介绍

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性

使用 G2,可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表

G2图表官网地址

https://antv.gitee.io/zh

G2图标详细开发手册

https://antv-g2.gitee.io/zh/docs/api/general/chart

使用

第一步:安装G2依赖包

npm instal @antv/g2

第二步:在绘图前需要为 G2 准备一个 DOM 容器

<div id="webInfo"></div>

第三步:引入

import G2 from "@antv/g2";

第四步:在mounted中定义

  1. 可先在全局定义let chart = null;
  2. const chart = new G2.Chart({})
chart = new G2.Chart({       
        container: "webInfo",//指定图表容器       
        forceFit: true,//强制配合 
        width: 600, // 指定图表宽度       
        height: 306,//高度       
        padding: [20, 30, 30, 50],//内边距 
})

第五步:载入数据源

/马上更新图表 / 
chart.changeData(chartData) 

/仅仅是更新数据,而不需要马上更新图表/ 
chart.source(chartData) 

/需要更新图表时调用 / 
chart.repaint()

补充:扩展清除图形语法

/清理所有/
chart.clear(); 
```<p style="line-height: 20px; color: #ccc">
        版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
        作者: 黄勇超
        原文链接:<a href='https://juejin.im/post/6996947997334601742'>https://juejin.im/post/6996947997334601742</a>
      </p>
回到顶部