场景

效果

简介

Anv官网：

http://antv.alipay.com/zh-cn/g2/3.x/index.html

G2是可视化图形语法。

G2的API文档：

https://www.yuque.com/antv/g2-docs/api-g2

实现

安装

即可以通过脚本下载将脚本下载到本地也可以直接引入在线资源。

<!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script> <!-- 引入本地脚本 --> <script src="./g2.js"></script>

其他安装方式参考官网。

创建div容器

<div id="main1" style="width: 600px;height:400px;"></div>

其中id属性是必须的，宽度与高度可以自行设置。

编写图表绘制语言

这里使用jquery，在js中

1.设置数组存放数据源

var names1=[]; var values1=[];

2.ajax请求后台获取图表数据

$.ajax({type :"post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处data:JSON.stringify({"createTime":""+createTime+""}),contentType: "application/json",dataType : "json",        //返回数据形式为jsonsuccess : function(result) {},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");}});

其中传递的参数是查询数据的参数，如果没有此业务需求可以忽略。

3.后台查询数据部分

   

@Description("获取图表数据")@RequestMapping("/EcharsShow")@ResponseBodypublic Map<String,List<Echarts>> echartsShow(@RequestBody Map<String, String> params) {String createTime = params.get("createTime");SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");if(createTime==""||createTime==null){createTime= simpleDateFormat.format(new Date()).toString();}Map<String,List<Echarts>> map = new HashMap<>();map=logisticsOrderService.echartsShow(createTime);return map;}

其中Echart是存取图表数据发实体类，因为之前使用的是Echarts，所以命名是Echarts。

这里具体业务返回的图表数据不止一个，所以使用map用来返回数据，每一个的value又是一个返回数据实体类的list。

package com.ws.bus.sys.vo.LogisticsMonitoring;import lombok.Data;/*** Created by badao on 2019/5/7.*/ @Data public class Echarts {private String name;private Integer value;public Echarts(String name, Integer value) {this.name = name;this.value = value;}public Echarts() {} }

4.具体业务查询代码

 Map<String,List<Echarts>> map = new HashMap<>();//查询物料运输件数数据List<Echarts> list1 = new ArrayList<Echarts>();//查询物料运输件数//查询正极QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_ZHENGJI);BusLogisticsOrderQueryWrapper.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountZhengji = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper);list1.add(new Echarts("正极车间",sumCountZhengji));//查询负极运输件数QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper1 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper1.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper1.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper1.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_FUJI);BusLogisticsOrderQueryWrapper1.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountFuji = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper1);list1.add(new Echarts("负极车间",sumCountFuji));//查询立体仓库QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper2 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper2.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper2.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper2.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_YUANLIAO);BusLogisticsOrderQueryWrapper2.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountYuanLiao = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper2);list1.add(new Echarts("立体仓库",sumCountYuanLiao));//清洁车间QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper3 =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper3.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper3.eq("status",WmsConstants.LOGISTICS_ORDER_STATUS_YZX);BusLogisticsOrderQueryWrapper3.eq("workshop_code",WmsConstants.SYS_ENTERPRISE_ORG_QINGJIE);BusLogisticsOrderQueryWrapper3.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCountQingjie = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper3);list1.add(new Echarts("清洁车间",sumCountQingjie));map.put("list1",list1);

注：因为这里使用的是Mybatisplus，其实就是数据的查询。

最终结果是将返回的数据封装成如下这种：

5.前端接受数据

在ajax请求成功的success回调函数中，对数据源进行赋值

  success : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {var list1 = result["list1"]for(var i=0;i<list1.length;i++){names1.push(list1[i].name);values1.push(list1[i].value);}var data = [{type: names1[0],value:values1[0],percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[1],value:values1[1],percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[2],value:values1[2],percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[3],value:values1[3],percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])}]; }

配置图表相关设置

 // 根据比例，获取两点之间的点function getPoint(p0, p1, ratio) {return {x: (1 - ratio) * p0.x + ratio * p1.x,y: (1 - ratio) * p0.y + ratio * p1.y};}var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值var sliceNumber = 0.005;// 自定义 other 的图形，增加两条线G2.Shape.registerShape('interval', 'platelet', {draw: function draw(cfg, container) {cfg.points[1].y = cfg.points[1].y - sliceNumber;cfg.points[2].y = cfg.points[2].y - sliceNumber;var centerPoint = {x: cfg.points[3].x,y: (cfg.points[2].y + cfg.points[3].y) / 2};centerPoint = this.parsePoint(centerPoint);var points = this.parsePoints(cfg.points);var path = [];var tmpPoint1 = getPoint(points[0], points[3], pointRatio);var tmpPoint2 = getPoint(points[1], points[2], pointRatio);path.push(['M', points[0].x, points[0].y]);path.push(['L', tmpPoint1.x, tmpPoint1.y]);path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);path.push(['L', points[1].x, points[1].y]);path.push(['z']);return container.addShape('path', {attrs: {fill: cfg.color,path: path}});}});

