chart.<geomType>()
  .position()
  .size()
  .color()
  .shape()
  .opacity()
  .adjust()
  .tooltip()
  .label()
  .style()
  .select();

chart.interval().position('x*y').color('x');

chart.area().position('x*y').adjust([ 'stack', 'symmetric' ]);

line().position('x*y');
line().position([ 'x', 'y' ]);

line().color('red'); // 常量颜色
line().color('type'); // 对 type 字段进行映射，使用内置的颜色
line().color('type', [ 'red', 'blue' ]) // 指定颜色
line().color('type', (type) => { // 通过回调函数
  if (type === 'a') {
    return 'red';
  }
  return 'blue';
});
line().color('type*value', (type, value) => { //多个参数，通过回调函数
  if (type === 'a' && value > 100) {
    return 'red';
  }
  return 'blue';
});

chart.point().position('x*y').color('x'); // 对 x 字段进行映射，使用内置的颜色
chart.point().position('x*y').color('red'); // 所有点用红色渲染
chart.point().position('x*y').color('l(270) 0:#173162 1:#3663a1'); // 使用渐变色，l 后面传入角度，0 代表起始颜色，1 代表结束颜色

chart.point().position('x*y').color('z'); // 使用默认的颜色
chart.point().position('x*y').color('z', [ 'red', 'blue' ]); // 使用传入的指定颜色
chart.point().position('x*y').color('z', 'red-blue'); // 使用渐变色

chart.point().position('x*y').color('z', (value) => {
  if(value === 1) {
    return 'red'
  }

  return 'blue';
});

point.shape('circle'); // 常量
point.shape('type'); // 使用字段映射到形状，使用内置的形状
point.shape('type', [ 'circle', 'diamond', 'square' ]); // 指定形状
point.shape('type', (type) => { // 回调函数
  if(type === 'a') {
    return 'circle';
  }
  return 'square';
});

chart.point().position('x*y').shape('square'); // 指定所有点的图形是正方形

const shapes = {
  point: [ 'hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle', 'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line' ],
  line: [ 'line', 'dash', 'dot' ],
  area: [ 'area' ]
};

const defs = {
  'cut': {
    values: [ 'Ideal', 'Premium', 'Very-Good', 'Good', 'Fair' ]
  }
};
chart.source(data, defs);
chart.point().position('carat*price').shape('cut'); // 使用默认的 shapes
chart.point().position('carat*price').shape('cut', [ 'cross', 'tick', 'plus', 'hyphen', 'line' ]); // 使用自定义的 shapes

chart.point().position('x*y').shape('z', (value) => {
  if (value === 1) {
    return 'circle'
  }
  return 'square';
});

point.size(10); // 常量
point.size('type'); // 使用字段映射到大小
point.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
point.size('type', (type) => { // 回调函数
  if(type === 'a') {
    return 10;
  }
  return 5;
});

chart.point().position('x*y').size('z'); // 使用 z 字段的值来映射大小

chart.point().position('x*y').size('z', [ 10, 100 ]); // 使用 z 字段的值来映射大小，最大值为 100，最小值 10

chart.point().position('x*y').size('z', (value) => {
  if(value === 1) {
    return 5;
  }
  return 10;
});

point.opacity(0.3); // 常量，但是数值范围为 0 - 1
point.opacity('type'); // 使用字段映射到透明度
point.opacity('type', (type) => { // 回调函数
  if(type === 'a') {
    return 1;
  }
  return 0.5;
});

chart.interval().position('x*y').opacity(0.8); // 图形颜色为 0.8 透明度

chart.interval().position('x*y').opacity('z');

chart.point().position('x*y').opacity('z', (value) => {
  if(value === 1) {
    return 0.5;
  }
  return 0.8;
});

interval().adjust('stack');
interval().adjust([ 'dodge', 'stack' ]);
interval().adjust([{
  type: 'dodge',
  marginRatio: 0, // 数值范围为 0 至 1，用于调整分组中各个柱子的间距
  dodgeBy: 'xx' // 声明按照 xx 字段进行分组，一般不需要声明
}]);

chart.interval().position('x*y').color('z').adjust('stack');

chart.interval()
    .position('year*percent')
    .color('country')
  	.adjust({type: 'stack', reverseOrder: false});

line.label('field'); // 显示某个字段的文本
line.label('x*y*z', (x, y, z) => {
  return; // something
});

line.label('x', {
  offset: 10
  textStyle: {
    fill: 'red'
  }
});

chart.point().position('x*y').label('x');

chart.line().label('x', {
  // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
  textStyle: {
    textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    fill: '#404040', // 文本的颜色
    fontSize: '12', // 文本大小
    fontWeight: 'bold', // 文本粗细
    textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  },
   rotate: 30,
})

