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();