G2除了支持函数调用方式外，也支持图形语法的配置项式声明方式。

为 Chart 对象新增 options 属性，用于支持配置项式声明。

  1. const chart = new G2.Chart({
  2.   width: 1000,
  3.   height: 500,
  4.   data: data,
  5.   padding: [ 20, 80, 60, 80 ]
  6.   options: {
  7.     // 在这里声明所有的配置属性
  8.   }
  9. });
  10. chart.render();

可以先通过以下几个例子来了解下：

实例 1：柱状图

  1. const data = [
  2.   { genre: 'Sports', sold: 275 },
  3.   { genre: 'Strategy', sold: 115 },
  4.   { genre: 'Action', sold: 120 },
  5.   { genre: 'Shooter', sold: 350 },
  6.   { genre: 'Other', sold: 150 }
  7. ];
  8. const chart = new G2.Chart({
  9.   container: 'c1',
  10.   forceFit: true,
  11.   height: 300,
  12.   data,
  13.   options: {
  14.     scales: {
  15.       'genre': {
  16.         alias: '游戏种类'
  17.       },
  18.       'sold': {
  19.         alias: '销售量'
  20.       }
  21.     },
  22.     geoms: [
  23.       {
  24.         type: 'interval',
  25.         position: 'genre*sold',
  26.         color: 'genre'
  27.       }
  28.     ]
  29.   }
  30. });
  31. chart.render();

对应函数式调用代码如下：

  1. const chart = new G2.Chart({
  2.   container: 'c1',
  3.   height : 300,
  4.   forceFit: true,
  5. });
  6. chart.source(data, {
  7.   genre: {
  8.     alias: '游戏种类'
  9.   },
  10.   sold: {
  11.     alias: '销售量'
  12.   }
  13. });
  14. chart.interval().position('genre*sold').color('genre')
  15. chart.render();

实例 2: 散点图

  1. const { DataView } = DataSet;
  2. $.getJSON('/assets/data/diamond.json', (data) => {
  3.   const dv = (new DataView()).source(data);
  4.   const caratAvg = dv.mean('carat'); // 计算克拉数均值
  5.   const priceAvg = dv.mean('price'); // 计算价格均值
  6.   const chart = new G2.Chart({
  7.     container: 'c2',
  8.     forceFit: true,
  9.     height: 450,
  10.     data,
  11.     options: {
  12.       guides: [
  13.         {
  14.           type: 'line',
  15.           start: [ caratAvg, 0 ], // 使用数组格式
  16.           end: [ caratAvg, 20000 ],
  17.           text: {
  18.             position: 'end',
  19.             autoRotate: false,
  20.             content: '克拉数均值:' + caratAvg
  21.           }
  22.         },
  23.         {
  24.           type: 'line',
  25.           start: {
  26.             carat: 0,
  27.             price: priceAvg
  28.           }, // 使用对象格式
  29.           end: {
  30.             carat: 4,
  31.             price: priceAvg
  32.           },
  33.           text: {
  34.             position: 'end',
  35.             autoRotate: false,
  36.             content: '价格均值:' + priceAvg,
  37.             style: {
  38.               textAlign: 'end'
  39.             }
  40.           }
  41.         },
  42.       ],
  43.       geoms: [
  44.         {
  45.           type: 'point',
  46.           position: 'carat*price',
  47.           shape: 'circle',
  48.           opacity: 0.3
  49.         }
  50.       ]
  51.     }
  52.   });
  53.   chart.render();
  54. });

对应函数式调用代码如下：

  1. const chart = new G2.Chart({ // 创建图表
  2.   container : 'c2',
  3.   forceFit: true,
  4.   height: 450
  5. });
  7. chart.source(data); // 设置数据源
  8. chart.point().position('carat*price').shape('circle').opacity(0.3);
  9. chart.guide().line({
  10.   start: [ caratAvg, 0 ], // 使用数组格式
  11.   end: [ caratAvg, 20000 ],
  12.   text: {
  13.     position: 'end',
  14.     autoRotate: false,
  15.     content: '克拉数均值:' + caratAvg
  16.   }
  17. });
  18. chart.guide().line({
  19.   start: {
  20.     carat: 0,
  21.     price: priceAvg
  22.   }, // 使用对象格式
  23.   end: {
  24.     carat: 4,
  25.     price: priceAvg
  26.   },
  27.   text: {
  28.     position: 'end',
  29.     autoRotate: false,
  30.     content: '价格均值:' + priceAvg,
  31.     style: {
  32.       textAlign: 'end'
  33.     }
  34.   }
  35. });
  36. chart.render(); // 图表渲染

