雷达图

怎么把图表渲染到页面？

• 详见官网快速上手

• g2.antv.vision/zh/docs/man… 注意： Vue3 使用的话要放在onMounted里不然挂载不到节点

• new Chart()： 创建 Chart 图表对象

  • container： 挂载的节点
  • autoFit： 图表是否自适应容器宽高，默认为 false，用户需要手动设置 width 和 height。
  • width： 宽
  • hight： 高
  • padding：内边距
  • defaultInteractions：配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'，除了这些，还可以通过 registerAction 自定义交互类型。
  • limitInPlot：是否对超出坐标系范围的 Geometry 进行剪切。
  • pixelRatio： 设置设备像素比，默认取浏览器的值 window.devicePixelRatio。
  • renderer： 指定渲染引擎，默认使用 canvas。
  • theme： 配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。

      registerTheme('customTheme', {
        defaultColor: 'red',
      });
  
      const chart = new G2.Chart({
        container: 'container',
        theme: 'customTheme',
      }); 
  

  • visible： chart 是否可见，默认为 true，设置为 false 则会隐藏。

• chart.data()

  • 绑定数据

    • 绑定数据调用方法为chart.data，之前的调用方法为 source，将在 V4.1 移除。参数格式只支持 json 数组。

  • 更新数据

    • 图表数据更新（前后数据结构不发生变化），更新后马上刷新图表。chart.changeData(data) => View
    • 仅需要更新数据，但不需要马上更新图表，可以调用 chart.data(data)，然后在需要更新图表时调用 chart.render()

• chart.scale()

  • 度量（Scale）用于定义数据的类型和展示方式,有三种传入方式，比较常用的就是第二种，就不进行一一举例了

  第一个参数为字段名，第二个参数为 *ScaleOption*。
  chart.scale('sale', {
    min: 0,
    max: 100,
  });
  

  • ScaleOption 配置如下：
    • type： 声明度量类型
      • 分类度量
        • cat: 分类度量: 分类，['男', '女']；
        • timeCat: 时间分类度量: 非连续的时间，比如股票的时间不包括周末或者未开盘的日期。
      • 连续度量
        • linear: 线性度量: 连续的数字 [1, 2, 3, 4, 5]；
          • time：连续的时间度量: 连续的时间类型；
        • log: log 度量: 连续非线性的 Log 数据 将 [1, 10, 100, 1000] 转换成 [0, 1, 2, 3]；
        • pow: pow 度量: 连续非线性的 pow 数据 将 [2, 4, 8, 16, 32] 转换成 [1, 2, 3, 4, 5]；
        • quantize：分段度量，用户可以指定不均匀的分段\
        • quantile: 等分度量，根据数据的分布自动计算分段
      • 常量度量
        • identity: 常量度量: 常量类型的数值，也就是说数据的某个字段是不变的常量；
    • key： 用于声明使用数据记录中的哪些字段来组成一条数据的唯一 id
      • 例： 下面数据两条数据的 id 分别为：'1-23' 和 '2-2'。

        const data = [
          { x: 1, y: 23, z: 'a' },
          { x: 2, y: 2, z: 'b' },
        ];
        
        chart.scale({
          x: { key: true },
          y: { key: true },
        });
        

    • field： 对应的字段属性名。
    • values： 输入域、定义域。
    • range： 输出域、值域，表示在绘图范围内可用于绘制的范围。
    • min： 定义域的最小值，d3 为 domain，ggplot2 为 limits，分类型下无效。
    • max：定义域的最大值，分类型下无效。
    • alias：数据字段的显示别名，scale 内部不感知，外部注入。
    • nice：自动调整 min、max 。
    • ticks：用于指定 tick，优先级最高。
    • tickInterval：tick 间隔，只对分类型和时间型适用，优先级高于 tickCount。。
    • minTickInterval：tick 最小间隔，只对 linear 适用。
    • tickCount：tick 个数。
    • maxTickCount：ticks 最大值。
    • formatter：tick 格式化函数，会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。
    • tickMethod：计算 ticks 的算法。
    • mask：时间度量 time, timeCat 时有效。底层使用 fecha 进行日期的格式，所以对于 mask 的字符串可以直接参考其写法。 这个api理解不透了吧，tick是什么？定义域、值域、输入域、输出域是什么？？？ 不要脸的讲，我也不会

• 定义域（domain），分类度量指的是各种分类值，连续度量则需要指定最小值、最大值；

• 值域（range），将分类、连续数据映射到范围，默认 0-1；

• 坐标点（ticks），用于显示在图例或者坐标轴上，对于分类度量，坐标点就是分类类型；连续的数据类型，需要计算出对人比较友好的坐标点、友好的坐标间距，例如：

  • 1，2，3，4，5
  • 0, 5,10,15,20
  • 0.001, 0.005,0.010 而不是：
  • 1.1，2.1，3.1，4.1
  • 12，22，32，42，52 个人理解：我输入一组数，他就是输入域。这个输入域进行一些列操作得到另一组数，他就是值域

