場景

效果

簡介

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实现饼状图中的花瓣图的全部內容，希望文章能夠幫你解決所遇到的問題。

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