chart.polygon()
  .position('children*value')
  .color('type').shape('stroke')
  .label('name*children', (name, children) => {
  	if (children === 0) {
  	// 若children为0，不显示该项
        return null;
  	}
  	// 设置没有子节点的标签为红色，有子节点的为蓝色
    if (!children) {
      // 显示的文本使用 content，如果不设置这个值，会自动设置 label 函数里面的第一个字段
      return { textStyle: { fill: 'red' }，content: name };
    } else {
      return { textStyle: { fill: 'blue' } };
    }
  }, {
    textStyle: {
      fontSize: 12
    }
  });

chart.point().position('x*y').label('x', {
  /**
   * 格式化文本信息
   * @param  {string} text  文本值
   * @param  {object} item  该文本值对应的原始数据记录
   * @param  {number} index 索引值
   * @return {string}       返回格式化后的文本
   */
    formatter: function(text, item, index) {
        return text + item.point.y；     // 设置文本为 x + y
    }
});

chart.line().label('x', {
    labelLine: {
      lineWidth: 1, // 线的粗细
      stroke: '#ff8800', // 线的颜色
      lineDash: [ 2, 1 ], // 虚线样式
    }
});

chart.area().label('x', {
       useHtml: true,
       htmlTemplate: (text, item, index) {
           return '<div>' + text + '</div>';
       }
   })

tooltip(false); // 关闭该 geom 上的 tooltip
tooltip('x');
tooltip('x*y');
tooltip('x*y', (x, y) => {})

chart.<geom>.tooltip('dim1*dim2...*dimN');

const data = [
  { gender: "female", height: 161.2, weight: 51.6 },
  { gender: "female", height: 167.5, weight: 59 },
  { gender: "male", height: 159.5, weight: 49.2 },
  { gender: "male", height: 157, weight: 63 },
  { gender: "female", height: 155.8, weight: 53.6 }
];
const chart = new G2.Chart({
  container: 'c2',
  forceFit: true,
  height: 400
});

chart.source(data, {
  weight: {
    alias: '体重（kg）'
  },
  height: {
    alias: '身高（cm）'
  }
});
chart.tooltip({
  showTitle: false
});
chart.point().position('height*weight')
  .color('gender', [ '#f96a52', '#00a3d7' ])
  .opacity(0.5)
  .shape('circle')
  .tooltip('gender*height*weight');
chart.render();

chart.tooltip({
  itemTpl: '<li>{x}: {y}</li>'
});
chart.line()
  .position('x*y')
  .tooltip('x*y', (x, y) => {
    return {
      x,
      y
    };
  );

const { DataView } = DataSet;
const data = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 },
  { item: '事例三', count: 17 },
  { item: '事例四', count: 13 },
  { item: '事例五', count: 9 }
];
const dv = new DataView();
dv.source(data).transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
});
const chart = new G2.Chart({
  container: 'c3',
  forceFit: true,
  height: 400,
  padding: [ 80, 100, 80, 80 ]
});
chart.source(dv, {
  percent: {
    formatter: val => {
      val = (val * 100) + '%';
      return val;
    }
  }
});
chart.coord('theta', {
  radius: 0.75
});
chart.tooltip({
  showTitle: false,
  itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.intervalStack()
  .position('percent')
  .color('item')
  .label('percent', {
    formatter: (val, item) => {
      return item.point.item + ': ' + val;
    }
  })
  .tooltip('item*percent', (item, percent) => {
    percent = percent * 100 + '%';
    return {
      name: item,
      value: '<span style="color: #1890ff;">' + percent + '</span>'
    };
  })
  .style({
    lineWidth: 1,
    stroke: '#fff'
  });
chart.render();

// 几种使用方式
line().style({ // 统一为所有 shape 设置固定的样式
  lineWidth: 2
});
line().style('a*b', { // 使用回调函数设置属性
  lineWidth: (a, b) => {},
  stroke: 'red'
});

geom.select(false); // 关闭
geom.select(true); // 打开
geom.select([true], {
  mode: 'single' | 'multiple', // 选中模式，单选、多选
  style: {}, // 选中后 shape 的样式
  cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
  animate: true | false // 选中是否执行动画，默认执行动画
});

geom.active(false); // 关闭默认响应
geom.active(true); // 开启默认响应

geom.active([true,] {
  highlight: false, // true 是否开启 highlight 效果，开启时没有激活的变灰
  style: {
    fill: 'red'
  }
});

geom().animate({
  appear: {
    // 初始入场动画配置
  }
  enter: {
    // 更新时出现动画配置
  },
  leave: {
    // 更新时销毁动画配置
  },
  update: {
    // 更新时改变动画配置
  }
});

const line = chart.line({visible: false}).position('x*y');

line.show();

const line = chart.line().position('x*y');

line.hide();

const data = [{}, {}];
const interval = chart.intervalStack()
    .position('percent')
    .color('item');


chart.render();
interval.setSelected(data[0]);