var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500,
  plotCfg: {
    margin: [10, 20, 10, 20],
  }
});

chart.get('属性名');

var plotCfg = {
  margin: [10,20,20,30], // 边距设置，接受参数同 css 的 margin
  border: {
    stroke: 'red', // 边颜色
    lineWidth: 1, // 边框粗细
    fill: '#ff8800' // 设置整个容器的背景色
  }, // 边框设置 图形属性
  background: {
    stroke: 'red', // 边颜色
    lineWidth: 1, // 边框粗细
    fill: '#fff', // 背景色
    radius: 30 // 圆角设置
  } // 绘图区域背景设置
};

chart.get('canvas');

chart.get('frontCanvas');

chart.get('backCanvas');

chart.setMode('select'); // 开启框选模式
chart.setMode(false); // 关闭框选模式

chart.select('rangeX'); // 使用 X 轴范围的框选
chart.selcet('rangeY'); // 使用 Y 轴范围的框选
chart.select('rangeXY'); // 使用 X 和 Y 轴的框选

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
];

chart.source(data, {
  type: {
    type: 'cat', // 声明 type 字段为分类类型
    values: ['A', 'B', 'C'] // 重新显示的值
    alias: '类型' // 设置属性的别名
  }
})

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
];

chart.col('type', {
  type: 'cat', // 声明 type 字段为分类类型
  values: ['A', 'B', 'C'] // 重新显示的值
  alias: '类型' // 设置属性的别名
});

chart.axis('dim', false); // 不显示该字段对应的坐标轴
chart.axis('dim', {
  position: 'top', // 设置坐标轴的显示位置，可取值 top bottom left right
  formatter: function(dimValue) {
    return (dimValue / 1000).toFixed(0) + 'k';
  }, // 回调函数，用于格式化坐标轴上显示的文本信息
  line: {
    lineWidth: 1, // 设置线的宽度
    stroke: '#ccc' //  设置线的颜色
  }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
  labels: {
    label: {
      textAlign: 'center', // 文本对齐方向，可取值为： left center right
      fill: '#404040', //文本的颜色
      fontSize: '12', // 文本大小
      fontWeight: 'bold', // 文本粗细
      rotate: 30 // 旋转角度
    }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
    autoRotate: true // 是否需要自动旋转
  },
  title: {
    fontSize: '12',
    textAlign: 'center',
    fill: '#999',
    fontWeight: 'bold'
  }, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
  tickLine: {
    lineWidth: 1,
    stroke: '#ccc',
    value: 5,
  }, // 坐标点对应的线，null 不显示 图形属性
  titleOffset: 45, // 设置标题距离轴线的距离
  labelOffset: 20, // 标轴文本距离轴线的距离
  grid: {
    line: {
      stroke: '#d9d9d9',
      lineWidth: 1,
      lineDash: [4, 4]
    }, // 代表栅格线的类型，line polygon circle 只能选择一种 图形属性
    minorLine: 0, // 次要线的配置项
    minorCount: 0, // 2个Grid线中间的次要线的数目
    odd: {
      fill: 'red'
    }, // 如果值为 null，则不显示。栅格内部的奇数背景 图形属性
    even: {
      fill: 'red'
    } //  如果值为 null，则不显示。栅格内部的偶数背景 图形属性
  }, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
  gridAlign: 'start'// 栅格的位置跟坐标点(tick)的对齐方式，当前仅支持 start和middle
});

chart.legend({
  position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
  leaveChecked: false, // 是否保留一项不能取消勾选，默认为 false，即不能取消勾选。
  selectedMode: 'multiple' || 'single' || false, // 设置图例筛选模式，默认为 'multi' 多选，'single' 表示单选，false 表示禁用筛选
  title: null, // 是否展示图例的标题，null 为不展示，默认 top bottom 两个位置的图例不展示。
  spacingX: 10, // 用于 position 为 top 或者 bottom 时调整子项之间的水平距离
  spacingY: 12, // 用于 position 为 left 或者 right 时调整子项之间的垂直距离
  unChecked: '#CCC', // 未选中时marker的颜色
  wordSpaceing: 2,  // marker和文本之间的距离
  dx: 5, // 水平偏移
  dy: 10, // 垂直偏移
  itemWrap: false, // 是否自动换行，默认为 false，true 为自动换行
  word: {
    fill: 'red'
  }, //  文本属性
  back: {
    fill: 'red'
  } // 图例外边框和背景的配置信息，是一个矩形 图形属性
});

chart.legend({
  selectedMode: false, // 关闭连续图例的筛选功能，默认为开启状态
  width: 30, // 宽度
  height: 80, // 长度
  position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
  title: null, // @type {ATTRS-Text || null} 是否展示图例的标题，null 为不展示，默认 top bottom 两个位置的图例不展示。
  word: {
    fill: 'red'
  }, // 文本属性
  back: {
    fill: 'red'
  } // 图例外边框和背景的配置信息，是一个矩形 图形属性
});

chart.coord().rotate(70).scale(1.5, 1.5).reflect('xy').transpose();

