这次实践了Highcharts的双饼图,确实比普通饼图复杂多了,关键相关数据 多不能继续用简单基本数据类型Map,list了,单独建了个VO存放要用到的数据,不多说,贴代码!
JS:
/**查看机器占比(按产品线) /8*/function loadMachineRate(){var chart;$(document).ready(function(){chart = new Highcharts.Chart({//常规图表选项设置chart: {renderTo: 'machineRate', //在哪个区域呈现，对应HTML中的一个元素IDplotBackgroundColor: null, //绘图区的背景颜色plotBorderWidth: null, //绘图区边框宽度plotShadow: false //绘图区是否显示阴影 },//图表的主标题title: {text: '按产品线统计机器占比'},yAxis: {title: {text: 'Total percent market share'}},//当鼠标经过时的提示设置tooltip: {formatter: function() {return this.point.name +': '+ '<b>'+Highcharts.numberFormat(this.percentage, 2) +'% </b><br/>总量: '+'<b>'+ Highcharts.numberFormat(this.y, 0, ',') +' 台</b>';}},//每种图表类型属性设置plotOptions: {pie: {shadow: false,center: ['50%', '50%']}},//图表要展现的数据series: [{name: 'productLine',size: '60%',type:'pie',dataLabels: {color: 'white',distance: -30}}, {name: 'machineStatus',type:'pie',size: '80%',innerSize: '60%',dataLabels: {}}]});});$.ajax({type : "GET",/*url : "machine/getStaticMachineRateByProductLine",*/url : "machine/getMachineRateVOByProductline",success : function(data){var allMachineCount = 0;//所有机器总数for(i in data){allMachineCount += data[i].allMachine;}console.log("所有机器"+allMachineCount);var colors = Highcharts.getOptions().colors,categories = ['网页', '下载', '点播', '视频'],data = [{y: data[0].allMachine,color: colors[0],drilldown: {name: '机器状态',categories: ['网页投产未使用', '网页投产使用', '网页投产无IP', '网页待下架','网页上架完毕','网页故障','网页下架中'],data: [data[0].freeMachineCount,data[0].workMachineCount,data[0].noIp,data[0].waitShelfCount,data[0].onShelfCount,data[0].bugCount,data[0].offShelfCount],}}, {y: data[1].allMachine,color: colors[1],drilldown: {name: '机器状态',categories: ['下载投产未使用', '下载投产使用', '下载投产无IP', '下载待下架','下载上架完毕','下载故障','下载下架中'],data: [data[1].freeMachineCount,data[1].workMachineCount,data[1].noIp,data[1].waitShelfCount,data[1].onShelfCount,data[1].bugCount,data[1].offShelfCount],}}, {y: data[2].allMachine,color: colors[2],drilldown: {name: '机器状态',categories: ['点播投产未使用', '点播投产使用', '点播投产无IP', '点播待下架','点播上架完毕','点播故障','点播下架中'],data: [data[2].freeMachineCount,data[2].workMachineCount,data[2].noIp,data[2].waitShelfCount,data[2].onShelfCount,data[2].bugCount,data[2].offShelfCount],}}, {y: data[3].allMachine,color: colors[3],drilldown: {name: '机器状态',categories: ['视频投产未使用', '视频投产使用', '视频投产无IP', '视频待下架','视频上架完毕','视频故障','视频下架中'],data: [data[3].freeMachineCount,data[3].workMachineCount,data[3].noIp,data[3].waitShelfCount,data[3].onShelfCount, data[3].bugCount,data[3].offShelfCount],}}],productlineData = [],statusData = [],i,j,dataLen = data.length,drillDataLen,brightness;// Build the data arraysfor (i = 0; i < dataLen; i += 1) {// add productline dataproductlineData.push({name: categories[i],y: data[i].y,color: data[i].color});// add status datadrillDataLen = data[i].drilldown.data.length;for (j = 0; j < drillDataLen; j += 1) {brightness = 0.22 - (j / drillDataLen)/4;statusData.push({name: data[i].drilldown.categories[j],y: data[i].drilldown.data[j],color: Highcharts.Color(data[i].color).brighten(brightness).get()});}}console.log(productlineData);console.log(statusData);chart.series[0].setData(productlineData); chart.series[1].setData(statusData); },error : function(e){/*alert(e);*/}});}
Controller:
/*** 获取产品线下不同机器状态的机器数量*/@RequestMapping("/getMachineRateVOByProductline")@ResponseBodypublic List<MachineRateVO> getMachineRateVOByProductline(){List<MachineRateVO> machineRateVOs = platformMachineService.getMachineRateVOByProductline();return machineRateVOs;}
Service:
/*** 获取产品线下不同机器状态的机器数量*/@Overridepublic List<MachineRateVO> getMachineRateVOByProductline() {List<MachineRateVO> machineRateVOs = new ArrayList<MachineRateVO>();//根据产品线统计机器占比(饼图)List<Map<String, Integer>> productlineMaps = this.platformMachineMapper.getStaticMachineRateByProductLine();//循环每一条产品线 for (Map<String, Integer> productlineMap : productlineMaps) {Iterator it = productlineMap.entrySet().iterator();while(it.hasNext()){Map.Entry entry = (Map.Entry) it.next(); Object key = entry.getKey(); Object val = entry.getValue(); if (key.toString().equals("businessType")) {List<com.dnion.platform.dao.mybatis.entity.PlatformMachine> platformMachines = this.platformMachineMapper.getPlatformMachinesByProductline(val.toString());MachineRateVO machineRateVO = wrapMachineRateVO(val.toString(),platformMachines);machineRateVOs.add(machineRateVO);}}}return machineRateVOs;}
Method:
/*** 封装platformMachine为MachineRateVO*/@SuppressWarnings("null")private MachineRateVO wrapMachineRateVO(String businessType,List<com.dnion.platform.dao.mybatis.entity.PlatformMachine> platformMachines) {int waitShelfCount = 0;//待下架int offShelfCount = 0;//下架中int onShelfCount = 0;//上架完毕int bugCount = 0;//故障int operationCount = 0;//投产int freeMachineCount = 0;//未使用int workMachineCount = 0;//使用int noIp = 0;//无ipMachineRateVO machineRateVO = new MachineRateVO();for(com.dnion.platform.dao.mybatis.entity.PlatformMachine platformMachine : platformMachines){if (platformMachine.getMcRunStatus().equals("OPERATION")) {//投产 operationCount += 1;List<PlatformMachineIp> platformMachineIps = platformMachine.getPlatformMachineIps();if (platformMachineIps.size() != 0) { //有ipSet<Integer> mcIpStatus = new HashSet<Integer>();for(PlatformMachineIp platformMachineIp : platformMachineIps){mcIpStatus.add((int)platformMachineIp.getMcIpStatus());}if (mcIpStatus.contains(5)) {//有空闲ip 则为空闲机器freeMachineCount += 1;}else {workMachineCount += 1;}}else {//无ipnoIp += 1;}}else if (platformMachine.getMcRunStatus().equals("OFFSHELF")) {offShelfCount += 1;}else if (platformMachine.getMcRunStatus().equals("ONSHELF")) {onShelfCount += 1;}else if (platformMachine.getMcRunStatus().equals("BUG")) {bugCount += 1;}else if (platformMachine.getMcRunStatus().equals("WAITSHELF")) {waitShelfCount += 1;}}machineRateVO.setWaitShelfCount(waitShelfCount);machineRateVO.setOffShelfCount(offShelfCount);machineRateVO.setOnShelfCount(onShelfCount);machineRateVO.setBugCount(bugCount);machineRateVO.setOperationCount(operationCount);machineRateVO.setFreeMachineCount(freeMachineCount);machineRateVO.setWorkMachineCount(workMachineCount);machineRateVO.setBusinessType(businessType);machineRateVO.setNoIp(noIp);machineRateVO.setAllMachine(platformMachines.size());return machineRateVO;}
VO:
/*** 产品线机器占比页面视图*/public class MachineRateVO {/** 主要元素 下面的数量都是对应于该产品线 */private String businessType;//产品线类型 主要元素 下面的数量都是对应于该产品线private Integer allMachine;//产品线下的所有机器private Integer waitShelfCount;//待下架机器数量private Integer offShelfCount;//下架中机器数量private Integer onShelfCount;//上架完毕机器数量private Integer bugCount;//故障机器数量private Integer operationCount;//投产机器数量//freeMachineCount+workMachineCount=operationCountprivate Integer freeMachineCount;//未使用机器数量private Integer workMachineCount;//使用的机器数量private Integer noIp;//投产但无ippublic MachineRateVO(){}getter and setter...}
基本上就是以上代码了,下面是效果图:
