阅读 33908

【VUE】引入使用G2图表

关于G2图表介绍

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

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

banner.jpg

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(); 
复制代码
文章分类
前端
文章标签