实例 3：多 views

  1. $.getJSON('/assets/data/world.geo.json', (mapData) => {
  2.   const chart = new G2.Chart({
  3.     container: 'c3',
  4.     forceFit: true,
  5.     height: 450,
  6.     padding: [ 55, 20 ],
  7.     options: {
  8.       tooltip: {
  9.         showTitle: false
  10.       },
  11.       scales: {
  12.         longitude: {
  13.           sync: true
  14.         },
  15.         latitude: {
  16.           sync: true
  17.         }
  18.       },
  19.       axes: false,
  20.       legends: {
  21.         'trend': {
  22.           position: 'left'
  23.         }
  24.       }
  25.     }
  26.   });
  27.   // 绘制世界地图背景
  28.   const ds = new DataSet();
  29.   const worldMap = ds.createView('back')
  30.     .source(mapData, {
  31.       type: 'GeoJSON'
  32.     });
  33.   const view = chart.view({
  34.     data: worldMap,
  35.     options: {
  36.       tooltip: false,
  37.       geoms: [
  38.         {
  39.           type: 'polygon',
  40.           position: 'longitude*latitude',
  41.           style: {
  42.             fill: '#fff',
  43.             stroke: '#ccc',
  44.             lineWidth: 1
  45.           }
  46.         }
  47.       ]
  48.     }
  49.   });
  51.   // 绘制展示数据
  52.   // 可视化用户数据
  53.   const userData = [
  54.     { name: 'Russia', value: 86.8 },
  55.     { name: 'China', value: 106.3 },
  56.     { name: 'Japan', value: 94.7 },
  57.     { name: 'Mongolia', value: 98 },
  58.     { name: 'Canada', value: 98.4 },
  59.     { name: 'United Kingdom', value: 97.2 },
  60.     { name: 'United States of America', value: 98.3 },
  61.     { name: 'Brazil', value: 96.7 },
  62.     { name: 'Argentina', value: 95.8 },
  63.     { name: 'Algeria', value: 101.3 },
  64.     { name: 'France', value: 94.8 },
  65.     { name: 'Germany', value: 96.6 },
  66.     { name: 'Ukraine', value: 86.3 },
  67.     { name: 'Egypt', value: 102.1 },
  68.     { name: 'South Africa', value: 101.3 },
  69.     { name: 'India', value: 107.6 },
  70.     { name: 'Australia', value: 99.9 },
  71.     { name: 'Saudi Arabia', value: 130.1 },
  72.     { name: 'Afghanistan', value: 106.5 },
  73.     { name: 'Kazakhstan', value: 93.4 },
  74.     { name: 'Indonesia', value: 101.4 }
  75.   ];
  76.   const userDv = ds.createView()
  77.     .source(userData)
  78.     .transform({
  79.       geoDataView: worldMap,
  80.       field: 'name',
  81.       type: 'geo.region',
  82.       as: [ 'longitude', 'latitude' ]
  83.     })
  84.     .transform({
  85.       type: 'map',
  86.       callback: (obj) => {
  87.         obj.trend = (obj.value > 100) ? '男性更多' : '女性更多';
  88.         return obj;
  89.       }
  90.     });
  91.   const userView = chart.view({
  92.     data: userDv,
  93.     options: {
  94.       scales: {
  95.         'trend': {
  96.           alias: '每100位女性对应的男性数量'
  97.         }
  98.       },
  99.       geoms: [
  100.         {
  101.           type: 'polygon',
  102.           position: 'longitude*latitude',
  103.           color: {
  104.             field: 'trend',
  105.             colors: [ '#C45A5A', '#14647D' ]
  106.           },
  107.           opacity: 'value',
  108.           tooltip: 'name*trend',
  109.           animate: {
  110.             leave: {
  111.               animation: 'fadeOut'
  112.             }
  113.           }
  114.         }
  115.       ]
  116.     }
  117.   });
  118.   chart.render();
  119. });

