SpringBoot+AntV实现一次前后端交互渲染多个饼状图

快来打我* 2023-10-18 20:06 15阅读 0赞

## 场景 ##

### 效果 ###

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

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/92810169][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_92810169]

在上面已经实现一个饼状图的基础上实现一次前后端交互实现四个饼状图。

## 实现 ##

注：

1.点击菜单跳转到当前页面在js中控制等待页面加载完成之后会ajax请求一次后台数据，首次给页面上的四个图表赋值。

2.选择页面上的时间条件后，传递到后台，后台根据时间查询数据并返回给前台，

3.所以在搜索按钮的点击事件中需要先将原来的div元素清空，然后再重新使用新获取的数据取渲染四个图表。

完整js部分代码：

$(document).ready(function() {
  
     var createTime = $("#createTime").val();
   
     // 指定四个图表的数据源
     var names1=[];
     var values1=[];
     var names2=[];
     var values2=[];
     var names3=[];
     var values3=[];
     var names4=[];
     var values4=[];
  
    //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) {
                 debugger
                 //获取后台传递过来的四个图表的数据
                 var list1 = result["list1"]
                 var list2 = result["list2"]
                 var list3 = result["list3"]
                 var list4 = result["list4"]
                 //遍历取值
                 for(var i=0;i<list1.length;i++){
                     names1.push(list1[i].name);
                     values1.push(list1[i].value);
                 }
                 for(var i=0;i<list2.length;i++){
                     names2.push(list2[i].name);
                     values2.push(list2[i].value);
                 }
                 for(var i=0;i<list3.length;i++){
                     names3.push(list3[i].name);
                     values3.push(list3[i].value);
                 }
                 for(var i=0;i<list4.length;i++){
                     names4.push(list4[i].name);
                     values4.push(list4[i].value);
                 }
 //********************************设置图表1数据源***********************************************************************************
                 var data1 = [{
                     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])
                 }
                 ];
 //********************************设置图表2数据源***********************************************************************************
                 var data2 = [{
                     type: names2[0],
                     value:values2[0],
                     percent:values2[0]/(values2[0]+values2[1]+values2[2]+values2[3])
                 }, {
                     type: names2[1],
                     value:values2[1],
                     percent:values2[1]/(values2[0]+values2[1]+values2[2]+values2[3])
                 }, {
                     type: names2[2],
                     value:values2[2],
                     percent:values2[2]/(values2[0]+values2[1]+values2[2]+values2[3])
                 }, {
                     type: names2[3],
                     value:values2[3],
                     percent:values2[3]/(values2[0]+values2[1]+values2[2]+values2[3])
                 }
                 ];
 //********************************设置图表3数据源***********************************************************************************
                 var data3 = [{
                     type: names3[0],
                     value:values3[0],
                     percent:values3[0]/(values3[0]+values3[1]+values3[2]+values3[3])
                 }, {
                     type: names3[1],
                     value:values3[1],
                     percent:values3[1]/(values3[0]+values3[1]+values3[2]+values3[3])
                 }, {
                     type: names3[2],
                     value:values3[2],
                     percent:values3[2]/(values3[0]+values3[1]+values3[2]+values3[3])
                 }, {
                     type: names3[3],
                     value:values3[3],
                     percent:values3[3]/(values3[0]+values3[1]+values3[2]+values3[3])
                 }
                 ];
 //********************************设置图表4数据源***********************************************************************************
                 var data4 = [{
                     type: names4[0],
                     value:values4[0],
                     percent:values4[0]/(values4[0]+values4[1]+values4[2]+values4[3])
                 }, {
                     type: names4[1],
                     value:values4[1],
                     percent:values4[1]/(values4[0]+values4[1]+values4[2]+values4[3])
                 }, {
                     type: names4[2],
                     value:values4[2],
                     percent:values4[2]/(values4[0]+values4[1]+values4[2]+values4[3])
                 }, {
                     type: names4[3],
                     value:values4[3],
                     percent:values4[3]/(values4[0]+values4[1]+values4[2]+values4[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
                             }
                         });
                     }
                 });
 //********************************绘制并渲染图表1***********************************************************************************
                 var chart1 = new G2.Chart({
                     container: 'main1',
                     forceFit: true,
                     height: 400,
                     width:600,
                     padding: [40, 0]
                 });
                 chart1.source(data1, {
                     percent: {
                         formatter: function formatter(val) {
                             val = val * 100 + '%';
                             return val;
                         }
                     }});
                 chart1.coord('theta');//设置坐标系类型
                 chart1.tooltip({
                     showTitle: false,//关闭标题
                     itemTpl: '<li>{type}({value}): {percent}</li>'
                 });
                 chart1.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
                     };
                 });
                 chart1.render();
 //********************************绘制并渲染图表2***********************************************************************************
                 var chart2 = new G2.Chart({
                     container: 'main2',
                     forceFit: true,
                     height: 400,
                     width:600,
                     padding: [40, 0]
                 });
                 chart2.source(data2, {
                     percent: {
                         formatter: function formatter(val) {
                             val = val * 100 + '%';
                             return val;
                         }
                     }});
                 chart2.coord('theta');//设置坐标系类型
                 chart2.tooltip({
                     showTitle: false,//关闭标题
                     itemTpl: '<li>{type}({value}): {percent}</li>'
                 });
                 chart2.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
                         };
                     });
                 chart2.render();
 //********************************绘制并渲染图表3***********************************************************************************
                 var chart3 = new G2.Chart({
                     container: 'main3',
                     forceFit: true,
                     height: 400,
                     width:600,
                     padding: [40, 0]
                 });
                 chart3.source(data1, {
                     percent: {
                         formatter: function formatter(val) {
                             val = val * 100 + '%';
                             return val;
                         }
                     }});
                 chart3.coord('theta');//设置坐标系类型
                 chart3.tooltip({
                     showTitle: false,//关闭标题
                     itemTpl: '<li>{type}({value}): {percent}</li>'
                 });
                 chart3.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
                         };
                     });
                 chart3.render();
 //*******************************绘制并渲染图表4***********************************************************************************
                 var chart4 = new G2.Chart({
                     container: 'main4',
                     forceFit: true,
                     height: 400,
                     width:600,
                     padding: [40, 0]
                 });
                 chart4.source(data1, {
                     percent: {
                         formatter: function formatter(val) {
                             val = val * 100 + '%';
                             return val;
                         }
                     }});
                 chart4.coord('theta');//设置坐标系类型
                 chart4.tooltip({
                     showTitle: false,//关闭标题
                     itemTpl: '<li>{type}({value}): {percent}</li>'
                 });
                 chart4.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
                         };
                     });
                 chart4.render();
           
             }
         },
         error : function(errorMsg) {
             //请求失败时执行该函数
             alert("图表请求数据失败!");
           
         }
     });//end ajax
   
     //置空按钮事件
     $("#resetBtn").click(function () {
         $("#searchCondition input").each(function () {
             $(this).val("");
         })
         $("#searchCondition select").each(function () {
             $(this).val("");
         })
     });
     //搜索按钮事件
     $("#searchBtn").click(function () {
        
         //清除之前渲染的图表
         $("#main1").empty();
         $("#main2").empty();
         $("#main3").empty();
         $("#main4").empty();
         var createTime = $("#createTime").val();
     
         // 指定图表的配置项和数据
         var names1=[];
         var values1=[];
         var names2=[];
         var values2=[];
         var names3=[];
         var values3=[];
         var names4=[];
         var values4=[];
         $.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"]
                     var list2 = result["list2"]
                     var list3 = result["list3"]
                     var list4 = result["list4"]
                     for(var i=0;i<list1.length;i++){
                         names1.push(list1[i].name);
                         values1.push(list1[i].value);
                     }
                     for(var i=0;i<list2.length;i++){
                         names2.push(list2[i].name);
                         values2.push(list2[i].value);
                     }
                     for(var i=0;i<list3.length;i++){
                         names3.push(list3[i].name);
                         values3.push(list3[i].value);
                     }
                     for(var i=0;i<list4.length;i++){
                         names4.push(list4[i].name);
                         values4.push(list4[i].value);
                     }
 //********************************图表1***********************************************************************************
                     var data1 = [{
                         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])
                     }
                     ];
 //********************************图表2***********************************************************************************
                     var data2 = [{
                         type: names2[0],
                         value:values2[0],
                         percent:values2[0]/(values2[0]+values2[1]+values2[2]+values2[3])
                     }, {
                         type: names2[1],
                         value:values2[1],
                         percent:values2[1]/(values2[0]+values2[1]+values2[2]+values2[3])
                     }, {
                         type: names2[2],
                         value:values2[2],
                         percent:values2[2]/(values2[0]+values2[1]+values2[2]+values2[3])
                     }, {
                         type: names2[3],
                         value:values2[3],
                         percent:values2[3]/(values2[0]+values2[1]+values2[2]+values2[3])
                     }
                     ];
 //********************************图表3***********************************************************************************
                     var data3 = [{
                         type: names3[0],
                         value:values3[0],
                         percent:values3[0]/(values3[0]+values3[1]+values3[2]+values3[3])
                     }, {
                         type: names3[1],
                         value:values3[1],
                         percent:values3[1]/(values3[0]+values3[1]+values3[2]+values3[3])
                     }, {
                         type: names3[2],
                         value:values3[2],
                         percent:values3[2]/(values3[0]+values3[1]+values3[2]+values3[3])
                     }, {
                         type: names3[3],
                         value:values3[3],
                         percent:values3[3]/(values3[0]+values3[1]+values3[2]+values3[3])
                     }
                     ];
 //********************************图表4***********************************************************************************
                     var data4 = [{
                         type: names4[0],
                         value:values4[0],
                         percent:values4[0]/(values4[0]+values4[1]+values4[2]+values4[3])
                     }, {
                         type: names4[1],
                         value:values4[1],
                         percent:values4[1]/(values4[0]+values4[1]+values4[2]+values4[3])
                     }, {
                         type: names4[2],
                         value:values4[2],
                         percent:values4[2]/(values4[0]+values4[1]+values4[2]+values4[3])
                     }, {
                         type: names4[3],
                         value:values4[3],
                         percent:values4[3]/(values4[0]+values4[1]+values4[2]+values4[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
                                 }
                             });
                         }
                     });
 //********************************图表1***********************************************************************************
                     var chart1 = new G2.Chart({
                         container: 'main1',
                         forceFit: true,
                         height: 400,
                         width:600,
                         padding: [40, 0]
                     });
                     chart1.source(data1, {
                         percent: {
                             formatter: function formatter(val) {
                                 val = val * 100 + '%';
                                 return val;
                             }
                         }});
                     chart1.coord('theta');//设置坐标系类型
                     chart1.tooltip({
                         showTitle: false,//关闭标题
                         itemTpl: '<li>{type}({value}): {percent}</li>'
                     });
                     chart1.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
                             };
                         });
                     chart1.render();
 //********************************图表2***********************************************************************************
                     var chart2 = new G2.Chart({
                         container: 'main2',
                         forceFit: true,
                         height: 400,
                         width:600,
                         padding: [40, 0]
                     });
                     chart2.source(data2, {
                         percent: {
                             formatter: function formatter(val) {
                                 val = val * 100 + '%';
                                 return val;
                             }
                         }});
                     chart2.coord('theta');//设置坐标系类型
                     chart2.tooltip({
                         showTitle: false,//关闭标题
                         itemTpl: '<li>{type}({value}): {percent}</li>'
                     });
                     chart2.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
                             };
                         });
                     chart2.render();
 //********************************图表3***********************************************************************************
                     var chart3 = new G2.Chart({
                         container: 'main3',
                         forceFit: true,
                         height: 400,
                         width:600,
                         padding: [40, 0]
                     });
                     chart3.source(data1, {
                         percent: {
                             formatter: function formatter(val) {
                                 val = val * 100 + '%';
                                 return val;
                             }
                         }});
                     chart3.coord('theta');//设置坐标系类型
                     chart3.tooltip({
                         showTitle: false,//关闭标题
                         itemTpl: '<li>{type}({value}): {percent}</li>'
                     });
                     chart3.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
                             };
                         });
                     chart3.render();
 //********************************图表4***********************************************************************************
                     var chart4 = new G2.Chart({
                         container: 'main4',
                         forceFit: true,
                         height: 400,
                         width:600,
                         padding: [40, 0]
                     });
                     chart4.source(data1, {
                         percent: {
                             formatter: function formatter(val) {
                                 val = val * 100 + '%';
                                 return val;
                             }
                         }});
                     chart4.coord('theta');//设置坐标系类型
                     chart4.tooltip({
                         showTitle: false,//关闭标题
                         itemTpl: '<li>{type}({value}): {percent}</li>'
                     });
                     chart4.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
                             };
                         });
                     chart4.render();
                   
                 }
             },
             error : function(errorMsg) {
                 //请求失败时执行该函数
                 alert("图表请求数据失败!");
               
             }
         });
       
    
     });
     }
 
 });//刷新方法结束

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190619145936667.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_92810169]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169