G2使用总结

最近公司在手机端做一个统计报表，需要通过图形展示，之前我使用了百度echart最多，相对来说比较熟悉，文档比较全，社区也比较活跃，后台公司决定使用蚂蚁金服的G2数据可视化图表，从直观上图标显示的效果在手机端上更友好些

G2简介

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

G2基本使用

安装

    npm install  @antv/[email protected] --save

使用

//template


import { Chart } from '@antv/g2';
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 Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300, // 指定图表高度
});

// Step 2: 载入数据源
chart.data(data);

// Step 3: 创建图形语法，绘制柱状图
chart.interval().position('genre*sold');

// Step 4: 渲染图表
chart.render();

G2基本配置

Chart图表的属性

const chart = new G2.Chart({
    container: 'c1', // 必选 指定图表容器 可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
    width : {number}, // 指定图表宽度
    height : {number}, // 指定图表高度
    padding:[10,20,30,40], //设置图表的内边距,对应css样式padding
    background: {
        fill: {string}, // 图表背景色
        fillOpacity: {number}, // 图表背景透明度
        stroke: {string}, // 图表边框颜色
        strokeOpacity: {number}, // 图表边框透明度
        opacity: {number}, // 图表整体透明度
        lineWidth: {number}, // 图表边框粗度
        radius: {number}, // 图表圆角大小
    },
    forceFit: {Boolean}, //图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度.
    animate: {Boolean}, //图表动画开关，默认为 true，即开启动画。
})

Chart的常用方法

chart.source(data, scaleConfig)
- data
  数据源数据，标准的 JSON 数组或者 DataSet.View 对象。
- scaleConfig
  可选，用于数据字段的列定义，如设置数据的类型，显示别名，时间类型的展示格式等，不同的数字类型的配置项不同，详情可配置属性参考Chart文档 Scale。
chart.data(data);载入数据
chart.axis 坐标轴的配置
chart.axis(false)
关闭坐标轴

chart.axis('field', false)
不展示 field 字段对应的坐标轴。

chart.axis('field', axisConfig)
一个对象类型，用于设置坐标轴配置信息，可配置属性如下：

position: string 设置坐标轴的显示位置，可设置的值包含 top、bottom、left、right，即上下左右四个位置。

line: object |null 设置坐标轴线的样式，包括线的颜色、粗细等。如果该属性值为 null 则表示不展示坐标轴线。

label: object |null 设置坐标轴文本的样式。如果该属性值为 null 则表示不展示坐标轴文本。

title: object |null 设置坐标轴标题的显示样式。如果该属性值为 null 则表示不展示坐标轴标题。

tickLine: object |null 设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。

subTickCount: number 设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。

subTickLine: number 设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。

grid: object | null 设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。

chart.tooltip
chart.tooltip(false)
关闭 tooltip 功能。

chart.tooltip(tooltipConfig)
是一个对象类型，支持的属性如下：

triggerOn: string tooltip的触发方式，可配置的值为：’mousemove’、’click’、’none’，默认为 mousemove。

showTitle: boolean 是否展示提示信息的标题，默认为 true，即展示，通过设置为 false 来隐藏标题。

title: string 设置 tooltip 的标题展示的数据字段，设置该字段后，该标题即会展示该字段对应的数值。showTitle 为 false 时，该设置不生效。

offset: number 设置 tooltip 距离鼠标的偏移量。

inPlot: boolean 设置是否将 tooltip 限定在绘图区域内，默认为 true，即限定在绘图区域内。

follow: boolean 设置 tooltip 是否跟随鼠标移动。默认为 true，即跟随。

shared: boolean 设置 tooltip 只展示单条数据。

enterable: boolean 用于控制是否允许鼠标进入 tooltip，默认为 false，即不允许进入。

position: string 该属性设置之后，就会在固定位置展示 tooltip，可设置的值为：left、right、top、bottom。

follow: 设置 tooltip 是否跟随鼠标移动。默认为 true，即跟随。

根据不同的需求在G2官网查看对应的配置

g2条形图

vue在使用G2的问题

基本的配置使用，改变什么字体颜色，位置，显示格式化问题。
通过查看基本配置可以解决。
数据在图表显示的比例协调性
通过数据的动态显示图标的最大值，解决显示数据协调问题。
异步数据加载问题，第一次加载不显示
因为vue的组件是异步渲染机制，要确保在 props 传过来的值第一次变化后的，才去渲染 G2的图标库；由于 watch监听数据的变化比created钩子还要早，那个时候vue组件还没有挂载组件的根dom,所以才会导致 G2底层获取组件中的dom时报错；
报错如下：

微信图片_20210115104438.png

解决思路：因为是获取dom元素时机导致的，我们可以在通过watch监听同时通过 vue提供的 this.$nextTick()解决确保vue组件的dom加载完成。
异步数据切换时，图形叠加问题
1. 通过每次调用接口时，清除数据为空，则解决。
  但是会影响用户体验，需要重新加载G2的，会导致闪屏可能性出现。
2. 通过 G2给我们提供一个方法 chart.changeData(data);可以重载数据不需要销毁掉当前chart实例。
  我们可以在watch 监听同时，判断是否第一次加载，如果第一次加载chart,下次就直接可以重载数据。
  这样解决目的保证图表每次切换时，不会出现闪屏，很友好过渡切换，增加用户体验感。
g2数据异步加载与动态更新

vue中使用G2条形图栗子