对应的函数式调用代码如下：

  1. const chart = new G2.Chart({
  2.   container: 'c3',
  3.   forceFit: true,
  4.   height: 450,
  5.   padding: [ 55, 20 ]
  6. });
  7. chart.tooltip({
  8.   showTitle: false
  9. });
  10. // 同步度量
  11. chart.scale({
  12.   longitude: {
  13.     sync: true
  14.   },
  15.   latitude: {
  16.     sync: true
  17.   }
  18. });
  19. chart.axis(false);
  20. chart.legend('trend', {
  21.   position: 'left'
  22. });
  24. // 绘制世界地图背景
  25. const ds = new DataSet();
  26. const worldMap = ds.createView('back')
  27.   .source(mapData, {
  28.     type: 'GeoJSON'
  29.   });
  30. const worldMapView = chart.view();
  31. worldMapView.source(worldMap);
  32. worldMapView.tooltip(false);
  33. worldMapView.polygon().position('longitude*latitude').style({
  34.   fill: '#fff',
  35.   stroke: '#ccc',
  36.   lineWidth: 1
  37. });
  39. // 可视化用户数据
  40. const userData = [
  41.   { name: 'Russia', value: 86.8 },
  42.   { name: 'China', value: 106.3 },
  43.   { name: 'Japan', value: 94.7 },
  44.   { name: 'Mongolia', value: 98 },
  45.   { name: 'Canada', value: 98.4 },
  46.   { name: 'United Kingdom', value: 97.2 },
  47.   { name: 'United States of America', value: 98.3 },
  48.   { name: 'Brazil', value: 96.7 },
  49.   { name: 'Argentina', value: 95.8 },
  50.   { name: 'Algeria', value: 101.3 },
  51.   { name: 'France', value: 94.8 },
  52.   { name: 'Germany', value: 96.6 },
  53.   { name: 'Ukraine', value: 86.3 },
  54.   { name: 'Egypt', value: 102.1 },
  55.   { name: 'South Africa', value: 101.3 },
  56.   { name: 'India', value: 107.6 },
  57.   { name: 'Australia', value: 99.9 },
  58.   { name: 'Saudi Arabia', value: 130.1 },
  59.   { name: 'Afghanistan', value: 106.5 },
  60.   { name: 'Kazakhstan', value: 93.4 },
  61.   { name: 'Indonesia', value: 101.4}
  62.   ];
  63. const userDv = ds.createView()
  64.   .source(userData)
  65.   .transform({
  66.     geoDataView: worldMap,
  67.     field: 'name',
  68.     type: 'geo.region',
  69.     as: [ 'longitude', 'latitude' ]
  70.   })
  71.   .transform({
  72.     type: 'map',
  73.     callback: (obj) => {
  74.       obj.trend = (obj.value > 100) ? '男性更多' : '女性更多';
  75.       return obj;
  76.     }
  77.   });
  78. const userView = chart.view();
  79. userView.source(userDv, {
  80.   'trend': {
  81.     alias: '每100位女性对应的男性数量'
  82.   }
  83. });
  84. userView.polygon()
  85.   .position('longitude*latitude')
  86.   .color('trend', [ '#C45A5A', '#14647D' ])
  87.   .opacity('value')
  88.   .tooltip('name*trend')
  89.   .animate({
  90.     leave: {
  91.       animation: 'fadeOut'
  92.     }
  93.   });
  94. chart.render();

配置项属性

  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

用于定义所有的列定义。使用方式同 chart.scale()。

具体使用方式如下

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

具体列定义的参数 API： Scale。

示例

  1. chart.scale({
  2.   x: {
  3.     type: 'cat',
  4.     tickCount: 10
  5.   },
  6.   y: {
  7.     type: 'linear',
  8.     nica: false
  9.   }
  10. });
  11. // 上述函数调用对应如下配置项声明
  12. scales: {
  13.   x: {
  14.     type: 'cat',
  15.     tickCount: 10
  16.   },
  17.   y: {
  18.     type: 'linear',
  19.     nica: false
  20.   }
  21. }

coord

类型： object

坐标系配置，函数式调用 api: chart.coord(type, cfg)。

具体配置方式如下：

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

actions 属性的声明方式如下:

  1. actions: [
  2.   [ 'transpose' ],
  3.   [ 'rotate', 90 ],
  4.   [ 'scale', 1, -1 ],
  5.   [ 'reflect', 'x' ]
  6. ]