chart.tooltip(true, {
  title: null, // tooltip 不展示title
  map: {
    title: 'dim | const', // 当需要展示 title 时，可在 map 中设置 title 对应的数据源字段或者设置为一个常量
    name: 'dim | const', // 设置 name 对应的数据源字段或者设置为一个常量
    value: 'dim' // 设置 value 对应的数据源字段
  }, // 用于重新设置 tooltip 的显示内容
  offset: 15, // 偏移量，设置tooltip 显示位置距离 x 轴方向上的偏移
  crosshairs: true, // 是否展示 tooltip 的辅助线，默认为 false，不展示
  crossLine: {
    stroke: '#666'
  }, // crosshairs 为 true 时，为辅助线设置样式
  padding: [10, 10, 10, 10], //内边距
  back: {
    fill: 'red'
  } // 图例外边框和背景的配置信息，是一个矩形 图形属性
});

chart.tooltip(true, {
  custom: true, // 表示使用自定义的模板显示 tooltip
  html:  '<div class="ac-tooltip" style="position:absolute;visibility: hidden;"><h4 class="ac-title"></h4><table class="ac-list custom-table"></table></div>', // tooltip 的 html 外层模板
  itemTpl: '<tr><td>{index}</td><td style="color:{color}">{name}</td><td>{value}k</td></tr>', // 使用 html 时每一个显示项的模板，默认支持 index, color, name, value 这四个字段。
  offset: 50, // 偏移量，设置tooltip 显示位置距离 x 轴方向上的偏移
  customFollow: false // 设置 tooltip 是否跟随鼠标移动，默认为 true，跟随。
});

var data = [
    {"month":0,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"}
  ];
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400
  });
  var defs = {'month':{
    type: 'cat',
    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  }};

  chart.source(data,defs);

  chart.tooltip(true,{ // 第一个参数是控制是否显示tooltip，可以设置为false，不显示tooltip
    custom: true,
    html:  '<div class="ac-tooltip" style="position:absolute;visibility: hidden;"><p class="ac-title"></p><table class="ac-list custom-table"></table></div>', // tooltip的外层模板
    itemTpl: '<tr><td>{index}</td><td style="color:{color}">{name}</td><td>{value}</td></tr>', // 支持的字段 index,color,name,value
    offset: 50
  });
  chart.line().position('month*tem');
  chart.render();

// 添加辅助线
chart.guide().line([startXValue, startYValue], [endXValue, startYValue], {
  stroke: '#999', // 线的颜色
  lineDash: [0, 2, 2], // 虚线的设置
  lineWidth: 3 // 线的宽度
});

// 添加辅助图片
chart.guide().image([startXValue, startYValue], [endXValue, startYValue], {
  src: 'http://gtms02.alicdn.com/VXXXXaZX.png', // 图片路径
  width: 160, // 宽度，可以不设置，如果设置了end，此属性无效
  height: 230 // 高度，可以不设置，如果设置了end，此属性无效
});

// 添加辅助文本
chart.guide().text([startXValue, startYValue], '我是辅助文本呀！', {
  fill: '#666', // 文本颜色
  fontSize: '12' // 文本大小
});

// 添加辅助框
chart.guide().rect([startXValue, startYValue], [endXValue, startYValue], {
  lineWidth: 0, // 辅助框的边框宽度
  fill: DEFAULT_COLOR, // 辅助框填充的颜色
  fillOpacity: 0.1 // 辅助框的背景透明度
});

// 添加辅助标记
chart.guide().tag([startXValue, startYValue], [endXValue, startYValue], '文本', {
  line: {
    stroke: '#999',
    lineDash: [0, 2, 2]
  }, // 辅助标记中连接线的样式配置
  text: {
    fill: '#666',
    fontSize: '12',
    textAlign: 'center'
  }, // 辅助标记中文本的样式配置
  rect: {
    lineWidth: 0,
    fill: '#999',
    fillOpacity: 0.1
  } // 辅助标记中背景框的样式配置
});

// 添加辅助标记
chart.guide().arc([startXValue, startYValue], [endXValue, startYValue], {
   stroke: '#999', // 线的颜色
  lineDash: [0, 2, 2], // 虚线的设置
  lineWidth: 3 // 线的宽度
});

// 添加辅助html
// 坐标点
var point = [3.5,12000];
//html字符串
var tooltipHtml = "<span'>异常值</span>";
chart.guide().html(point, tooltipHtml, {align:'br',offset:[10,0]});

var data = [
    {"month":0,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"}
  ];
  var chart = new G2.Chart({
    id: 'forceFitChart',
    width: 800,
    height: 400
  });
  var defs = {'month':{
    type: 'cat',
    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  }};

  chart.source(data,defs);
  chart.line().position('month*tem');
  chart.render();

  setTimeout(function() {
    $('#forceFitChart').width(450);
    chart.forceFit();
  }, 1500);

{
  x: 12, // 画布上的横坐标
  y: 34 // 画布上的纵坐标
}

var point= {
  x: 100,
  y: 200
}

var data = {
  cut: 'a', price: 1,
  cut: 'b', price: 2,
  cut: 'c', price: 3,
  cut: 'd', price: 4
};

chart.getPosition({
  cut: 'b',
  price: 2
});

{
  x: 12, // 画布上的横坐标
  y: 34 // 画布上的纵坐标
}

chart.on('eventType', fn); // 添加事件
chart.off('eventType', fn); // 移除事件

chart.on('plotmove', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  var items = chart.getTooltipItems(point);
  console.log(items);
});

chart.on('plotenter', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  // do something
});

chart.on('plotleave', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  // do something
});