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

场景

效果

简介

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",        //返回数据形式为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，其实就是数据的查询。

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

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