G2的基础使用

    let arr = [];
   let chart = new G2.Chart({
      container:'Echats', // 唯一id
      forceFit: true, // 为true时候 设置宽度不生效
      height: window.innerHeight // 设置高度
   })
   chart.source(arr, { // 装载数据
      value: {
        tickCount: 5 // 设置坐标轴上刻度点的个数
      }
   }); // 数据源
   chart.scale('sales', { // 为 chart 装载数据，返回 chart 对象。
      tickInterval: 20,
      alias:'数据(GDP)' // 设置属性的别名
   }); 
    chart.axis('year',{  // 坐标轴配置
      label:{
        textStyle:{// 该坐标文字的样式
          textAlign: 'center', // 文本对齐方式
          fill: '#3bf', // 文本的颜色
          fontSize: '14', // 字体大小
          fontWeight: '600', // 文本粗细
          textBaseline: 'top' // 文本基准线
        }
      },
      tickLine:{
        lineWidth: 2, // 刻度线长
        stroke: '#3bf', // 刻度线的颜色
        strokeOpacity: 0.8, // 刻度线颜色的透明度
        length: 5, // 刻度线的长度
        alignWithLabel: true //设为负值则显示为category数据类型特有的样式
      }
    });
    chart.axis('sales',{
      label: { 
        textStyle:{ 
          fill:'#3bf'
        },
        formatter: function formatter(text) { // 用于格式化坐标轴上显示的文本信息的回调函数
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }     
      }
    })

    chart.interval().position('year*sales').opacity(0.8)
    chart.render();