1580 lines
37 KiB
JavaScript
1580 lines
37 KiB
JavaScript
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: czl_url + "/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<sunLength;i++){
|
||
// subNameLength += subNameArray[i].length;
|
||
// if(subNameLength<35){
|
||
// subNameHtml += '<img src="../../img/home/sub.png">';
|
||
// subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
||
// }else{
|
||
// tf = true;
|
||
// }
|
||
if(sunLength<4){
|
||
if(i==2){
|
||
subNameHtml +='<br/>';
|
||
subNameHtml += '<img src="../../img/home/sub.png">';
|
||
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
||
}else{
|
||
subNameHtml += '<img src="../../img/home/sub.png">';
|
||
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
||
}
|
||
}else{
|
||
if(i<4){
|
||
if(i==2){
|
||
subNameHtml +='<br/>';
|
||
subNameHtml += '<img src="../../img/home/sub.png">';
|
||
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
||
}else{
|
||
subNameHtml += '<img src="../../img/home/sub.png">';
|
||
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
||
}
|
||
}else{
|
||
tf = true;
|
||
}
|
||
}
|
||
//subNameHtml+='';
|
||
}
|
||
$("#sub_name").append(subNameHtml);
|
||
if(tf){
|
||
$("#sub_name").append('<img id="sub_open" src="../../img/home/drop.png" />');
|
||
}
|
||
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<subTeam.length;i++){
|
||
let dataKey = subTeam[i].dataKey;
|
||
let dataValue = subTeam[i].dataValue.split(",");
|
||
for(var j = 0;j<dataValue.length;j++){
|
||
if(dataKey =='1'){
|
||
baseArray.push(dataValue[j]);
|
||
}else if(dataKey =='2'){
|
||
towerArray.push(dataValue[j]);
|
||
}else{
|
||
lineArray.push(dataValue[j]);
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
var html ='';
|
||
try{
|
||
for(var i=0;i<4;i++){
|
||
|
||
html += '<tr>';
|
||
html += ' <td>';
|
||
if(baseArray[i] !=undefined && baseArray[i] !='undefined'){
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+baseArray[i]+'</span>';
|
||
if(baseArray.length>4 && i==3){
|
||
html += '<img src="../../img/home/drop.png" id="sub_team_base" >';
|
||
}
|
||
}else{
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
||
}
|
||
html += ' </td>';
|
||
html += ' <td>';
|
||
if(towerArray[i] !=undefined && towerArray[i] !='undefined'){
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+towerArray[i]+'</span>';
|
||
if(towerArray.length>4 && i==3){
|
||
html += '<img src="../../img/home/drop.png" id="sub_team_tower">';
|
||
}
|
||
}else{
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
||
}
|
||
html += ' </td>';
|
||
html += ' <td >';
|
||
if(lineArray[i] !=undefined && lineArray[i] !='undefined'){
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+lineArray[i]+'</span>';
|
||
if(lineArray.length>4 && i==3){
|
||
html += '<img src="../../img/home/drop.png" id="sub_team_line">';
|
||
}
|
||
}else{
|
||
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
||
}
|
||
html += ' </td>';
|
||
html += '</tr>';
|
||
}
|
||
|
||
|
||
}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: czl_url + "/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<obj.length;i++){
|
||
let dataNum = obj[i].dataNum; //机具数量
|
||
let dataKey = obj[i].dataKey; //机具类型
|
||
let dataValue = obj[i].dataValue; //机具值
|
||
let toolsId = obj[i].orgId; //机具id
|
||
var numbers = dataNum.split(",").map(Number); // 将字符串按逗号分割成数组，并转换为数字
|
||
var sum = numbers.reduce((a, b) => 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: czl_url + "/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: czl_url + "/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: czl_url + "/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<arrayStr.length;i++){
|
||
if(i == 0){
|
||
html += arrayStr[i];
|
||
}else{
|
||
html += '<br>' + arrayStr[i];
|
||
}
|
||
}
|
||
$("#"+id).click(function () {
|
||
layer.tips(html, this, {
|
||
tips: [type, 'black']
|
||
});
|
||
});
|
||
}
|
||
|
||
//获取工程基本信息
|
||
function getProjectMessage() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
async: true, // 默认异步true,false表示同步
|
||
url: czl_url + "/schedule/getProjectMessage",// 请求地址
|
||
dataType: 'json', // 服务器返回数据类型
|
||
data: {proId:proId}, //获取提交的表单字段
|
||
success: function (data) {
|
||
let obj= data.data;
|
||
let proId =obj.proId;
|
||
let orgId =obj.orgId;
|
||
let proName =obj.proName;
|
||
let volLevel =obj.volLevel;
|
||
let lineLength =obj.lineLength;
|
||
let startTime =obj.startTime;
|
||
let endTime =obj.endTime;
|
||
let towerNum =obj.towerNum;
|
||
let orgName =obj.orgName;
|
||
let volLevelName =obj.volLevelName;
|
||
|
||
let name =obj.name;
|
||
let lon =obj.lon;
|
||
let lat =obj.lat;
|
||
|
||
selectLon = lon;
|
||
selectLat = lat;
|
||
cityName = name;
|
||
// alert("cityName="+cityName+" ,selectLon="+selectLon+" ,selectLat="+selectLat);
|
||
localStorage.setItem("selectLon",selectLon);
|
||
localStorage.setItem("selectLat",selectLat);
|
||
localStorage.setItem("cityName",cityName);
|
||
|
||
|
||
$("#proName").text(proName);
|
||
$("#volLevelName").text(volLevelName);
|
||
$("#startTime").text(startTime);
|
||
$("#lineLength").text(lineLength);
|
||
$("#endTime").text(endTime);
|
||
$("#towerNum").text(towerNum);
|
||
$("#orgName").text(orgName);
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
//产业工人/产业人员
|
||
function getWorkerIndustry() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
async: true, // 默认异步true,false表示同步
|
||
url: czl_url + "/schedule/getWorkerIndustry",// 请求地址
|
||
dataType: 'json', // 服务器返回数据类型
|
||
data: {id:proId}, //获取提交的表单字段
|
||
success: function (data) {
|
||
let obj= data.data;
|
||
let dataKey = obj.dataKey;
|
||
let dataValue = obj.dataValue;
|
||
let dataNum = obj.dataNum;
|
||
|
||
//$("#industry_dataKey").text(dataKey);
|
||
$("#industry_dataKey").text(Number(dataValue)+Number(dataNum));
|
||
|
||
$("#industry_dataValue").text(dataValue);
|
||
$("#industry_dataNum").text(dataNum);
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
//产业工人/自有人员
|
||
function getWorkerOwn() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
async: true, // 默认异步true,false表示同步
|
||
url: czl_url + "/schedule/getWorkerOwn",// 请求地址
|
||
dataType: 'json', // 服务器返回数据类型
|
||
data: {id:proId}, //获取提交的表单字段
|
||
success: function (data) {
|
||
let obj= data.data;
|
||
let dataKey = obj.dataKey;
|
||
let dataValue = obj.dataValue;
|
||
let dataNum = obj.dataNum;
|
||
|
||
//$("#own_dataKey").text(dataKey);
|
||
$("#own_dataKey").text(Number(dataValue)+Number(dataNum));
|
||
$("#own_dataValue").text(dataValue);
|
||
$("#own_dataNum").text(dataNum);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
function getFoundation(v_jc) {
|
||
var chartDom = document.getElementById('foundation');
|
||
var myChart = echarts.init(chartDom);
|
||
let angle = 0; //角度，用来做简单的动画效果的
|
||
let num = v_jc;
|
||
var timerId;
|
||
option = {
|
||
tooltip: {
|
||
formatter: '{a} <br/>{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} <br/>{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} <br/>{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,
|
||
});
|
||
} |