antv f2图表参数详解

比眉伴天荒 2023-09-24 21:32 95阅读 0赞

## 面积图 ##

--------------------

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

![fd0b5a6038944b63a7b52dd133368a5f.png][]

常用参数文档

<table style="width:656px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th style="width:342px;">说明</th> 
   <th style="width:128px;">类型</th> 
   <th style="width:108px;">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>container</td> 
   <td style="width:342px;">指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例</td> 
   <td style="width:128px;">string | HTMLElement</td> 
   <td style="width:108px;">-</td> 
  </tr> 
  <tr> 
   <td>autoFit</td> 
   <td style="width:342px;">图表是否自适应容器宽高， 如果用户设置了 height，那么会以用户设置的 height 为准</td> 
   <td style="width:128px;">boolean</td> 
   <td style="width:108px;">false</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td style="width:342px;">图表宽度</td> 
   <td style="width:128px;">number</td> 
   <td style="width:108px;">-</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td style="width:342px;">图表高度</td> 
   <td style="width:128px;">number</td> 
   <td style="width:108px;">-</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td style="width:342px;">图表内边距</td> 
   <td style="width:128px;">'auto'|number |number[]</td> 
   <td style="width:108px;">'auto'</td> 
  </tr> 
 </tbody> 
</table>

度量 scale

<table style="width:633px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>min</td> 
   <td>设置对应坐标系的最小值</td> 
   <td>any</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>设置对应坐标系的最小值</td> 
   <td>any</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>坐标系的绘制范围，一般不用修改</td> 
   <td>[number,number]</td> 
   <td>[0, 1]</td> 
  </tr> 
  <tr> 
   <td>alias</td> 
   <td>数据字段的显示别名，一般用于字段对应中文名称设置</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>nice</td> 
   <td>自动调整 min、max</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

提示 tooltip

<table style="width:633px;"> 
 <thead> 
  <tr> 
   <th style="width:124px;">属性</th> 
   <th style="width:293px;">说明</th> 
   <th style="width:111px;">类型</th> 
   <th style="width:104px;">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:124px;">showTitle</td> 
   <td style="width:293px;">是否展示 tooltip 标题</td> 
   <td style="width:111px;">boolean</td> 
   <td style="width:104px;">false</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">shared</td> 
   <td style="width:293px;">true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容</td> 
   <td style="width:111px;">boolean</td> 
   <td style="width:104px;">false</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">showCrosshairs</td> 
   <td style="width:293px;">是否显示 tooltips 辅助线。</td> 
   <td style="width:111px;">boolean</td> 
   <td style="width:104px;">false</td> 
  </tr> 
 </tbody> 
</table>

坐标系 axis

<table style="width:629px;"> 
 <thead> 
  <tr> 
   <th style="width:121px;">属性</th> 
   <th style="width:295px;">说明</th> 
   <th style="width:110px;">类型</th> 
   <th style="width:102px;">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:121px;">line</td> 
   <td style="width:295px;">坐标轴线的配置项，null 表示不展示</td> 
   <td style="width:110px;">null | object</td> 
   <td style="width:102px;">-</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">tickLine</td> 
   <td style="width:295px;">坐标轴刻度线线的配置项，null 表示不展示</td> 
   <td style="width:110px;">null | object</td> 
   <td style="width:102px;">-</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">grid</td> 
   <td style="width:295px;">坐标轴网格线的配置项，null 表示不展示</td> 
   <td style="width:110px;">null | object</td> 
   <td style="width:102px;">-</td> 
  </tr> 
 </tbody> 
</table>

**chart.line(options)**

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

**chart.area(options)**

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

**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()

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

<table style="width:626px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th style="width:468px;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>smooth</td> 
   <td style="width:468px;">用于折线图平滑设置</td> 
  </tr> 
 </tbody> 
</table>

<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>

###  ###

[fd0b5a6038944b63a7b52dd133368a5f.png]: https://img-blog.csdnimg.cn/fd0b5a6038944b63a7b52dd133368a5f.png