上一次讲了chart的一些基本属性，这次再讲一讲chart的另一个很重要的属性叫options，因为options内容比较多，而且也很重要，所以将这个属性单独放到一篇文章来分析，此篇是对options内部属性的大致介绍，具体关于每个属性的详细分析将在之后章节进行讲解。

options属性内容:

  1. const options = {
  2.   scales: {object}, // 列定义声明
  3.   coord: {object}, // 坐标系配置
  4.   axes: {object}, // 坐标轴配置
  5.   legends: {object}, // 图例配置
  6.   guides: {array}, // 图表辅助元素配置
  7.   filters: {object}, // 数据过滤配置
  8.   tooltip: {object}, // 提示信息配置
  9.   facet: {object}, // 分面配置
  10.   geoms: {array} // 图形语法相关配置
  11. }

scales(度量)

参数类型：object
度量配置属性，函数式调用api： chart.scale()

度量定义

度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作，从原始数据到 [0, 1] 区间的转换我们称之为归一化操作。

配置方式

  1. scales: {
  2.   field1: {object}, // 为数据字段 field1 进行列定义
  3.   field2: {object}, // 为数据字段 field2 进行列定义
  4.   ...
  5. }

为什么需要度量来转换数据？

因为我们不可能直接将数据放到图表上，最后绘图的时候我们要的其实是每个数据位置，比如：

  1. const chart=new G2.Chart({
  2.         container:"root",
  3.         width:400,
  4.         height:400,
  5.         options:{
  6.             scales:{
  7.                 name:{
  8.                     type:"cat"
  9.                 },
  10.                 value:{
  11.                   type:"linear"
  12.                 }
  13.             }
  14.         }
  15.     });
  16.     const data=[
  17.         {name:"martin",value:5},
  18.         {name:"lucy",value:10}
  19.     ];
  20.     chart.source(data);
  21.     chart.interval().position("name*value");
  22.     chart.render();

说明： 这里我们画的是一个柱状图，X轴要显示name信息，而且name不是数值，所以要把它表示在坐标轴上，必须用某种规则把它表示成数值；同样Y轴要显示value信息，虽然value数值，但是我们不可能把value值直接当成柱高来展示，因为那样我们柱高和图表的height就不好把控，height过大，柱高可能很小，看上去很难看，所以最好的方式用比例来显示，这样的话无论图表的height多大或多小，图形都能以最好的比例来展示。所以我们将坐标轴的起点看成0，终点看成1，然后把原始数据转换到[0,1]的区间，中间的转换规则就叫scales度量。

scales分类

按照数据类型，可以将scales的类型分成以下几类：

数据类型 度量类型
连续 linear、log、pow、time
分类(非连续) cat、timeCat
固定 identity

关于scale的具体用法见scale用法解析。

coord (坐标系)

参数类型：object
坐标系配置参数，函数式调用api： chart.coord()

配置方式

  1. coord: {
  2.   type: {string}, // 坐标系类型声明，可取值: rect polar theta map helix gauge clock
  3.   cfg: {object}, // 对应各个 type 坐标系属性配置，同 `chart.coord(type, cfg)` 中的 cfg
  4.   actions: {array} // 声明坐标系需要进行的变换操作
  5. }

coord分类

coord类型可以分为直角坐标系和极坐标系两大类，具体类型见下表：

type coordType 说明
直角坐标系 rect 直角坐标系，目前仅支持二维，由 x, y 两个互相垂直的坐标轴构成。
极坐标系 polar 极坐标系，由角度和半径 2 个维度构成。
theta 一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制。
helix 螺旋坐标系，基于阿基米德螺旋线。

关于coord的具体用法见coord用法解析。

axes(坐标轴)

参数类型：Boolean||object
坐标轴配置属性，函数式调用api:chart.axis(dim, cfg)

配置方式

参数为Boolean

  1. //不展示某一条坐标轴
  2. axes:{
  3.   field1:false// 不展示数据字段 field1 对应的坐标轴
  4. }
  6. //不展示所有坐标轴
  7. axes:false//不展示所有数据字段对应的坐标轴

参数为Object

  1. axes: {
  2.    field1: {object},
  3.    field2: {object}
  4.    // ...
  5. }

关于axes的具体用法见axis用法解析。

legends(图例)

参数类型：Boolean||object
图例配置属性，函数式调用api:chart.legend()

配置方式

参数为Boolean

  1. legends:false//不显示所有图例

参数为Object

  1. legends: {
  2.   position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'
  3.   title:"price"
  4.   //···
  5. }

关于legends的具体用法见legends用法解析。

guides(辅助元素)

参数类型：array
辅助元素配置属性，函数式调用api:chart.guide()

配置方式

  1. [
  2.     {
  3.       type: 'line', // 声明辅助元素的类型
  4.       start: {array}, // 辅助线起始点，[startX, startY]
  5.       end: {array}, // 辅助线结束点，[endX, endY]
  6.       style: {
  7.         stroke: '#999', // 线的颜色
  8.         lineDash: [ 0, 2, 2 ], // 虚线的设置
  9.         lineWidth: 3 // 线的宽度
  10.       } // {object} 配置项,与原语法相同
  11.     }
  12.   ]

关于guides的具体用法见guides用法解析。

filters

参数类型：object
辅助元素配置属性，函数式调用api: chart.filter(dim,callback)

配置方式

  1. filters: {
  2.   field1: {function}, // 对字段名为 field1 的数据进行过滤
  3.   field2: {function}, // 对字段名为 field2 的数据进行过滤
  4.   ...
  5. }

关于filters的具体用法见filters用法解析。

tooltip