示例

  1. chart.coord('polar', {
  2.   innerRadius: 0.3,
  3.   startAngle: - Math.PI / 2,
  4.   endAngle: 3 * Math.PI / 2
  5. }).transpose();
  7. // 上述函数式调用对应如下配置
  8. coord: {
  9.   type: 'polar',
  10.   cfg: {
  11.     innerRadius: 0.3,
  12.     startAngle: - Math.PI / 2,
  13.     endAngle: 3 * Math.PI / 2
  14.   },
  15.   actions: [
  16.     [ 'transpose' ]
  17.   ]
  18. }

axes

类型：object

图表坐标轴配置，对应 chart.axis(dim, cfg) 方法。

具体使用方式：

  1. 不展示坐标轴
  1. axes: false
  1. 不展示某条坐标轴
  1. axes: {
  2.   field: false, // 不展示数据字段 field1 对应的坐标轴
  3. }
  1. 为各个的坐标轴进行配置
  1. axes: {
  2.    field1: {object},
  3.    field2: {object}
  4.    // ...
  5. }

具体的配置属性同 chart.axis(field, cfg)。

示例

  1. chart.axis('x', false);
  2. chart.axis('y', {
  3.   tickLine: {
  4.     length: 5,
  5.     lineWidth: 2
  6.   },
  7.   label: {
  8.     formatter: val => {
  9.       return val + '$';
  10.     },
  11.     textStyle: {
  12.       fontSize: 12
  13.     }
  14.   }
  15. });
  16. // 上述函数式调用对应如下配置
  17. axes: {
  18.   x: false,
  19.   y: {
  20.     tickLine: {
  21.       length: 5,
  22.       lineWidth: 2
  23.     },
  24.     label: {
  25.       formatter: val => {
  26.         return val + '$';
  27.       },
  28.       textStyle: {
  29.         fontSize: 12
  30.       }
  31.     }
  32.   }
  33. }

legends

类型： object

图表图例配置，对应 chart.legend()。

  1. 不显示所有的图例
  1. legends: false
  1. 为默认的图例进行配置
  1. legends: {
  2.   position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'
  3.   // ... 其他属性同 chart.legend()
  4. }
  1. 为各个数据字段对应的图例进行配置
  1. legends: {
  2.   field1: {object}, 
  3.   field2: false // 不展示 field2 对应的图例 
  4. }

示例

  1. chart.legend('x', false);
  2. chart.legend('y', {
  3.   position: 'top'
  4. });
  5. // 上述函数式调用对应如下配置
  6. legends: {
  7.   x: false,
  8.   y: {
  9.     position: 'top'
  10.   }
  11. }

guides

类型：array

图表辅助元素定义，对应 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.   ]

示例

  1. chart.guide().line({
  2.     start: [ caratAvg, 0 ], // 使用数组格式
  3.     end: [ caratAvg, 20000 ],
  4.     text: {
  5.       position: 'end',
  6.       autoRotate: false,
  7.       content: '克拉数均值:' + caratAvg
  8.     }
  9.   });
  10. // 上述函数式调用对应如下配置
  11. guides: [
  12.   {
  13.     type: 'line',
  14.     start: [ caratAvg, 0 ], // 使用数组格式
  15.     end: [ caratAvg, 20000 ],
  16.     text: {
  17.       position: 'end',
  18.       autoRotate: false,
  19.       content: '克拉数均值:' + caratAvg
  20.     }
  21.   }
  22. ]

filters

类型：object

数据过滤，对应 chart.filter(dim, callback)。

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

示例

  1. chart.filter('x', val => {
  2.   return val > 20;
  3. });
  4. // 上述函数式调用对应如下配置
  5. filters: {
  6.   x: val => {
  7.     return val > 20;
  8.   }
  9. }

tooltip

类型：object

对应 chart.tooltip()

示例

  1. chart.tooltip(false);
  2. chart.tooltip({
  3.   showTitle: false
  4. });
  5. // 上述函数式调用分别对应如下配置
  6. tooltip: false,
  7. tooltip: {
  8.   showTitle: false
  9. }

geoms

类型：array

用于声明绘制图表的图形语法，可同时声明多种 geom 配置。对应函数式调用 api： Geom。

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

positon

用于声明映射至位置 position 属性的数据字段，使用方式很简单：

  1. position: 'field1*field2'

或者

  1. position: {
  2.   field: 'field1*field2'
  3. }

color

  1. chart.geom().color(value) 对应：
  1. color: value, // value 可以是数据字段名、颜色值