• chart.axis()： 主要配置信息

  • position：适用于直角坐标系，设置坐标轴的位置。
  • line：适用于直角坐标系，设置坐标轴的位置。
  • tickLine：坐标轴刻度线线的配置项，null 表示不展示
  • subTickLine：坐标轴子刻度线的配置项，null 表示不展示。
  • title：标题的配置项，null 表示不展示。
  • label：文本标签的配置项，null 表示不展示。
  • animate：是否开启动画开关。
  • animateOption：动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。
  • verticalFactor：标记坐标轴 label 的方向，左侧为 1，右侧为 -1。
  • verticalLimitLength：配置坐标轴垂直方向的最大限制长度，对文本自适应有很大影响。

• chart.legend 配置图例 // 图例？ 什么破玩意 就是下边控制雷达图选择的多选框

  • chart.legend(false);关闭图例
  • layout： 布局方式： horizontal，vertical .......

• chart.tooltip() 配置提示信息有两种方式：

  • chart.tooltip(false); // 关闭 tooltip

  • chart.tooltip({}) 传入配置

  • container：自定义 tooltip 的容器。

  • containerTpl：用于指定图例容器的模板，自定义模板时必须包含各个 dom 节点的 class。

  • crosshairs：配置 tooltip 的辅助线，当且仅当 showCrosshairs 为 true 时生效。

    • crosshairs.type：x 表示 x 轴上的辅助线，y 表示 y 轴上的辅助线。
    • crosshairs.follow：辅助线是否跟随鼠标移动，默认为 false，即定位到数据点。
    • crosshairs.textBackground： 辅助线文本背景配置。
    • crosshairs.line： 辅助线的样式配置。
    • crosshairs.text： 辅助线文本配置，支持回调。

  • domStyles：TooltipDomStyles 是以 dom 节点的 class 为 key 的对象，CSSProperties 为 value 的对象。

  • enterable：tooltip 是否允许鼠标滑入，默认为 false，不允许。

  • follow：设置 tooltip 内容框是否跟随鼠标移动。默认为 true，跟随鼠标移动，false 则固定位置不随鼠标移动。

  • itemTpl：用于指定图例容器的模板，自定义模板时必须包含各个 dom 节点的 class。

    • tooltip dom 结构如下，dom 节点的 class 有：
      • g2-tooltip
      • g2-tooltip-title
      • g2-tooltip-list
      • g2-tooltip-list-item
      • g2-tooltip-marker
      • g2-tooltip-value
      • g2-tooltip-name

  • marker：tooltipMarker 的样式配置。

  • offset：tooltip 偏移量。

  • position：设置 tooltip 的固定展示位置，相对于数据点。

  • shared：true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容。

  • showContent：是否展示 tooltip 内容框。

  • showCrosshairs：是否显示 tooltips 辅助线。

  • showMarkers：是否渲染 tooltipMarkers。

  • showNil：是否显示 tooltip 列表项目中的空值，默认为 false，如果设置为 true，则会将 null、undefine 显示为空。

  • showTitle：是否展示 tooltip 标题。

  • TooltipCfg.title? : string | (title: string, datum: Datum) => string: 设置 tooltip 的标题内容：

    1. 字符串的时候，如果值为数据字段名，则会展示数据中对应该字段的数值，如果数据中不存在该字段，则直接展示 title 值。
    2. 回调方法的时候，第一个参数为默认的 title 字符串，第二个参数为当前的数据记录

  • TooltipCfg.customItems? : (items: TooltipItem[]) => TooltipItem[]: 在渲染 tooltip 之前，对 G2 的 tooltip items 列表项目进行用户自定义处理，默认不做任何处理。可以用来对 tooltip 列表进行过滤、排序、格式化等操作

• chart.label() geometry.label() 是将数据值映射到图形的文本上的方法

• chart.annotation() 图形标注，Annotation，作为 G2 图表的辅助元素，主要用于在图表上标识额外的标记注解。

• chart.option('slider', options) 缩略轴组件，Slider，可以让用户在数据量较大的情况下一次只关注局部的数据。

• chart.option('scrollbar', options) 滚动条组件，Scrollbar，可以让用户在数据量较大的情况下一次只关注局部的数据

• chart.facet() 分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图表矩阵的窗格中。

• chart.interaction()交互（Interaction）是 G2 中的重要 API，通过这个方法可以加载 G2 内置的交互，或者基于交互语法形式自定义的 Interaction 交互。G2 4.0 在交互方面做了非常大的调整，所有的交互代码都是插入式的，通过交互语法进行组织。使用交互的方式也非常简单，仅需要设置交互的名称即可。关于交互语法可以阅读交互语法。

• chart.animate()动画

  • appear: 初始化时的入场动画；
  • enter: 更新时的出现动画；
  • update: 更新时的变化动画；
  • leave: 更新时的动画；

• antv/data-set

  • DataSet 的目标是为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。

  • DataSet 主要完成了以下功能：

    • 源数据的解析，将 CSV, DSV, GeoJSON 转成标准的 JSON，查看 Connector。

    • 数据处理，查看 Transform：

      • 加工数据，包括 filter, map, fold(补数据) 等操作。
      • 统计函数，汇总统计、百分比、封箱 等统计函数。
      • 特殊数据处理，包括地理数据、矩形树图、桑基图、文字云 的数据处理。

  • 看介绍有点懵