在vue中如何封装G2图表

目录

• vue封装G2图表
• vue引入G2图表
• 线上示例
• 特性
• 介绍一下在vue中使用G2

vue封装G2图表

本来是想将生成的方法封装到js文件中的，但是不知道为什么，import G2 进入js文件之后，vue便会卡在92%无法继续热更新，node的cpu占用率也会饱满，所以只好封装在.vue文件中，以子组件的形式被父组件调用。

本处需要注意的第一个问题，即为data中定义的chart，如果不定义，直接用let chart = new G2.chart()，也确实能够正常生成图表，但是当数据更新的时候，便会重新渲染生成新的图表，此时页面上会同时存在多个图表，所以需要提前定义chart，并使用this.chart = new G2.chart()。

本处需要注意的第二个问题，即为使用mounted钩子函数运行此函数时，因为并未检测到数据变化，所以不会生成有效图表，所以需要使用watch监听数据变化，当发生变化的时候，执行方法渲染图表。 

vue引入G2图表

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表；

官网地址：https://antv.gitee.io/zh

线上示例

特性

• 完善的图形语法：数据到图形的映射，能够绘制出所有的图表；
• 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索；
• 强大的 View 模块：可支持开发个性化的数据多维分析图形；
• 双引擎渲染：Canvas 或 SVG 任意切换；
• 可视化组件体系：面向交互、体验优雅；
• ✨全面拥抱 TypeScript：提供完整的类型定义文件；

介绍一下在vue中使用G2

安装G2依赖：

npm instal @antv/g2

在绘图前我们需要为 G2 准备一个 DOM 容器：

执行代码：

  
  import * as G2 from '@antv/g2';  
  
  export default {
    mounted() {
           const data = [
                { genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 },
            ];
            // Step 1: 创建 Chart 对象
            const chart = new G2.Chart({
                container: 'c1', // 指定图表容器 ID
                width: 600, // 指定图表宽度
                height: 300, // 指定图表高度
            });
            // Step 2: 载入数据源
            chart.data(data);
            // Step 3：创建图形语法，绘制柱状图
            chart.interval().position('genre*sold');
            // Step 4: 渲染图表
            chart.render();
    }
  }

效果展示：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。