关于antv/g2 常用的图表用法

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高！上一篇文章是 JavaScript JSON。今天我们一起来学习一下antv/g2常用的图表用法。

安装的两种方式

1， 引入在线资源

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

2， npm 安装

npm install @antv/g2 --save

import { Chart} from "@antv/g2";

首先是下面图表的HTML代码

<div class="main">
  <div class="section">
    <div class="smallTitle">
      近两年中国各省人口数量比较
    </div>
    <div id="container"></div>
  </div>
  <div class="section">
    <div class="smallTitle">
      达标率(%)
    </div>
    <div id="container_one"></div>
  </div>
  <div class="section">
    <div class="smallTitle"></div>
    <div id="container_two"></div>
  </div>
  <div class="section">
    <div class="smallTitle">
      星座占比
    </div>
    <div id="container_three"></div>
  </div>
</div>

然后是下面图表的CSS代码

* {
  margin: 0;
  padding: 0;
}
.section {
  width: 50%;
  height: 500px;
  float: left;
}
#container,
#container_two {
  height: 400px;
  border-right: 1px solid #ccc;
}
#container_two {
  margin-top: 100px;
}
#container_one {
  height: 400px;
}

分组柱状图表使用

1，准备好数据源，这里的数据是分了两种，一是2021，二是2022。

const data = [
  { year: "2021", 省份: "广东", 人口数量: 1.26 },
  { year: "2021", 省份: "山东", 人口数量: 1.01 },
  { year: "2021", 省份: "河南", 人口数量: 0.99 },
  { year: "2021", 省份: "江苏", 人口数量: 0.84 },
  { year: "2021", 省份: "四川", 人口数量: 0.83 },
  { year: "2021", 省份: "河北", 人口数量: 0.74 },
  { year: "2021", 省份: "湖南", 人口数量: 0.66 },
  { year: "2021", 省份: "浙江", 人口数量: 0.64 },
  { year: "2022", 省份: "广东", 人口数量: 1.04 },
  { year: "2022", 省份: "山东", 人口数量: 0.95 },
  { year: "2022", 省份: "河南", 人口数量: 0.94 },
  { year: "2022", 省份: "江苏", 人口数量: 0.78 },
  { year: "2022", 省份: "四川", 人口数量: 0.8 },
  { year: "2022", 省份: "河北", 人口数量: 0.71 },
  { year: "2022", 省份: "湖南", 人口数量: 0.65 },
  { year: "2022", 省份: "浙江", 人口数量: 0.59 }
];

2，初始化Chart的对象,并载入数据源。

 const chart = new Chart({
   container: "container",
   autoFit: true,
   height: 500
 })

 chart.data(data);

3，设置Y轴的度量单位以及自定义标题的显示

chart.scale("人口数量", {
  alias: "人口数(亿)",
  max: 2,
  min: 0
});

chart.axis("人口数量", { 
  title: {    //标题
    offset: 50
  }
});

4，设置提示框

chart.tooltip({
  showMarkers: false,
  shared: true
});

5，创建图形语法，绘制柱状图，由省份和人口数量 两个属性决定图形位置，省份映射至 X 轴，人口数量映射至 Y 轴

chart.interval().position("省份*人口数量").color("year").adjust([
      {type: "dodge",marginRatio: 0}
]);

6，设置图例的显示

chart.legend({
  position: "top"
});

7，添加调整图表与用户的交互展示

chart.interaction("active-region");

8，渲染图表

chart.render();

效果图展示

饼图使用

1，准备数据源

const arrList = [
  { item: "白羊座", num: 40, percent: 0.25 },
  { item: "水瓶座", num: 21, percent: 0.1 },
  { item: "金牛座", num: 17, percent: 0.15 },
  { item: "狮子座", num: 13, percent: 0.2 },
  { item: "双鱼座", num: 9, percent: 0.3 }
];

2，初始化Chart的对象,并载入数据源。

const chart3 = new Chart({
  container: "container_three",
  autoFit: true,
  height: 500
});
  
chart3.data(arrList);

3，设置坐标系

chart3.coordinate("theta", {  //'polar'：层叠柱状图（默认） || 'theta'：饼图 || 'helix'：牛眼图
      radius: 0.75
});

4，设置度量单位

chart3.scale("percent", {
   formatter: val => {
     val = val * 100 + "%";
     return val;
   }
});

5，设置提示框

chart3.tooltip({
   showTitle: false,
   showMarkers: false
});

6，创建图形语法，绘制饼图

chart3.interval().position("percent").color("item").label("percent", {content: data => {
    return `${data.item}: ${data.percent * 100}%`;}
}).adjust("stack");

7，添加调整图表与用户的交互展示

 chart3.interaction("element-active");

8，渲染图表

chart3.render();

效果图展示

柱状图和折线图组合使用。

1，准备好数据

const dataList = [
  { week: "星期一", work: 9, holiday: 2 },
  { week: "星期二", work: 6, holiday: 9 },
  { week: "星期三", work: 5, holiday: 5 },
  { week: "星期四", work: 7, holiday: 1 },
  { week: "星期五", work: 2, holiday: 8 },
  { week: "星期六", work: 2, holiday: 7 },
  { week: "星期日", work: 1, holiday: 8 }
];

2，初始化Chart的对象,并载入数据源

const chart2 = new Chart({
  container: "container_two",
  autoFit: true,
  height: 500
});

chart2.data(dataList);

3，设置Y轴的度量单位

chart2.scale({
  work: {
    alias: "上班人员(人)",
    min: 0,
    max: 10
  },
  holiday: {
    alias: "休假人员(人)",
    min: 0,
    max: 10
  }
});

4，设置图例的显示

chart2.legend({
   custom: true,
   items: [{value: "work",name: "work",marker: { symbol: "square", style: { fill: "#3182bd", r: 5 } }},
   {value: "holiday",name: "holiday",marker: { symbol: "hyphen",style: { stroke: "#fdae6b", r: 5, lineWidth: 3 }}}],
   position: "top" 
});

5，设置坐标轴

chart2.axis("work", {grid: null,title: {style: {fill: "#fdae6b"},autoRotate: false},
      label: {formatter: val => {return val + "s"; },
      position: top
      }
});

chart2.axis("holiday", {title: {autoRotate: false},
      //给y轴的分段的数字加单位
      label: {formatter: val => {return val + "mm"; }
      }
});

6，设置提示框

chart2.tooltip({
  shared: true,
  position: "top"
});

7，创建图形语法(绘制柱状图，折线图)

// 柱状图
chart2.interval().position("week*work").color("#3182bd");
// 折线图
chart2.line().position("week*holiday").color("#fdae6b").size(3).shape("smooth");
chart2.point().position("week*holiday").color("#fdae6b").size(3).shape("circle");

8，添加调整图表与用户的交互展示，移除默认的分类图例筛选交互，渲染图表。

chart2.interaction("active-region");
chart2.removeInteraction("legend-filter"); // 自定义图例，移除默认的分类图例筛选交互
chart2.render();

效果图展示

仪表盘

1，初始化一个数据

var datas = [
  {
    value: 6.2
  }
];

2，自定义Shape 部分，获取极坐标系下画布中心点，自定义了仪表盘的指针形状，由一条线和一个圆圈组合而成。

registerShape("point", "pointer", {
  draw(cfg, container) {
    const group = container.addGroup({});
    // 获取极坐标系下画布中心点
    const center = this.parsePoint({ x: 0, y: 0 });
    // 绘制指针
    group.addShape("line", {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: cfg.x,
        y2: cfg.y,
        stroke: cfg.color,
        lineWidth: 5,
        lineCap: "round"
      }
    });
    group.addShape("circle", {
      attrs: {
        x: center.x,
        y: center.y,
        r: 9.75,
        stroke: cfg.color,
        lineWidth: 4.5,
        fill: "#fff"
      }
    });
    return group;
  }
});

3，初始化Chart的对象,并载入数据源

const chart1 = new Chart({
  container: "container_one",
  autoFit: true,
  height: 500,
  padding: [0, 0, 30, 0]
});
chart1.data(datas);

4，坐标系配置（层叠柱状图）

chart1.coordinate("polar", {
  startAngle: (-9 / 8) * Math.PI, //开始角度
  endAngle: (1 / 8) * Math.PI,    //结束角度
  radius: 0.75
});

5，设置度量单位

chart1.scale("value", {
  min: 0,
  max: 9,
  tickInterval: 1
});

6，设置坐标轴

chart1.axis("value", {
  line: null, //轴线
  label: { //文本
    offset: -40,
    style: {
      fontSize: 18,
      fill: "#CBCBCB",
      textAlign: "center",
      textBaseline: "middle"
    }
  },
  tickLine: {  //刻度线
    length: -24
  },
  grid: null  //网格线
});

7，设置图例的显示，和提示框以及创建图形语法

chart1.legend(false);
chart1.tooltip(false);
chart1.point().position("value*1").shape("pointer").color("#62daab");

8，绘制仪表盘背景以及仪表盘显示多少的覆盖样式，可以用层级zIndex的属性来叠加样式

chart1.annotation().arc({
  zIndex: 0,
  top: false,
  start: [0, 0.945],
  end: [9, 0.945],
  style: { // 底灰色
    stroke: '#CBCBCB',
    lineWidth: 18
  }
});
chart1.annotation().arc({
  zIndex: 1,
  start: [0, 0.945],
  end: [datas[0].value, 0.945],
  style: {
    stroke: '#62daab',
    lineWidth: 18
  }
});

9，绘制指标的文字和数字内容，如果在同一行显示直接在content上文字和数字内容拼接即可，不必再调用一次annotation()。

chart1.annotation().text({
  position: ["50%", "85%"],
  content: "达标率",
  style: {
    fontSize: 20,
    fill: "#62daab",
    textAlign: "center"
  }
});
chart1.annotation().text({
  position: ["50%", "90%"],
  content:`${datas[0].value * 10} %`,
  style: {
    fontSize: 36,
    fill: "#545454",
    textAlign: "center"
  },
  offsetY: 15
});

10，渲染图表

chart1.render(datas);

效果图展示

结语：

好了文章到这就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下；希望这篇文章对大家有用,也希望大家多多支持我。今天是我参与2022首次更文挑战的第28天，加油！