SpringBoot+AntV实现饼状图中的花瓣图

Love The Way You Lie 2023-10-18 20:03 4阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 简介 ###

Anv官网：

[http://antv.alipay.com/zh-cn/g2/3.x/index.html][http_antv.alipay.com_zh-cn_g2_3.x_index.html]

G2是可视化图形语法。

G2的API文档：

[https://www.yuque.com/antv/g2-docs/api-g2][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容器 ###

其中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",        //返回数据形式为json
            success : function(result) {
             
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
             
            }
        });

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

3.后台查询数据部分

@Description("获取图表数据")
        @RequestMapping("/EcharsShow")
        @ResponseBody
        public 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，其实就是数据的查询。

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

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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;
                            }
                        }});

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

### 图表渲染 ###

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",        //返回数据形式为json
            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
                                }
                            });
                        }
                    });
                    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>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019061911140033.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_antv.alipay.com_zh-cn_g2_3.x_index.html]: http://antv.alipay.com/zh-cn/g2/3.x/index.html
[https_www.yuque.com_antv_g2-docs_api-g2]: https://www.yuque.com/antv/g2-docs/api-g2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190619111508916.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70