蚂蚁金服的AntvG2的日常使用和报错情况（简称坑）

先说报错：

1、antv 报错Chart.data is not a function
解决：这个是因为版本的问题，在不指定版本的情况下，由于npm安装的antv的版本为3.x.x, 我们可以使用v3中的source代替data方法

同时我们也可以使用v4版本：npm install @antv/g2@4.0.7
2、

vue中使用

import { Chart } from '@antv/g2';
const data = [
  { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  { feature: 'Design', value: 0.17, phone: 'iPhone' },
  { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  { feature: 'Large', value: 0.02, phone: 'iPhone' },
  { feature: 'Price', value: 0.21, phone: 'iPhone' },
  { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  { feature: 'Design', value: 0.13, phone: 'Samsung' },
  { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  { feature: 'Large', value: 0.13, phone: 'Samsung' },
  { feature: 'Price', value: 0.35, phone: 'Samsung' },
  { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
];

export default {
  name: 'ceshi123',
  data(){return {data,}},
  mounted(){this.portrayNO1()},
  methods: {
  	portrayNO1(){
      const chart = new Chart({
         container: 'c1',
          width: 600,
          height: 300,})
      chart.source(data);
      chart.interval().position('genre*sold');
      chart.render();
    },

  },

}

data数据：（从该数据集可以看出，G2 接收的数据格式为标准的 JSON 数组。）
feature ：x轴，
value：y轴比例，
phone：该数据集描述的是 iPhone，Samsung 以及 Nokia Smartphone 三款手机各个特征（feature）的评分情况（value）。

api：
new Chart：建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息；
container: ‘mountNode’,（绑定对象div）
autoFit: false,（）
width: 600,（宽）
height: 300,（高）
padding: [0, 100, 0, 40],（填充）
renderer: ‘svg’, // 使用 svg 进行渲染，canvas 的性能受画布尺寸影响更大，而 SVG 的性能受图形元素个数影响更大。而且在小数据量的情况下，SVG 的方案通常内存占用会更小，做缩放、平移等操作的时候往往帧率也更高，所以如果单就图表库的视角来看，选择 Canvas 和 SVG 各有千秋。小画布、大数据量的场景适合用 Canvas，譬如热力图、大数据量的散点图等。如果画布非常大，有缩放、平移等高频的交互，或者移动端对内存占用量非常敏感等场景，可以使用 SVG 的方案。

chart.data(data) | | chart.source(data): 载入数据源;

chart.interval().position(‘genre*sold’)：创建图形语法，绘制柱状图；
这个可以用jq的点语法： .postion .color .point
position(‘genre*sold’) x轴和y轴用数据中哪个
.shape(‘phone’, [‘circle’, ‘square’, ‘triangle’]) （形状分开）
color(‘phone’)：加颜色（用哪个数据来区分，下方会出现图标）
.size(6); （形状的大小）
.adjust(‘stack’) ：（层叠样式出现，一层一种手机，左侧出问题）
point()：点状
interval()：柱状图
line（）：折线图
area（）：面积图
.coordinate（）雷达图，3XXXX版本没有这个方法
.axis(‘score’） （Axis 坐标轴可以通过）
.style(）
.tooltip（）（Tooltip 提示信息可以通过 ）
Legend（）（Legend 图例可以通过）
.clear() （ // 清理所有图形）
.scale（）
facet(‘rect’）

注意：G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。G2 生成的图表的类型，都是由几何标记决定的，
叠加使用：

chart
  .area()
  .position('feature*value')
  .color('phone');
chart
  .line()
  .position('feature*value')
  .color('phone');

chart.render()：渲染图表

如何更新数据：

chart.changeData(data);
chart.data(newData); // 更新数据源
chart.render(); // 更新图表！