设置数据源

  chart.source(data, {percent: {formatter: function formatter(val) {val = val * 100 + '%';return val;}}});

使用图形语法进行图表的绘制

 var chart = new G2.Chart({container: 'main1',forceFit: true,height: 400,width:600,padding: [40, 0]});chart.coord('theta');//设置坐标系类型chart.tooltip({showTitle: false,itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'});chart.intervalStack().position('value').color('type').shape('platelet').label('type', {formatter: function formatter(value, type) {return type.point.type + ': ' + type.point.value;}}).tooltip('type*percent*value', function(type, percent,value) {percent = percent * 100 + '%';return {type: type,percent: percent,value:value};});

图表渲染

 chart.render();

完整jquery代码

$(document).ready(function() {var createTime = $("#createTime").val(); // 指定图表的数据源var names1=[];var values1=[];//ajax请求后台图表数据$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处data:JSON.stringify({"createTime":""+createTime+""}),contentType: "application/json",dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {var list1 = result["list1"]for(var i=0;i<list1.length;i++){names1.push(list1[i].name);values1.push(list1[i].value);}var data = [{type: names1[0],value:values1[0],percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[1],value:values1[1],percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[2],value:values1[2],percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])}, {type: names1[3],value:values1[3],percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])}];// 根据比例，获取两点之间的点function getPoint(p0, p1, ratio) {return {x: (1 - ratio) * p0.x + ratio * p1.x,y: (1 - ratio) * p0.y + ratio * p1.y};}var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值var sliceNumber = 0.005;// 自定义 other 的图形，增加两条线G2.Shape.registerShape('interval', 'platelet', {draw: function draw(cfg, container) {cfg.points[1].y = cfg.points[1].y - sliceNumber;cfg.points[2].y = cfg.points[2].y - sliceNumber;var centerPoint = {x: cfg.points[3].x,y: (cfg.points[2].y + cfg.points[3].y) / 2};centerPoint = this.parsePoint(centerPoint);var points = this.parsePoints(cfg.points);var path = [];var tmpPoint1 = getPoint(points[0], points[3], pointRatio);var tmpPoint2 = getPoint(points[1], points[2], pointRatio);path.push(['M', points[0].x, points[0].y]);path.push(['L', tmpPoint1.x, tmpPoint1.y]);path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);path.push(['L', points[1].x, points[1].y]);path.push(['z']);return container.addShape('path', {attrs: {fill: cfg.color,path: path}});}});var chart = new G2.Chart({container: 'main1',forceFit: true,height: 400,width:600,padding: [40, 0]});chart.source(data, {percent: {formatter: function formatter(val) {val = val * 100 + '%';return val;}}});chart.coord('theta');//设置坐标系类型chart.tooltip({showTitle: false,itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'});chart.intervalStack().position('value').color('type').shape('platelet').label('type', {formatter: function formatter(value, type) {return type.point.type + ': ' + type.point.value;}}).tooltip('type*percent*value', function(type, percent,value) {percent = percent * 100 + '%';return {type: type,percent: percent,value:value};});chart.render();}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");}});//end ajax});//刷新方法结束

官方示例代码

以上代码结合了前后端数据交互，如果不好理解，先从官方示例代码理解。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height"><title>饼图-花瓣图</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script>var data = [{type: '分类一',value: 27}, {type: '分类二',value: 25}, {type: '分类三',value: 18}, {type: '分类四',value: 15}, {type: '分类五',value: 10}, {type: 'Other',value: 5}];// 根据比例，获取两点之间的点function getPoint(p0, p1, ratio) {return {x: (1 - ratio) * p0.x + ratio * p1.x,y: (1 - ratio) * p0.y + ratio * p1.y};}var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值var sliceNumber = 0.005;// 自定义 other 的图形，增加两条线G2.Shape.registerShape('interval', 'platelet', {draw: function draw(cfg, container) {cfg.points[1].y = cfg.points[1].y - sliceNumber;cfg.points[2].y = cfg.points[2].y - sliceNumber;var centerPoint = {x: cfg.points[3].x,y: (cfg.points[2].y + cfg.points[3].y) / 2};centerPoint = this.parsePoint(centerPoint);var points = this.parsePoints(cfg.points);var path = [];var tmpPoint1 = getPoint(points[0], points[3], pointRatio);var tmpPoint2 = getPoint(points[1], points[2], pointRatio);path.push(['M', points[0].x, points[0].y]);path.push(['L', tmpPoint1.x, tmpPoint1.y]);path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);path.push(['L', points[1].x, points[1].y]);path.push(['z']);return container.addShape('path', {attrs: {fill: cfg.color,path: path}});}});var chart = new G2.Chart({container: 'mountNode',forceFit: true,height: window.innerHeight,padding: [40, 0]});chart.source(data);chart.coord('theta');chart.intervalStack().position('value').color('type').shape('platelet').label('type');chart.render(); </script> </body> </html>

 

 

总结

以上是生活随笔为你收集整理的SpringBoot+AntV实现饼状图中的花瓣图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。