G2柱状图使用心得

npm install @antv/g2 --save

import G2 from "@antv/g2";

initComponent() {
    
    
      this.chart = new G2.Chart({
    
    
        container: "mountNode",
        forceFit: true,
        height: 300,//高度
        padding: "auto", //居中
      });
      let dataDO = JSON.parse(
        window.JSON.stringify(this.areaData).replace(/salesVolume/g, "销售量") //深拷贝拿过来的值
      );
      this.chart.axis("销售量", {
    
    
        line: {
    
    
          stroke: "rgba(67, 154, 255, 1)", // 坐标轴线的颜色
          strokeOpacity: 0, // 坐标轴线的透明度，数值范围为 0 - 1
        },
        grid: {
    
    
          lineStyle: {
    
    
            stroke: "rgba(67, 154, 255, 0.1)",
          },
        },
        label: {
    
    
          textStyle: {
    
    
            fill: "#798EE1",
          },
          formatter: function formatter(val) {
    
    
            return val;
          },
        },
        tickLine: null,
        subTickLine: null,
      });

      var Shape = G2.Shape;
      Shape.registerShape("interval", "textInterval", {
    
    
        //显示上方标题
        drawShape: function drawShape(cfg, group) {
    
    
          var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
          let value = cfg.origin._origin.销售量;
          group.addShape("text", {
    
    
            attrs: {
    
    
              text: value,
              textAlign: "center",
              x: points[1].x + cfg.size / 2,
              y: points[1].y,
              fontFamily: "PingFang SC",
              fontSize: 12,
              fill: "#40A9FF",
            },
          });
        },
      });
      this.chart.axis("销售量", {
    
    
        line: {
    
    
          stroke: "rgba(67, 154, 255, 0.3)", // 坐标轴线的颜色   设置Y轴
          strokeOpacity: 1, // 坐标轴线的透明度，数值范围为 0 - 1
        },

        grid: {
    
    
          lineStyle: {
    
    
            stroke: "rgba(67, 154, 255, 0.2)",
          },
        },
        label: {
    
    
          //坐标文字
          textStyle: {
    
    
            fill: "#40A9FF",
          },
          formatter: function formatter(val) {
    
    
            return val;
          },
        },
      });
      this.chart.axis("goodsName", {
    
    
        line: {
    
    
          stroke: "rgba(67, 154, 255, 0.3)", // 坐标轴线的颜色   设置X轴
          strokeOpacity: 1, // 坐标轴线的透明度，数值范围为 0 - 1
        },

   
        label: {
    
    
          textStyle: {
    
    
            fill: "#40A9FF",
          },
          formatter: function formatter(val) {
    
    
            return val;
          },
        },
      });

      this.chart.tooltip({
    
    
        crosshairs: {
    
    
          //去除柱状图阴影部分
          type: "",
        },
        inPlot: false,
        shared: false,
      });
      // this.chart.clear()
      this.chart.source(dataDO);

      // console.log(this.areaData)
      let arr = [];
      for (var i = 0; i < this.areaData.length; i++) {
    
    
        arr.push(this.areaData[i]["salesVolume"]);
      }
      let maxNum = Math.max(...arr); //取最大值
      var num = null;
      if (maxNum < 100) {
    
    
        num = 50
      } else if (maxNum > 100) {
    
    
        num = Math.round(maxNum / 10+100);
      }

      this.chart.scale("销售量", {
    
    
        tickInterval: num, // 用于指定坐标轴各个标度点的距离
      });
      //  }
      this.chart.legend(false); //去掉底部对应颜色文字

      this.chart
        .interval()
        .position("goodsName*销售量")
        .shape("textInterval")

        .size(60);
      this.chart
        .interval()
        .position("goodsName*销售量")
        .color("goodsName", [
          //设置渐变颜色
          "l(90) 0:rgba(253, 85, 127, 1)  0.3:rgba(243, 198, 128, 0.72) 1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(207, 197, 128, 1) 0.3:rgba(228, 224, 198, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
          "l(90) 0:rgba(23, 185, 254, 1)  0.3:rgba(60, 119, 255, 0.72)  1:rgba(16, 30, 57, 0.3)",
        ])
        .size(15);

      this.chart.render();
    },

每次重新动态赋值的时候需要把chart清除掉再重新创建

		  this.repetition( this.ByDayList);  //后台取到的值
          this.chart.destroy();
          this.initComponent();

效果图

这两个G2地址大家可以参考一下

G2基本教程地址
G2效果地址

总结:G2文档写的很一般,甚至有点乱,没有eacharts那么清晰明了,使用起来也比较麻烦,代码量多