antv G2 实战入门教程-折线图-引入JS（Ajax获取数据动态展示）

公司之前用echarts做图表，后来产品大哥让改用G2，没办法上吧。
两种方式使用G2
1，引入JS，版本不要太低，因为有的版本低一些东西没有，容易报错（比如：chart.data is not a function）。我就踩了这个坑，后来用的版本是4.0.15

我用的第一种直接引入JS

<script src="http://gw.alipayobjects.com/os/lib/antv/g2/4.0.15/dist/g2.min.js"></script>
<script src="http://unpkg.com/@antv/data-set"></script>

代码示例 ：

    <div id="c2"></div>

注意：下面有一个 data 的数据，这个数据你可以用Ajax调接口拿到页面上，这个就是你要展示的数据。这个数据是接口处理好的， 方便你们好查找 const data = result.dataList
关于数据多说一句：很多人好奇这个数据怎么弄，这个就是后端接口返回的数据，数据是后端处理好直接拿来用的（当然你也可以前端处理数据格式），我这块只展示把数据放到G2上使用

	//上座率
	function attendance(){
		$.ajax({
			type : 'post',
			url: baseUrl + "Demo/getDemo",
			data:{},
            dataType: "jsonp",
            success:function(result){
            	const data = result.dataList;//这个是接口拿到的数据，用来展示的
           		// 数据需要加工成 {year: '1996', type: 'north', value: 50} 的模式
           		const dv = new DataSet.DataView().source(data);
           		dv.transform({
           		  type: 'fold',
           		  fields: ['百分比', '日座上座率统计'], // 展开字段集
           		  key: 'type', // key字段
           		  value: 'value', // value字段
           		});

           		const chart = new G2.Chart({
           		  container: 'c2',
           		  autoFit: true,
           		  height: 500,
           		});

           		chart.data(dv.rows);
           		chart.scale('year', {
           		  range: [0, 1],
           		});
           		chart.legend({
                		  position: 'top',
                });
           		chart.scale('value', {
           		  nice: true,
           		});
           		chart.tooltip({
           		  shared: true,
           		  showCrosshairs: true,
           		});

           		chart
           		  .area()
           		  .position('year*value')
           		  .color('type');
           		chart
           		  .line()
           		  .position('year*value')
           		  .color('type');
           		chart.render();
           		payTicket()//今日刷卡数统计
            }
		})
	}

效果图：

2.官方示例安装： npm install @antv/g2

在这里插入图片描述

官方简介：https://g2.antv.vision/zh/docs/manual/about-g2