【VUE】引入使用G2图表

关于G2图表介绍

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

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

G2图表官网地址

AntV | 蚂蚁数据可视化

G2图标详细开发手册

图表 - Chart | G2

使用

第一步：安装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(); 

 推荐阅读：

高性能WEB开发：Javascript自身执行效率

JS事件冒泡、事件捕获、默认事件、事件对象那些事

高性能WEB开发：深入理解页面呈现、重绘、回流

40 行代码简单实现vue3的响应系统