一、首先需要引用antv-g2.
1.直接在html引用外部js文件,<script src=’‘相对路径’’>
2.如果是vue,需要安装 npm install @antv/g2 --save 但是在vscode安装后,按照提示修复一下就行了

二、初始化柱状体表格

const chart=new Chart({
      container:'attendanceChartDiv', //初始化的div ID 
      width:373, //跨度可以自适应 autoFit设置为true就可以了
      height:220, //高度无法自适应只能设置固定值
      padding: [30, 10, 30, 40]  //图标间距
    });

三、加载初始化数据

chart.legend(false);
    chart
    .interval()
    .position('A*B') //*左侧是柱状图x左边显示的名字,右侧是柱状体数量
    ]);

    chart.render();    

这个是简单的加载,实际还有好多的方法和样式可以去设置,这个需要大家去自己研究了

Logo

前往低代码交流专区

更多推荐