antv f2图表参数详解

面积图

折线图是经常使用并且比较容易的一种图形，G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合，折线图和面积图混合就可以实现如图效果；

常用参数文档

属性	说明	类型	默认值
container	指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例	string \| HTMLElement	-
autoFit	图表是否自适应容器宽高，如果用户设置了 height，那么会以用户设置的 height 为准	boolean	false
width	图表宽度	number	-
height	图表高度	number	-
padding	图表内边距	'auto'\|number \|number[]	'auto'

度量 scale

属性	说明	类型	默认值
min	设置对应坐标系的最小值	any	-
max	设置对应坐标系的最小值	any	-
range	坐标系的绘制范围，一般不用修改	[number,number]	[0, 1]
alias	数据字段的显示别名，一般用于字段对应中文名称设置	string	-
nice	自动调整 min、max	boolean	false

提示 tooltip

属性	说明	类型	默认值
showTitle	是否展示 tooltip 标题	boolean	false
shared	true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容	boolean	false
showCrosshairs	是否显示 tooltips 辅助线。	boolean	false

坐标系 axis

属性	说明	类型	默认值
line	坐标轴线的配置项，null 表示不展示	null \| object	-
tickLine	坐标轴刻度线线的配置项，null 表示不展示	null \| object	-
grid	坐标轴网格线的配置项，null 表示不展示	null \| object	-

chart.line(options)

用于绘制折线图、曲线图、阶梯线图等。

chart.area(options)

用于绘制区域图（面积图）、层叠区域图、区间区域图等。

扫描二维码关注公众号，回复： 16254719 查看本文章

geom.position()

配置 position 通道映射规则

示例：

// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');

geom.color()

配置图表颜色

// 基础颜色设置
geom.color('#1890ff');
// 渐变
geom.color("l(90) 0:#0b83de 1:#0c1c2d")

geom.shape()

图形相关设置，文档上的说明不是很全，可以从图表示例获取相应信息

属性	说明
smooth	用于折线图平滑设置

<template>
  <div id="container"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 数据源
    const data = [
      { time: "8/1", value: 240 },
      { time: "8/10", value: 600 },
      { time: "8/20", value: 350 },
      { time: "8/31", value: 470 },
    ];
    // 初始化图表，列出图表属性
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [100, 20, 30, 40],
    });
    // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("time*value")
    // 前面为x轴，所以 time 为 x 轴， value 为 y 轴
    chart.data(data);
    // 度量
    // x，y轴坐标系是根据
    chart.scale({
      // y轴坐标系设置
      value: {
        min: 0,
        nice: true,
        alias: "用户",
      },
      // x轴坐标系设置
      time: {
        range: [0, 1],
      },
    });
    // 提示信息
    chart.tooltip({
      // 是否显示辅助线
      showCrosshairs: true,
      // 是否合并所有点展示
      shared: false,
    });
    // value 坐标系设置
    chart.axis("value", {
      grid: null,
      tickLine: null,
    });
    // time 坐标系设置
    chart.axis("time", {
      line: null,
      tickLine: null,
    });
    // 图表绘制设置
    // 面积图
    chart
      .area()
      .position("time*value")
      .color("l(90) 0:#0b83de 1:#0c1c2d")
      .shape("smooth");
    // 折线图
    chart.line().position("time*value").color("#0b83de").shape("smooth");
    // 渲染图表
    chart.render();
  },
};
</script>

antv f2图表参数详解

面积图

猜你喜欢