先说报错:

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(); // 更新图表!

Logo

前往低代码交流专区

更多推荐