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