g2 折线图点与点之间直线_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 完整实例

效果：

代码：

Document