場景

效果

SpringBoot+AntV實現餅狀圖中的花瓣圖：

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",??????? //返回數據形式為jsonsuccess : 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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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",??????? //返回數據形式為jsonsuccess : 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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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><span style="background-color:{color};" class="g2-tooltip-marker"></span>{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("圖表請求數據失敗!");}});});}});//刷新方法結束

?

總結

以上是生活随笔為你收集整理的SpringBoot+AntV实现一次前后端交互渲染多个饼状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。