或者

  1. color: {
  2.   field: value, // value 可以是数据字段名、颜色值
  3. }
  1. chart.geom().color(field, colors) 对应：
  1. color: {
  2.   field: {string}, // 声明映射至 color 属性的数据字段名
  3.   colors: {array | string } // string | array，可声明颜色、渐变颜色等
  4. }
  1. 回调函数声明 chart.geom().color(field, colorCallback) 对应：
  1. color: {
  2.   field: {string}, // 声明映射至 color 属性的数据字段名
  3.   callback: {function} // 用户自定义回调函数
  4. }

shape

  1. chart.geom().shape(value) 对应：
  1. shape: value, // value 可以是数据字段名、图形形状名

或者

  1. shape: {
  2.   field: value, // value 可以是数据字段名、图形形状名
  3. }
  1. chart.geom().shape(field, shapes) 对应：
  1. shape: {
  2.   field: {string}, // 声明映射至 shape 属性的数据字段名
  3.   shapes: {string | array} // string | array
  4. }
  1. 回调函数声明 chart.geom().shape(field, callback) 对应：
  1. shape: {
  2.   field: {string}, // 声明映射至 shape 属性的数据字段名
  3.   callback: {function} // 用户自定义回调函数
  4. }

size

  1. chart.geom().size(value） 对应
  1. size: value // value 可以是数据字段名、数值

或者

  1. size: {
  2.   field: value, // value 可以是数据字段名、图形形状名
  3. }
  1. chart.geom().size(field, [ min, max ]) 对应：
  1. size: {
  2.   field: {string}, // 声明映射至 size 属性的数据字段名
  3.   range: [min, max ] // 声明 size 的最大和最小值
  4. }
  1. chart.geom().size(field, callback) 对应：
  1. size: {
  2.   field: {string}, // 声明映射至 size 属性的数据字段名
  3.   callback: {function}
  4. }

opacity

  1. chart.geom().opacity(field) 对应：
  1. opacity: field, // field 对应映射至 opacity 的数据字段名、具体透明度数值

或者

  1. opacity: {
  2.   field: field // field 对应映射至 opacity 的数据字段名、具体透明度数值
  3. }
  1. chart.geom().opacity(field, callback) 对应
  1. opacity: {
  2.   field: {string}, // 声明映射至 opacity 属性的数据字段名
  3.   callback: {function}
  4. }

label

  1. chart.geom().label(field) 对应
  1. label: field, // field 对应字段名或者带有统计的声明
  1. chart.geom().label(field, cfg) 对应
  1. label: {
  2.   field: {string}, // 需要标注的数据字段名
  3.   cfg: {object} // 具体的 label 配置，参见 geom.label() 方法
  4. }
  1. 如果 label 中需要声明回调函数，声明 callback 属性即可：
  1. label: {
  2.   field: {string}, // 需要标注的数据字段名
  3.   cfg: {object}, // 具体的 label 配置
  4.   callback: {function}
  5. }

tooltip

  1. // 对应 geom.tooltip('x')
  2. tooltip: {string} // 直接声明需要显示在 tooltip 上的字段名
  3. // 对应 geom.tooltip('x', function(val){})
  4. tooltip: {
  5.   field: {string},
  6.   callback: {function}
  7. }

style

  1. // 使用方式一
  2. style: {
  3.   field: {string}, // 映射的字段
  4.   cfg: {object} // 配置信息
  5. };
  6. // 使用方式二
  7. style: {
  8.   lineWidth: 1 // 样式的配置信息
  9. }

select

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

active

  1. active: false | true

animate

  1. animate: {
  2.   // 同 geom.animate()
  3. }

View 视图的配置项声明

视图的配置项同 chart 基本一致，除了不支持 facet，以及 tooltip 属性值为 boolean 类型外，其他均同 chart 一致。

  1. const view = chart.view({
  2.   options: {
  3.     scales: {object}, // 列定义声明
  4.     coord: {object}, // 坐标系配置
  5.     axes: {object}, // 坐标轴配置
  6.     legends: {object}, // 图例配置
  7.     guides: {array}, // 图表辅助元素配置
  8.     filters: {object}, // 数据过滤配置
  9.     tooltip: {boolean}, // 默认值为 true，显示 tooltip， false 为关闭 tooltip
  10.     geoms: {array} // 图形语法相关配置
  11.   }
  12. });