0x00 Antv G2的绘图流程
1.引入js库
<script src="https://cdn.bootcdn.net/ajax/libs/g2plot/1.2.0-beta.0/g2plot.js"></script>
2.准备渲染容器DOM
<div id='g2-chart'></div>
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 完整实例
效果：
代码：
<!--
* @Author: your name
* @Date: 2020-07-02 21:14:46
* @LastEditTime: 2020-07-02 21:53:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-g2.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/g2plot/1.2.0-beta.0/g2plot.js"></script>
<style>
.box{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border:1px solid #ccc;
width:50%;
}
</style>
</head>
<body>
<div class='box'>
<div class='chart' id='g2-chart'></div>
</div>
<script>
const data =[
{year:'1991',value:3},
{year:'1992',value:4},
{year:'1993',value:7},
{year:'1994',value:5},
{year:'1995',value:6}
];
const chartDom = document.getElementById('g2-chart');
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';
}
}
});
line.render();
</script>
</body>
</html>