【VUE】引入使用G2图表__Vue.js
粉丝福利 : 关注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中定义
- 可先在全局定义let chart = null;
- 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>