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

chart.point().position('cut');
chart.interval().position('cut*price');
chart.interval().position(Stat.summary.median('cut*price'));

chart.point().position('x*y').color('x');
chart.point().position('x*y').color('red')

chart.point().position('x*y').color('z'); // 使用默认的颜色
chart.point().position('x*y').color('z', ['red', 'blue']); // 使用传入的指定颜色
chart.point().position('x*y').color('z', 'hue'); // 使用某种颜色计算方式，这里是使用色调
chart.point().position('x*y').color('z','red-blue'); // 使用渐变色

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

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

var 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', function(value) {
  if (value === 1) {
    return 'circle'
  }else {
    return 'square';
  }
});

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

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

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

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

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

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

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

chart.intervalStack().position('x*y').label('x', {
  offset: -16, // 文本距离图形的距离
  lableLine: false, //  是否显示点到图形的连接线，目前仅饼图支持，默认为 true，显示连接线
  label: {
    fontWeight: 'bold', // 文本粗细
    fontFamily: '宋体', // 文本字体
    fontSize: 12, // 文本大小
    rotate: Math.PI, // 文本旋转的角度，一般自动计算
    textAlign: 'center' // 文本对齐方式，可取值 left center right，默认为 center
  }, // 所有文本共享的配置信息
  custom: false, // 是否使用自定义文本，如果是true，那么就使用html显示文本
  renderer: function(text, item, index)  {
    // 配合 custom 为 true 使用，格式化文本的函数
  }
});

// 格式化饼图文本
function formatter(text, item) {
  var point = item.point; // 每个弧度对应的点
  var proportion = point['..proportion']; // ..proportion 字段由Stat.summary.proportion统计函数生成
  proportion = (proportion * 100).toFixed(2) + '%';
  return '<span class="title">' + text + '</span><br><span style="color:' + point.color + '">' + proportion + '</span>';
}
$.getJSON('../static/data/diamond.json',function (data) {
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400,
    plotCfg: {
    margin: [20, 90, 60, 80]
    }
  });
  chart.source(data);
  chart.coord('theta',{radius: 0.6});
  // 不同cut（切割工艺）所占的比例
  chart.intervalStack()
    .position(Stat.summary.proportion())
    .color('cut')
    .label('cut', {
      custom: true, // 使用自定义文本
      renderer: formatter, // 格式化文本的函数
      labelLine: false, // 不显示文本的连接线
      offset: 50 // 文本距离图形的距离
    });
  chart.render();
});

chart.polygon().position(Stat.treemap('children*value')).color('type').shape('stroke')
  .label('name*children', function(name, children) { // 仅显示没有子节点的名称
    if (!children) {
      return name;
    }
  }, {
    label: {
      fill: '#fff'
    }
  });

var 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}
];
var chart = new G2.Chart({
  id: 'c2',
  width : 800,
  height : 400
});

chart.source(data, {
  weight: {
    alias: '体重（kg）'
  },
  height: {
    alias: '身高（cm）'
  }
});
chart.tooltip({
  title: null, // 在这里设置不显示 title
  map: {
    name: 'height',
    value: 'weight'
  } // 这个 map 属性被覆盖了
});
chart.point().position('height*weight')
  .color('gender', ['#f96a52', '#00a3d7'])
  .opacity(0.5)
  .shape('circle')
  .tooltip('gender*height*weight');
chart.render();

var cfg = {
  point: {
    lineWidth: 1,
    fill: '#999',
    radius: 4
  },
  hollowPoint: {
    fill: '#fff',
    lineWidth: 1,
    stroke: '#999',
    radius: 3
  },
  interval: {
    lineWidth: 0,
    fill: '#999',
    fillOpacity: 0.85
  },
  strokeInterval: {
    lineWidth: 1,
    stroke: '#fff'
  },
  pie: {
    lineWidth: 1,
    stroke: '#fff'
  },
  hollowInterval: {
    fill: '#fff',
    stroke: '#999',
    fillOpacity: 0,
    lineWidth: 1
  },
  area: {
    lineWidth: 0,
    fill: '#999',
    fillOpacity: 0.6
  },
  polygon: {
    lineWidth: 0,
    fill: '#999',
    fillOpacity: 1
  },
  hollowPolygon: {
    fill: '#fff',
    stroke: '#999',
    fillOpacity: 0,
    lineWidth: 1
  },
  strokePolygon: {
    fill: '#999',
    stroke: '#efefef',
    fillOpacity: 1
  },
  hollowArea: {
    fill: '#fff',
    stroke: '#999',
    fillOpacity: 0,
    lineWidth: 1
  },
  line: {
    stroke: '#999',
    lineWidth: 1,
    fill: null
  }
};

// 关闭选中模式
chart.<geom>().position('x*y').selected(false); // 方式 1
chart.<geom>().position('x*y').selected({
  selectedMode: false
}); // 方式 2

// 开启选中模式, true 可省略
chart.<geom>().position('x*y').selected(true, {
  selectedMode: 'multiple' || 'single', // multiple 为多选，single 为单选
  style: {
    // 设置选中图形的样式，不设置则使用默认提供的样式
  }
});

{
  selectedMode: false | 'multiple' | 'single', // 是否可选中、多选、单选
  style: {
    // 绘图属性
  }, // 设置选中图形的样式，不设置则使用默认提供的样式
  cancelable: true | false, // 选中之后是否可取消选中
  animate: true | false // 选中是否执行动画
}