参数类型：Boolean||object
辅助元素配置属性，函数式调用api: chart.tooltip()

配置方式

参数为Boolean

  1. tooltip: false//所有提示信息不显示

参数为Object

  1. tooltip: {
  2.   showTitle: false
  3.   //...
  4. }

关于tooltip的具体用法见tooltip用法解析。

geoms

类型：array
声明绘制图表的图形语法，可同时声明多种 geom 配置。对应函数式调用 api： chart.<geomType> 。

配置方式

  1. geoms: [
  2.   {
  3.     type: {string}, // 声明 geom 的类型：point line path area interval polygon schema edge heatmap pointStack pointJitter pointDodge intervalStack intervalDodge intervalSymmetric areaStack schemaDodge
  4.     adjust: {string} | {array}, // 数据调整方式声明，如果只有一种调整方式，可以直接声明字符串，如果有多种混合方式，则以数组格式传入
  5.     position: {string} | {object}, // potision 图形属性配置
  6.     color: {string} | {object}, // color 图形属性配置
  7.     shape: {string} | {object}, // shape 图形属性配置
  8.     size: {string} | {object}, // size 图形属性配置
  9.     opacity: {string} | {object}, // opacity 图形属性配置
  10.     label: {string} | {object}, // 图形上文本标记的配置
  11.     tooltip: {string}, // 配置 tooltip 上显示的字段名称
  12.     style: {object}, // 图形的样式属性配置
  13.     active: {boolean}, // 开启关闭 geom active 交互
  14.     select: {object}, // geom 选中交互配置
  15.     animate: {object} // 动画配置
  16.   },
  17.   {
  18.     // 同上述配置相同，可以定义多个 geom
  19.   }
  20. ]

注意：options中的geoms可以和chart.geom()同时设置，且两者会同时生效，不会互相覆盖。
例子：

  1. const data=[
  2.         {name:"martin",value:5},
  3.         {name:"lucy",value:10}
  4.     ];
  5.     const chart=new G2.Chart({
  6.         container:"root",
  7.         width:400,
  8.         height:400,
  9.         options:{
  10.             geoms:[{
  11.                 type:"line",
  12.                 position:"name*value"
  13.             }]
  14.         }
  15.     });
  17.     chart.source(data);
  18.     chart.interval().position("name*value");
  19.     chart.render();

图片.png
上图代码中，options的geoms设置为线图，而chart.geom()设置为柱图，结果发现两种图同时出现，所以geoms属性设置和chart.geom()函数设置是会同时生效的。

关于geoms的具体用法见geoms用法解析。

position

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().position()

配置方式

参数类型为String
  1. position: 'field1*field2'

参数类型为Object
  1. position: {
  2.   field: 'field1*field2'
  3. }

关于position的具体用法见geoms用法解析。

color

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().color()

配置方式

参数类型为String
  1. color: value// value 可以是数据字段名、颜色值

参数类型为Object
  1. color: {
  2.  field: value// value 可以是数据字段名、颜色值
  3. }

关于color的具体用法见geoms用法解析。

shape

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().shape()

配置方式

参数类型为String
  1. shape: value// value 可以是数据字段名、图形形状名

参数类型为Object
  1. shape: {
  2.  field: value// value 可以是数据字段名、图形形状名
  3. }

关于shape的具体用法见geoms用法解析。

size

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().size()

配置方式

参数类型为String
  1. size: value// value 可以是数据字段名、数值

参数类型为Object
  1. opacity: {
  2.  field: value// value 可以是数据字段名、数值
  3.  callback: {function}
  4. }

关于size的具体用法见geoms用法解析。

opacity

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().opacity()

配置方式

参数类型为String
  1. opacity: value// value对应映射至 opacity 的数据字段名、具体透明度数值

参数类型为Object
  1. opacity: {
  2.  field: value// value对应映射至 opacity 的数据字段名、具体透明度数值
  3. }

关于opacity的具体用法见geoms用法解析。

label

参数类型：String || Object
辅助元素配置属性，函数式调用api: chart.geom().label()

配置方式

参数类型为String
  1. label: value// value对应字段名或者带有统计的声明

参数类型为Object
  1. shape: {
  2.  field: value// value 需要标注的数据字段名
  3.  cfg: {object} // 具体的 label 配置，参见 geom.label() 方法
  4.  callback: {function}
  5. }

关于label的具体用法见geoms用法解析。

style

参数类型：Object
辅助元素配置属性，函数式调用api: chart.geom().style()

配置方式

  1. style: {
  2.   field: {string}, // 映射的字段
  3.   cfg: {object} // 配置信息
  4. };

关于style的具体用法见geoms用法解析。

select

参数类型：Boolean || Object

辅助元素配置属性，函数式调用api: chart.geom().select()

配置方式

参数类型为Boolean
  1. select: Boolean//开启关闭选中功能

参数类型为Object
  1. select: {
  2.      mode:  'multiple' | 'single', // multiple 为多选，single 为单选， false 为关闭选中功能
  3.   style: {
  4.     // 设置选中图形的样式，不设置则使用默认提供的样式
  5.     // 图形绘制属性，如 fill stroke
  6.   }
  7. }

关于select的具体用法见geoms用法解析。

active

参数类型：Boolean
辅助元素配置属性，函数式调用api: chart.geom().active()

配置方式

  1. active: Boolean//开启关闭 geom active 交互

关于active的具体用法见geoms用法解析。

animate

参数类型：Object
辅助元素配置属性，函数式调用api: chart.geom().animate()

配置方式

  1. shape: {
  2.  field: value// value 可以是数据字段名、图形形状名
  3. }

关于animate的具体用法见geoms用法解析。