g2(v3)--条形图为例的基础使用

const data = [
  { type: '汽车', value: 34 },
  { type: '建材家居', value: 85 },
  { type: '住宿旅游', value: 103 },
  { type: '交通运输与仓储邮政', value: 142 },
  { type: '建筑房地产', value: 251 },
  { type: '教育', value: 367 },
  { type: 'IT 通讯电子', value: 491 },
  { type: '社会公共管理', value: 672 },
  { type: '医疗卫生', value: 868 },
  { type: '金融保险', value: 1234 }
];
const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 500,
  padding: [ 20, 40, 50, 124 ]
});
chart.source(data, {
  value: {
    max: 1300,
    min: 0,
    nice: false,
    alias: '销量（百万）'
  }
});
chart.axis('type', {
  label: {  //坐标轴为type的label设置
    textStyle: {  //label样式
      fill: '#8d8d8d',
      fontSize: 12
    },
    offset:10   // label距离坐标轴距离
  },
  tickLine: {  //坐标轴为type的坐标轴刻度线设置
    alignWithLabel: false,
    length: 5
  },
  line: {  //坐标轴线的配置
    lineWidth: 1,  // 轴线宽度
    stroke: 'red', // 设置线的颜色
    lineDash: [ 3, 3 ] // 设置虚线样式
  }
});
chart.axis('value', {
  label: {
    offset: 15, //坐标轴文本距离坐标轴距离
  },  //为null不显示坐标轴文本
  title: {
    offset: 40, // x轴标题距离
    textStyle: {   
      fontSize: 12,
      fontWeight: 300
    }
  }
});
//在坐标轴上配置 formatter 仅在坐标轴上的文本有效，如果想要使得 tooltip 和图例上的信息也格式化，需要在列定义时指定格式化函数
chart.scale('value', {
  formatter: val => {
    return val + 'rmb';
  },
  alias: '这里设置标题的别名'
});

chart.coord().transpose();
chart.interval().position('type*value')
  .size(30)   // 条形图每个柱子高度
  .opacity(1)  //图中条形图的透明
  .label('value', {
    textStyle: {   //条形图后边的label样式
      fill: '#8d8d8d'  
    },
    offset: 10
  });
chart.render();
// 点击图形时间，点击柱子触发点击事件
chart.on('interval:click', ev => {
  const data = ev.data;
  if (data) {
    const name = data._origin['name'];
    window.open('http://www.baidu.com/s?wd=' + name);
  }
});

官网例子地址：https://g2-v3.antv.vision/zh/examples/gallery/bar

教程地址：https://www.yuque.com/antv/g2-docs/tutorial-g2-chart-composition