var layer; var urls = window.location.search; var proId = localStorage.getItem("proId"); var selectLon = localStorage.getItem("selectLon"); var selectLat = localStorage.getItem("selectLat"); var cityName = localStorage.getItem("cityName"); var util; layui.use(['layer','util'], function() { $(document).ready(function() { $(".clickable-text").on("click", function() { window.location.href = "./home.html"; }); }); layer = layui.layer; util = layui.util; setInterval(function () { $("#nowTime").text(getNowTime()) },1000); //工程基本信息 getProjectMessage(); //分公司项目管理资源 getManagementResources(); //产业工人/产业人员 getWorkerIndustry(); //产业工人/自有人员 getWorkerOwn(); //获取项目进度 getProjectProgress(); //获取安全工器具 getToolsMessage(); getSubResource(); // getFoundation();//基础进度 // getTower();//组塔进度 // getLine(); //架线进度 getTowerBasicNum();//地图左下角杆塔数量 $("#returnPage").click(function () { window.history.go(-1); }); $("#switchPage").click(function () { window.location.href="./z_projectList.html"; }); }); //获取安全工器具数据 function getSubResource() { $.ajax({ type: 'POST', async: true, // 默认异步true,false表示同步 url: ctxPath + "/schedule/getSubResource",// 请求地址 dataType: 'json', // 服务器返回数据类型 data: {id:proId}, //获取提交的表单字段 success: function (data) { try { let obj= data.data; let subMessage = obj.subMessage; let subTeam = obj.subTeam; let subNum = subMessage[0].dataKey; //分包数量 let teamNum = subMessage[0].dataValue; //班组数量 let subName = subMessage[0].dataNum; //承包商名称 $("#sub_team_num").text("分包数量 :"+subNum+" 班组数量 :"+teamNum); //sub_name let subNameArray = subName.split(","); let subNameHtml =''; let sunLength = subNameArray.length; let subNameLength = 0; let tf = false; for(let i=0;i'; // }else{ // tf = true; // } if(sunLength<4){ if(i==2){ subNameHtml +='
'; subNameHtml += ''; subNameHtml += ''+subNameArray[i]+''; }else{ subNameHtml += ''; subNameHtml += ''+subNameArray[i]+''; } }else{ if(i<4){ if(i==2){ subNameHtml +='
'; subNameHtml += ''; subNameHtml += ''+subNameArray[i]+''; }else{ subNameHtml += ''; subNameHtml += ''+subNameArray[i]+''; } }else{ tf = true; } } //subNameHtml+=''; } $("#sub_name").append(subNameHtml); if(tf){ $("#sub_name").append(''); } tipsClick("sub_open",subNameArray,2); // 班组详细展示 //alert("subTeam="+subTeam.length); let baseArray = []; let towerArray = []; let lineArray = []; if(subTeam !=null && subTeam.length > 0){ for(var i=0;i'; if(baseArray.length>4 && i==3){ html += ''; } }else{ html += ' '; } html += ' '; html += ' '; if(towerArray[i] !=undefined && towerArray[i] !='undefined'){ html += ' '+towerArray[i]+''; if(towerArray.length>4 && i==3){ html += ''; } }else{ html += ' '; } html += ' '; html += ' '; if(lineArray[i] !=undefined && lineArray[i] !='undefined'){ html += ' '+lineArray[i]+''; if(lineArray.length>4 && i==3){ html += ''; } }else{ html += ' '; } html += ' '; html += ''; } }catch(e){ console.log("e") } //tools_table $("#tools_table").append(html); console.log("baseArray="+baseArray); console.log("towerArray="+towerArray); console.log("lineArray="+lineArray); $("#sub_team_base").click(function () { tipsClick("sub_team_base",baseArray,1); }); $("#sub_team_tower").click(function () { tipsClick("sub_team_tower",towerArray,1); }); $("#sub_team_line").click(function () { tipsClick("sub_team_line",lineArray,1); }); }catch (e) { console.log(e) } } }); }; //获取安全工器具数据 function getToolsMessage() { $.ajax({ type: 'POST', async: true, // 默认异步true,false表示同步 url: ctxPath + "/schedule/getToolsMessage",// 请求地址 dataType: 'json', // 服务器返回数据类型 data: {id:proId}, //获取提交的表单字段 success: function (data) { let obj= data.data; var allNum = 0; if(obj !=null && obj.length>0){ for(var i=0;i a + b, 0); // 对数组中的数字进行求和 allNum = allNum+sum; if(toolsId =='20'){ //基础 $("#tools_base_key").text(sum); $("#tools_base_value").text(dataValue); }else if(toolsId =='21'){ //杆塔 $("#tools_tower_key").text(sum); $("#tools_tower_value").text(dataValue); }else if(toolsId =='22'){ //架线 $("#tools_line_key").text(sum); $("#tools_line_value").text(dataValue); }else{ $("#tools_new_key").text(sum); $("#tools_new_value").text(dataValue); } } $("#tools_all_num").text(allNum); } } }); }; //产业工人/自有人员 function getProjectProgress() { $.ajax({ type: 'POST', async: true, // 默认异步true,false表示同步 url: ctxPath + "/schedule/getProjectProgress",// 请求地址 dataType: 'json', // 服务器返回数据类型 data: {id:proId}, //获取提交的表单字段 success: function (data) { let obj= data.data; let dataNum = parseInt(obj.dataNum); //杆塔总数 let dataKey = parseInt(obj.dataKey); //完成基础个数 let dataValue = parseInt(obj.dataValue); //完成基础个数 let lineLength = parseFloat(obj.level); //线路长度 let finishLength = parseFloat(obj.orgId); //完成长度 let v_jc = dataNum ==0?0:parseFloat((dataKey/dataNum).toFixed(2)); let v_gt = dataNum ==0?0:parseFloat((dataValue/dataNum).toFixed(2)); let v_jx = lineLength==0?0:parseFloat((finishLength/lineLength).toFixed(2)); // var allPross = ((v_jc+v_gt+v_jx)/3).toFixed(1); //alert("1111="+(76/3).toFixed(1)+" ,v_jc="+v_jc+" ,v_gt="+v_gt+" ,v_jx="+v_jx); let is_ok =(parseFloat(v_jc+v_gt+v_jx)*10/3).toFixed(1); let is_not = 10-is_ok; $("#is_ok").css("flex",is_ok+""); $("#is_not").css("flex",is_not+""); getFoundation((v_jc*100).toFixed(1));//基础进度 getTower((v_gt*100).toFixed(1));//组塔进度 getLine((v_jx*100).toFixed(1)); //架线进度 $("#progress_value").text((is_ok*10)+"%"); } }); } function getTowerBasicNum(){ $.ajax({ type: 'POST', async: false, // 默认异步true,false表示同步 url: ctxPath + "/schedule/getTowerBasicNum",// 请求地址 dataType: 'json', // 服务器返回数据类型 data: {proId:proId}, //获取提交的表单字段 success: function (data){ var obj = data.obj; $("#not_finish").text(parseInt(obj.team.basicNotFinishNum)); $("#basic_num").text(parseInt(obj.team.basicFinishNum)); // $("#group_tower_num").text(parseInt(obj.team.towerFinishNum)); }, error:function (XMLHttpRequest, textStatus, errorThrown) { } }); } //分公司项目管理资源 function getManagementResources() { $.ajax({ type: 'POST', async: true, // 默认异步true,false表示同步 url: ctxPath + "/schedule/getManagementResources",// 请求地址 dataType: 'json', // 服务器返回数据类型 data: {proId:proId}, //获取提交的表单字段 success: function (data) { let obj= data.data; console.log(JSON.stringify(obj)) //团队名称 let proTeamName = obj.proTeamName; if(proTeamName !=null && proTeamName.length>1){ $("#proTeamName").text(proTeamName[0]); $("#proTeamName_png").css("display",""); tipsClick('proTeamName_png',proTeamName,2); }else{ $("#proTeamName").text(proTeamName); }; //电压等级 let volLevel = obj.volLevel; if(volLevel !=null && volLevel.length>1){ $("#volLevel").text(volLevel[0]); $("#volLevel_png").css("display",""); tipsClick('volLevel_png',volLevel,2); }else{ $("#volLevel").text(volLevel); } //小队id let proManaId = obj.proManaId; //分管领导org_type_leader projectLeader let projectLeader = obj.projectLeader; $("#projectLeader").text(""); if(projectLeader !=null && projectLeader.length>2){ $("#projectLeader").text(projectLeader[0]+","+projectLeader[1]); $("#projectManager_png2").css("display",""); tipsClick('projectManager_png2',projectManager,2); }else{ $("#projectLeader").text(projectLeader); } //项目经理 let projectManager = obj.projectManager; $("#projectManager").text(""); if(projectManager !=null && projectManager.length>2){ $("#projectManager").text(projectManager[0]+","+projectManager[1]); $("#projectManager_png").css("display",""); tipsClick('projectManager_png',projectManager,2); }else{ $("#projectManager").text(projectManager); } //项目副经理 let projectDeputyManager = obj.projectDeputyManager; $("#projectDeputyManager").text(""); if(projectDeputyManager !=null && projectDeputyManager.length>2){ $("#projectDeputyManager").text(projectDeputyManager[0]+","+projectDeputyManager[1]); $("#projectDeputyManager_png").css("display",""); tipsClick('projectDeputyManager_png',projectDeputyManager,2); }else{ $("#projectDeputyManager").text(projectDeputyManager); } //项目总工 let projectChief = obj.projectChief; $("#projectChief").text(""); if(projectChief !=null && projectChief.length>2){ $("#projectChief").text(projectChief[0]+","+projectChief[1]); $("#projectChief_png").css("display",""); tipsClick('projectChief_png',projectChief,2); }else{ $("#projectChief").text(projectChief); } //安全员 let safetyOfficer = obj.safetyOfficer; $("#safetyOfficer").text(""); console.log("安全员="+safetyOfficer.length) if(safetyOfficer !=null && safetyOfficer.length>2){ $("#safetyOfficer").text(safetyOfficer[0]+","+safetyOfficer[1]); $("#safetyOfficer_png").css("display",""); tipsClick('safetyOfficer_png',safetyOfficer,2); }else{ $("#safetyOfficer").text(safetyOfficer); } //技术员/质检员 let technician = obj.technician; $("#technician").text(""); if(technician !=null && technician.length>2){ $("#technician").text(technician[0]+","+technician[1]); $("#technician_png").css("display",""); tipsClick('technician_png',technician,2); }else{ $("#technician").text(technician); } //协调员 let coordinator = obj.coordinator; $("#coordinator").text(""); console.log("协调员="+coordinator.length) if(coordinator !=null && coordinator.length>2){ $("#coordinator").text(coordinator[0]+","+coordinator[1]); $("#coordinator_png").css("display",""); tipsClick('coordinator_png',coordinator,2); }else{ $("#coordinator").text(coordinator); } //资料员 let ocumenter = obj.ocumenter; $("#ocumenter").text(""); console.log("资料员="+ocumenter.length) if(ocumenter !=null && ocumenter.length>1){ $("#ocumenter").text(ocumenter[0]+","+ocumenter[1]); $("#ocumenter_png").css("display",""); tipsClick('ocumenter_png',ocumenter,2); }else{ $("#ocumenter").text(ocumenter); } //团队数量 let listNum = obj.listNum; $("#listNum").text(listNum[0]); //团队人数 let personNum = obj.personNum; $("#personNum").text(personNum[0]); } }); }; function tipsClick(id,arrayStr,type) { var html = ''; for(var i=0;i{b} : {c}%' }, // 标题 title: [ { text: num + '%\n基础进度', x: 'center', y: 'center', textStyle: { fontSize: '12', color: '#fff', fontFamily: 'Lato', foontWeight: '600' } } ], series: [ //内圆 { type: 'pie', radius: '43%', center: ['50%', '50%'], animation: false, z: 3, itemStyle: { normal: { color: '#032336', label: { show: false }, labelLine: { show: false }, borderColor: '#3bcbf6', borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, //外圆 { type: 'pie', radius: '80%', center: ['50%', '50%'], animation: false, z: 0, itemStyle: { normal: { color: '#001929', label: { show: false }, labelLine: { show: false }, borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 0.5, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 1, color: '#001929' // 100% 处的颜色 } ]), borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, // 进度光环 { name: '外部刻度', type: 'gauge', z: 2, center: ['50%', '50%'], radius: '60%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 15, shadowColor: '#83f3f9', shadowBlur: 6, color: [[num/100, '#83f3f9']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 进度光环背景 { name: '外部刻度', type: 'gauge', z: 1, center: ['50%', '50%'], radius: '61%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 25, shadowColor: '#386e73', shadowBlur: 10, color: [[1, '#032336']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 转动效果 { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((0 + angle) * Math.PI) / 180, endAngle: ((90 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((180 + angle) * Math.PI) / 180, endAngle: ((270 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((270 + -angle) * Math.PI) / 180, endAngle: ((40 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((90 + -angle) * Math.PI) / 180, endAngle: ((220 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint(x0, y0, r, 90 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //粉 fill: '#0CD3DB' }, silent: true } }, data: [0] }, { name: 'ring5', //绿点 type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint(x0, y0, r, 270 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //绿 fill: '#0CD3DB' }, silent: true } }, data: [0] } ] } //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度) function getCirlPoint(x0, y0, r, angle) { let x1 = x0 + r * Math.cos((angle * Math.PI) / 180) let y1 = y0 + r * Math.sin((angle * Math.PI) / 180) return { x: x1, y: y1 } } function draw() { angle = angle + 3 myChart.setOption(option, true) //window.requestAnimationFrame(draw); } setInterval(function() { //用setInterval做动画感觉有问题 draw() }, 30) option && myChart.setOption(option); } function getTower(v_gt) { var chartDom1 = document.getElementById('tower'); var myChart1 = echarts.init(chartDom1); let num = v_gt; let angle = 0; option1 = { tooltip: { formatter: '{a}
{b} : {c}%' }, // 标题 title: [ { text: num + '%\n组塔进度', x: 'center', y: 'center', textStyle: { fontSize: '12', color: '#fff', fontFamily: 'Lato', foontWeight: '600' } } ], series: [ //内圆 { type: 'pie', radius: '43%', center: ['50%', '50%'], animation: false, z: 3, itemStyle: { normal: { color: '#032336', label: { show: false }, labelLine: { show: false }, borderColor: '#3bcbf6', borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, //外圆 { type: 'pie', radius: '80%', center: ['50%', '50%'], animation: false, z: 0, itemStyle: { normal: { color: '#001929', label: { show: false }, labelLine: { show: false }, borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 0.5, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 1, color: '#001929' // 100% 处的颜色 } ]), borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, // 进度光环 { name: '外部刻度', type: 'gauge', z: 2, center: ['50%', '50%'], radius: '60%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 15, shadowColor: '#83f3f9', shadowBlur: 6, color: [[num/100, '#83f3f9']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 进度光环背景 { name: '外部刻度', type: 'gauge', z: 1, center: ['50%', '50%'], radius: '61%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 25, shadowColor: '#386e73', shadowBlur: 10, color: [[1, '#032336']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 转动效果 { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((0 + angle) * Math.PI) / 180, endAngle: ((90 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((180 + angle) * Math.PI) / 180, endAngle: ((270 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((270 + -angle) * Math.PI) / 180, endAngle: ((40 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((90 + -angle) * Math.PI) / 180, endAngle: ((220 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint1(x0, y0, r, 90 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //粉 fill: '#0CD3DB' }, silent: true } }, data: [0] }, { name: 'ring5', //绿点 type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint1(x0, y0, r, 270 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //绿 fill: '#0CD3DB' }, silent: true } }, data: [0] } ] } //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度) function getCirlPoint1(x0, y0, r, angle) { let x1 = x0 + r * Math.cos((angle * Math.PI) / 180) let y1 = y0 + r * Math.sin((angle * Math.PI) / 180) return { x: x1, y: y1 } } function draw1() { angle = angle + 3 myChart1.setOption(option1, true) //window.requestAnimationFrame(draw); } setInterval(function() { //用setInterval做动画感觉有问题 draw1() }, 30) } function getLine(v_jx) { var chartDom2 = document.getElementById('line'); var myChart2 = echarts.init(chartDom2); let num = v_jx; let angle = 0; option2 = { tooltip: { formatter: '{a}
{b} : {c}%' }, // 标题 title: [ { text: num + '%\n架线进度', x: 'center', y: 'center', textStyle: { fontSize: '12', color: '#fff', fontFamily: 'Lato', foontWeight: '600' } } ], series: [ //内圆 { type: 'pie', radius: '43%', center: ['50%', '50%'], animation: false, z: 3, itemStyle: { normal: { color: '#032336', label: { show: false }, labelLine: { show: false }, borderColor: '#3bcbf6', borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, //外圆 { type: 'pie', radius: '80%', center: ['50%', '50%'], animation: false, z: 0, itemStyle: { normal: { color: '#001929', label: { show: false }, labelLine: { show: false }, borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 0.5, color: '#3bcbf6' // 0% 处的颜色 }, { offset: 1, color: '#001929' // 100% 处的颜色 } ]), borderWidth: 3 } }, hoverAnimation: false, label: { show: false }, tooltip: { show: false }, data: [100] }, // 进度光环 { name: '外部刻度', type: 'gauge', z: 2, center: ['50%', '50%'], radius: '60%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 15, shadowColor: '#83f3f9', shadowBlur: 6, color: [[num/100, '#83f3f9']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 进度光环背景 { name: '外部刻度', type: 'gauge', z: 1, center: ['50%', '50%'], radius: '61%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, animation: true, axisLine: { show: true, lineStyle: { width: 25, shadowColor: '#386e73', shadowBlur: 10, color: [[1, '#032336']] } }, // 仪表盘轴线 axisLabel: { show: false }, //刻度标签。 axisTick: { show: false }, //刻度样式 splitLine: { show: false }, //分隔线样式 detail: { show: false }, //仪表盘详情,用于显示数据 pointer: { show: false } //仪表盘指针。 }, // 转动效果 { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((0 + angle) * Math.PI) / 180, endAngle: ((90 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, startAngle: ((180 + angle) * Math.PI) / 180, endAngle: ((270 + angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((270 + -angle) * Math.PI) / 180, endAngle: ((40 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, startAngle: ((90 + -angle) * Math.PI) / 180, endAngle: ((220 + -angle) * Math.PI) / 180 }, style: { stroke: '#0CD3DB', fill: 'transparent', lineWidth: 1.5 }, silent: true } }, data: [0] }, { name: 'ring5', type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint1(x0, y0, r, 90 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //粉 fill: '#0CD3DB' }, silent: true } }, data: [0] }, { name: 'ring5', //绿点 type: 'custom', coordinateSystem: 'none', renderItem: function(params, api) { let x0 = api.getWidth() / 2 let y0 = api.getHeight() / 2 let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65 let point = getCirlPoint1(x0, y0, r, 270 + -angle) return { type: 'circle', shape: { cx: point.x, cy: point.y, r: 4 }, style: { stroke: '#0CD3DB', //绿 fill: '#0CD3DB' }, silent: true } }, data: [0] } ] } //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度) function getCirlPoint1(x0, y0, r, angle) { let x1 = x0 + r * Math.cos((angle * Math.PI) / 180) let y1 = y0 + r * Math.sin((angle * Math.PI) / 180) return { x: x1, y: y1 } } function draw2() { angle = angle + 3 myChart2.setOption(option2, true) //window.requestAnimationFrame(draw); } setInterval(function() { //用setInterval做动画感觉有问题 draw2() }, 30) } function largeMap(){ var index = layer.open({ type: 2, title: false, content: './map_amplify.html', area: ['95%', '95%'], maxmin: false, }); }