G2使用总结

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

G2简介

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

G2基本使用

• 安装

      npm install  @antv/g2@4.0.15 --save 
  

• 使用

  //template
  <div id="c1"></div>
  
  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的常用方法

1. chart.source(data, scaleConfig)

   • data
     数据源数据，标准的 JSON 数组或者 DataSet.View 对象。
   • scaleConfig
     可选，用于数据字段的列定义，如设置数据的类型，显示别名，时间类型的展示格式等，不同的数字类型的配置项不同，详情可配置属性参考Chart文档 Scale。

2. chart.data(data);载入数据

3. 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 则表示不展示。

4. 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的问题

1. 基本的配置使用，改变什么字体颜色，位置，显示格式化问题。
   通过查看基本配置可以解决。

2. 数据在图表显示的 比例协调性
   通过数据的动态显示图标的最大值，解决显示数据协调问题。

3. 异步数据加载问题，第一次加载不显示
   因为vue的组件是异步渲染机制，要确保在 props 传过来的值 第一次变化后的，才去渲染 G2的图标库；由于 watch监听数据的变化比created钩子还要早，那个时候vue组件还没有挂载组件的根dom,所以才会导致 G2底层获取组件中的dom时报错；
   报错如下：
   

   微信图片_20210115104438.png

   解决思路：因为是获取dom元素时机导致的，我们可以在通过watch监听同时通过 vue提供的 this.$nextTick()解决确保vue组件的dom加载完成。

4. 异步数据 切换时， 图形叠加问题

   1. 通过 每次调用接口时，清除数据为空，则解决。
      但是会影响用户体验，需要重新加载G2的，会导致闪屏可能性出现。
   2. 通过 G2给我们提供一个方法 chart.changeData(data);可以重载数据不需要销毁掉当前chart实例。
      我们可以在watch 监听同时，判断是否第一次加载，如果第一次加载chart,下次就直接可以 重载数据。
      这样解决目的保证 图表每次切换时，不会出现闪屏，很友好过渡切换，增加用户体验感。

   g2数据异步加载与动态更新

vue中使用G2条形图栗子

<template>
    <div id="chart3"></div>
</template>

<script>
    import { Chart } from '@antv/g2';
    export default {
        name:"bar",
        props:["list","max"],
        data() {
            return {
                chart: null,//把chart实例挂在当前组件
                first: true// 区分第一次chart加载
            }
        },
        watch: {
            list: {
                // 解决问题 3 4 
              handler: function (newVal, oldVal) {
                  this.$nextTick(function(){
                      if(this.first) {
                          this.drawLine(newVal);
                      }else {
                          this.chart.changeData(newVal);
                      }
                  })
              },
              immediate: true,
              deep:true
            }
        },

        methods: {
            drawLine(list) {
                console.log("drawLine",list)
                // console.log(this.list,this.max)
                let max = this.max;
                // let max = 0;
                this.chart = new Chart({
                  container: 'chart3',
                  autoFit: true,
                  height: 460,
                    padding: [0, 0, 0, 100], // 上，右，下，左
                });
                this.chart.forceFit()
                this.chart.data(list);
                this.chart.scale({
                  value: {
                    max: max,
                    min: 0,
                    alias: '销量（个）',
                  },
                });
                this.chart.tooltip({
                  showMarkers: false, // 不展示 tooltip markers
                });
                this.chart.interaction('active-region'); // 使用 active-region 交互行为
                this.chart.axis('type',{
                    tickLine: null,
                    line:null,
                    label: {
                        style: {
                            fill:"#222",
                            fontSize: 14,
                            fontWeight: 600,
                            fontFamily:"PingFang-SC-Medium"
                        }
                    }
                });     
                this.chart.axis('value', {
                  label: null,
                  title: {
                    offset: 30,
                    style: {
                      fontSize: 14,
                      fontWeight: 600,
                    },
                  },
                  grid:null
                });
                this.chart.legend(false);
                this.chart.coordinate().transpose();
                this.chart
                  .interval()
                  .position('type*value')
                  .color('#2C77E5')
                  .size(26)
                  .label('value', {
                    style: {
                      fill: '#222',
                      fontWeight: 600,
                    },
                    offset: 10,
                  });
                this.chart.interaction('element-active');
                this.chart.render();
                
                this.first = false;
            }
        }
    }
</script>

<style>
</style>