Antv-g2 绘制折线图

0x00 Antv G2的绘图流程

1.引入js库

2.准备渲染容器DOM

3.准备渲染数据

        const data =[
            {year:'1991',value:3},
            {year:'1992',value:4},
            {year:'1993',value:7},
            {year:'1994',value:5},
            {year:'1995',value:6}
        ];

4.获取渲染DOM对象

  const chartDom = document.getElementById('g2-chart');

5.初始化G2绘图对象，配置绘图参数

        const line = new G2Plot.Line(chartDom,{
            title:{
                visible:true,
                text:'g2折线图实例'
            },
            description:{
                visible:true,
                text:'这是一个副标题'
            },
            data:data,
            xField:'year',
            yField:'value',
            point:{
                visible:true,
                size:5,
                color:'#fff',
                style:{
                    stroke:'#fe740c',//边框颜色
                    lineWidth:2,
                    fillOpacity:0.6
                }
            },
            label:{
                visible:true
            },
            color:'#f2740c',//线条的颜色
            yAxis:{
                formatter:function(v){
                    return v+'k';
                }
            }

        });

6.调用render完成渲染

  line.render();

0x01 完整实例

效果：

代码：