6 changed files with 1047 additions and 6 deletions
-
2.vs/config/applicationhost.config
-
241NFine.Application/SRM/WatchPanelApp.cs
-
32NFine.Web/Areas/SRM/Controllers/WatchPanel/WatchPanelController.cs
-
760NFine.Web/Areas/SRM/Views/WatchPanel/PanelCK.cshtml
-
1NFine.Web/NFine.Web.csproj
-
11NFine.Web/Views/Login/Index.cshtml
@ -0,0 +1,760 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<!--更多资源： --> |
||||
|
<meta charset="utf-8" /> |
||||
|
<meta name="description" content="" /> |
||||
|
<meta name="keywords" content="" /> |
||||
|
|
||||
|
<meta name="viewport" |
||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> |
||||
|
|
||||
|
<title>产品质量控制</title> |
||||
|
<!--大屏--> |
||||
|
<link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" /> |
||||
|
<link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" /> |
||||
|
<link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" /> |
||||
|
<link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css"> |
||||
|
<script src="~/Content/js/jquery/jquery-2.1.1.min.js" type="text/javascript"></script> |
||||
|
<script src="~/Content/Cust003/js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script> |
||||
|
<script src="~/Content/js/echarts/echarts5.3.3.js"></script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<script src="~/Content/js/echarts4.8/echarts-liquidfill.js"></script> |
||||
|
<style> |
||||
|
h3 { |
||||
|
color: #FFFFFF; |
||||
|
text-shadow: #05d1fc 0px 1px 3px, #05d1fc 1px 0px 3px,#05d1fc 0px -1px 3px, #05d1fc -1px 0px 3px; |
||||
|
filter: glow(color=#00FFCC,strength=3); |
||||
|
} |
||||
|
|
||||
|
.rightMain_top,.leftMain_bottom ul li { |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
.leftWZ ul { |
||||
|
height: 50%; |
||||
|
|
||||
|
} |
||||
|
.titleCust { |
||||
|
background-color:#bbcec830; |
||||
|
} |
||||
|
|
||||
|
.animationNone { |
||||
|
animation: none !important; |
||||
|
} |
||||
|
|
||||
|
.leftWZ ul li { |
||||
|
width:calc(25% ) !important; |
||||
|
color:white; |
||||
|
float:left; |
||||
|
vertical-align: bottom; |
||||
|
text-align: center; |
||||
|
height:100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.leftMain_top, .leftMain_bottom { |
||||
|
height: calc( 46% ); |
||||
|
} |
||||
|
|
||||
|
.leftMain_topIn, .leftMain_bottomIn, .leftMain_topInUL, |
||||
|
.rightMain_bottom, .rightMain_bottomIn,.leftMain_bottom ul { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
height: 0.2rem; |
||||
|
width: 0.5rem; |
||||
|
padding-top: 0.05rem; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
padding-top: 0.01rem; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
height: 8%; |
||||
|
text-shadow: #01db78 0px 2px 3px, #01db78 1px 0px 3px, #05d1fc 0px -2px 3px, #05d1fc -1px 0px 3px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.TopName { |
||||
|
vertical-align: middle; |
||||
|
text-align: center; |
||||
|
font-size: 30px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.TopNameTime { |
||||
|
vertical-align: middle; |
||||
|
text-align: right; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.rightMain_bottomIn .biaoge_list ul li { |
||||
|
overflow: hidden; |
||||
|
padding-right: 0px; |
||||
|
} |
||||
|
.rightMain_bottomIn .biaoge { |
||||
|
height: calc(100% ); |
||||
|
} |
||||
|
.zantingCla li { |
||||
|
color:yellow !important; |
||||
|
} |
||||
|
.allnav { |
||||
|
/*height: calc(100% - 0.01rem);*/ |
||||
|
height: 100%; |
||||
|
width:100%; |
||||
|
position:relative; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
|
<script type="text/javascript"> |
||||
|
document.documentElement.style.fontSize = |
||||
|
(document.documentElement.clientWidth / 768) * 100 + 'px' |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="bg"> |
||||
|
<table class="title"> |
||||
|
<tr> |
||||
|
<td style="width:20%"> |
||||
|
<div class="TopNamelogo" id="TopNamelogo"> |
||||
|
<img src="~/Content/img/zhenxiang.png" border="0" class="logoclass" /> |
||||
|
</div> |
||||
|
</td> |
||||
|
|
||||
|
<td style="width:60%"> |
||||
|
<div class="TopName" id="TopName">产品质量控制</div> |
||||
|
</td> |
||||
|
<td style="width:20%"> |
||||
|
<div class="TopNameTime" id="TopNameTime"></div> |
||||
|
</td> |
||||
|
|
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
|
||||
|
<div class="leftMain_top"> |
||||
|
<div class="leftMain_topIn"> |
||||
|
<ul class="leftMain_topInUL"> |
||||
|
<li class="LineLi" style="width:72%"> |
||||
|
|
||||
|
<div class="rightMain_bottom"> |
||||
|
<div class="leftWZ" style="height:calc( 18% )"> |
||||
|
|
||||
|
<ul> |
||||
|
<li class="titleCust">待检车辆</li> |
||||
|
<li class="titleCust">已检车辆</li> |
||||
|
<li class="titleCust">待整改车辆</li> |
||||
|
<li class="titleCust">已整改车辆</li> |
||||
|
</ul> |
||||
|
<ul id="ttt2"> |
||||
|
<li>0台</li> |
||||
|
<li>0台</li> |
||||
|
<li>0台</li> |
||||
|
<li>0台</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="rightMain_bottomIn" style="height:calc( 82% )"> |
||||
|
<div class="biaoge biaoge_list" id="marqueelist1" |
||||
|
style="width: 100%; "> |
||||
|
<div class="allnav" id="echart2_2"></div> |
||||
|
</div> |
||||
|
<span class="border_bg_leftTop"></span> |
||||
|
<span class="border_bg_rightTop"></span> |
||||
|
<span class="border_bg_leftBottom"></span> |
||||
|
<span class="border_bg_rightBottom"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
@*</div>*@ |
||||
|
</li> |
||||
|
<li class="LineLi" style="width:28%"> |
||||
|
|
||||
|
<div class="rightMain_bottom"> |
||||
|
<div class="rightMain_bottomIn"> |
||||
|
<div class="biaoge biaoge_list" id="marqueelist1" |
||||
|
style="width: 100%; "> |
||||
|
<div class="allnav" id="echart33"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span class="border_bg_leftTop"></span> |
||||
|
<span class="border_bg_rightTop"></span> |
||||
|
<span class="border_bg_leftBottom"></span> |
||||
|
<span class="border_bg_rightBottom"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="leftMain_bottom" > |
||||
|
<div class="leftMain_bottomIn"> |
||||
|
<ul> |
||||
|
<li class="LineLi"> |
||||
|
|
||||
|
<div class="rightMain_bottom"> |
||||
|
<div class="rightMain_bottomIn"> |
||||
|
@*<h3> SMT车间生产加工数据</h3>*@ |
||||
|
<div class="biaoge biaoge_list" |
||||
|
style="width: 100%; "> |
||||
|
<div class="biaoge_listIn CustDiv4"> |
||||
|
<ul class="ul_title"> |
||||
|
<li>销售车号</li> |
||||
|
<li>部件</li> |
||||
|
<li>人员</li> |
||||
|
<li>项目</li> |
||||
|
<li>时间</li> |
||||
|
<li>类型</li> |
||||
|
<li>结果</li> |
||||
|
|
||||
|
</ul> |
||||
|
<div class="ul_list" id="marqueeCust1"> |
||||
|
<div class="ul_listIn" id="marqueeCustCH1"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span class="border_bg_leftTop"></span> |
||||
|
<span class="border_bg_rightTop"></span> |
||||
|
<span class="border_bg_leftBottom"></span> |
||||
|
<span class="border_bg_rightBottom"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</li> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div style="clear: both"></div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
var DataF = 300;// 300;//单位秒 //刷新数据时间 |
||||
|
var _BarWidth = "25%"; |
||||
|
var _barBorderRadius_M = 2; |
||||
|
var myChart = echarts.init(document.getElementById('echart2_2')); |
||||
|
var myChartArea3 = echarts.init(document.getElementById('echart33')); |
||||
|
$(function () { |
||||
|
getTime(); |
||||
|
GetDataZong(); |
||||
|
|
||||
|
//刷新数据 |
||||
|
timer = setInterval(function () { |
||||
|
GetDataZong(); |
||||
|
}, DataF * 1000); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
function getTime() { |
||||
|
var days = new Array("日", "一", "二", "三", "四", "五", "六"); |
||||
|
var currentDT = new Date(); |
||||
|
var y, m, date, day, hs, ms, ss, theDateStr; |
||||
|
y = currentDT.getFullYear(); //四位整数表示的年份 |
||||
|
m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月 |
||||
|
date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日 |
||||
|
day = currentDT.getDay(); //星期 |
||||
|
hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时 |
||||
|
ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分 |
||||
|
ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒 |
||||
|
theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss; |
||||
|
//填充到组件中 |
||||
|
$("#TopNameTime").text(theDateStr); |
||||
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 |
||||
|
window.setTimeout(getTime, 1000); |
||||
|
} |
||||
|
function GetDataZong() { |
||||
|
|
||||
|
|
||||
|
GetZhiXing_MO("marqueeCustCH1", "30"); |
||||
|
|
||||
|
SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动 |
||||
|
GetOtherData(); |
||||
|
echart2_2(); |
||||
|
echart2_3(); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function SetIfGo(DivID, DivCHID,listID) |
||||
|
{ |
||||
|
var ListDIV = $("#" + listID)[0].clientHeight; |
||||
|
var H_marqueediv = $("#" + DivCHID)[0]; |
||||
|
var H_marqueeView = $("#" + DivID)[0].clientHeight; |
||||
|
if ((ListDIV-40) > H_marqueeView) { |
||||
|
if (!$("#" + DivID).hasClass("animationNone")) { |
||||
|
$("#" + DivID).addClass("animationNone"); |
||||
|
} |
||||
|
if (!$("#" + DivCHID).hasClass("animationNone")) { |
||||
|
$("#" + DivCHID).addClass("animationNone"); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
else { |
||||
|
|
||||
|
if ($("#" + DivID).hasClass("animationNone")) { |
||||
|
$("#" + DivID).removeClass("animationNone"); |
||||
|
} |
||||
|
if ($("#" + DivCHID).hasClass("animationNone")) { |
||||
|
$("#" + DivCHID).removeClass("animationNone"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
function GetZhiXing_MO(marqueeID, ItemNumber) { |
||||
|
$.ajax({ |
||||
|
url: "/SRM/WatchPanel/GetCKData?XX=XX&" + Math.random(), |
||||
|
dataType: "json", |
||||
|
async: false, |
||||
|
success: function (data) { |
||||
|
if (data != false && data != null && data.length > 0) { |
||||
|
|
||||
|
|
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
var html = "<ul>"; |
||||
|
|
||||
|
html += ' <li >' + data[i].销售车号 + '</li> '; |
||||
|
html += ' <li >' + data[i].部件名称 + '</li> <li >' + data[i].人员 + '</li>'; |
||||
|
html += ' <li >' + data[i].项目 + '</li> <li >' + data[i].时间 + '</li>'; |
||||
|
html += ' <li >' + data[i].类型 + '</li> <li >' + data[i].结果 + '</li> </ul> '; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
$("#" + marqueeID).html(html); |
||||
|
} |
||||
|
else { |
||||
|
$("#" + marqueeID).html(""); |
||||
|
} |
||||
|
}, |
||||
|
error: function (aa) { |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function GetOtherData() |
||||
|
{ |
||||
|
$.ajax({ |
||||
|
url: "/SRM/WatchPanel/GetOtherData?XX=XX&" + Math.random(), |
||||
|
dataType: "json", |
||||
|
async: false, |
||||
|
success: function (data) { |
||||
|
if (data != false && data != null && data.length > 0) { |
||||
|
|
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
|
||||
|
$("#ttt2").html="<li>"+data[i].待检车辆+"台</li> <li>"+data[i].已检车辆+ |
||||
|
"台</li> <li>" + data[i].待整改 + "台</li> <li>" + data[i].已整改 + "台</li>"; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
function echart2_2() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
|
||||
|
var colors = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76']; |
||||
|
var colors2 = ['#4992ff40', '#7cffb230', '#fddd609e', '#ff6e7678']; |
||||
|
|
||||
|
var MonArray = new Array();//月份["2023-01","2023-02","2023-03","2023-04"] |
||||
|
|
||||
|
var ZongArray = new Array();//Qty [89,90,60,90] |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
$.ajax({ |
||||
|
url: "/SRM/WatchPanel/GetCKOKRate?XX=XX&" + Math.random(), |
||||
|
dataType: "json", |
||||
|
async: false, |
||||
|
success: function (data) { |
||||
|
if (data != false && data != null && data.length > 0) { |
||||
|
|
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
MonArray.push(data[i].月份); |
||||
|
ZongArray.push(data[i].Qty); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { type: 'shadow' }, |
||||
|
formatter: function (params) { |
||||
|
var showHtm = ""; |
||||
|
showHtm = params[0].name + "月:" + '<br>' + |
||||
|
params[0].seriesName + ':' + params[0].data + '%' ; |
||||
|
|
||||
|
return showHtm; |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
"top": "35", |
||||
|
"right": "5", |
||||
|
"bottom": "20", |
||||
|
"left": "30", |
||||
|
|
||||
|
}, |
||||
|
legend: { |
||||
|
show: false, |
||||
|
}, |
||||
|
title: { |
||||
|
text: '一次性验收合格率', |
||||
|
textStyle: { |
||||
|
fontSize: 15, |
||||
|
color: "rgba(250, 249, 249, 1)", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
"xAxis": [ |
||||
|
{ |
||||
|
"type": "category", |
||||
|
data: MonArray, |
||||
|
axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } }, |
||||
|
axisTick: { show: false, }, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: 9, |
||||
|
color: "rgba(255,255,255,.8)", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
], |
||||
|
"yAxis": [ |
||||
|
{ |
||||
|
|
||||
|
"type": "value", |
||||
|
axisTick: { show: false }, |
||||
|
splitLine: { show: false, }, |
||||
|
|
||||
|
"axisLabel": { |
||||
|
"show": true, |
||||
|
fontSize: 9, |
||||
|
color: "rgba(255,255,255,.8)" |
||||
|
|
||||
|
}, |
||||
|
axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } }, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
"series": [ |
||||
|
|
||||
|
{ |
||||
|
"name": "一次检验合格率", |
||||
|
"type": "line", |
||||
|
"data": ZongArray, |
||||
|
areaStyle: {}, |
||||
|
"itemStyle": { |
||||
|
"normal": { |
||||
|
barBorderRadius: _barBorderRadius_M, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||
|
offset: 0, |
||||
|
color: '#8bd46e' |
||||
|
}, { |
||||
|
offset: 1, |
||||
|
color: '#09bcb7' |
||||
|
}]), |
||||
|
} |
||||
|
}, |
||||
|
"barGap": "0.2", |
||||
|
stack: 'SunShi', |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
myChart.setOption(option); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function echart2_3() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
|
||||
|
var colors = ['#7cffb220', '#7cffb2', '#04040445', '#ff6e76']; |
||||
|
|
||||
|
|
||||
|
|
||||
|
var ZongArray = 0;//[89, 90, 60, 90]//new Array();//工作总时间 |
||||
|
|
||||
|
|
||||
|
$.ajax({ |
||||
|
url: "/SRM/WatchPanel/GetCKOKRateALL?XX=XX&" + Math.random(), |
||||
|
dataType: "json", |
||||
|
async: false, |
||||
|
success: function (data) { |
||||
|
if (data != false && data != null && data.length > 0) { |
||||
|
|
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
ZongArray=data[i].Qty; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
//ZongArray = 0.7; |
||||
|
var options = { |
||||
|
|
||||
|
title: { |
||||
|
text: '质量控制指标', |
||||
|
textStyle: { |
||||
|
fontSize: 15, |
||||
|
color: "rgba(250, 249, 249, 1)", |
||||
|
}, |
||||
|
} |
||||
|
, |
||||
|
|
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'liquidFill', |
||||
|
radius: '85%', |
||||
|
color: [ |
||||
|
{ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colors[1], |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colors[0], |
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, |
||||
|
}, |
||||
|
], |
||||
|
data: [ZongArray, ZongArray-0.1, ZongArray], // data个数代表波浪数 |
||||
|
backgroundStyle: { |
||||
|
borderWidth: 1, |
||||
|
color: colors[2], |
||||
|
}, |
||||
|
label: { |
||||
|
normal: { |
||||
|
textStyle: { |
||||
|
fontSize: 26, |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
outline: { |
||||
|
// show: false |
||||
|
borderDistance: 0, |
||||
|
itemStyle: { |
||||
|
borderWidth: 6, |
||||
|
borderColor: colors[1], |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
myChartArea3.setOption(options); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
function GetArea3() { |
||||
|
|
||||
|
var value = 0.4; |
||||
|
var value1 = 0.6; |
||||
|
var value2 = 0.3; |
||||
|
var value3 = 0.4; |
||||
|
var value4 = 0.5; |
||||
|
var value5 = 0.4; |
||||
|
var value6 = 0.4; |
||||
|
var value7 = 0.5; |
||||
|
|
||||
|
$("#div3-C1-C1").html(value7 + "月完成率"); |
||||
|
$("#div3-C2-C1").html(value6 + "月完成率"); |
||||
|
$("#div3-C1-C2-div1").html(value3); |
||||
|
$("#lastMothPlan").html(value3); |
||||
|
$("#div3-C1-C2-div2").html(value2); |
||||
|
$("#div3-C2-C2-div1").html(value1); |
||||
|
$("#div3-C2-C2-div2").html(value); |
||||
|
|
||||
|
var data = [value5, value5, value5]; |
||||
|
var option3 = { |
||||
|
|
||||
|
title: [ |
||||
|
{ |
||||
|
text: value7 + '月完成率', |
||||
|
x: '22%', |
||||
|
y: '90%', |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
fontWeight: '100', |
||||
|
color: '#5dc3ea', |
||||
|
lineHeight: 16, |
||||
|
textAlign: 'center', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: value6 + '月完成率', |
||||
|
x: '76%', |
||||
|
y: '90%', |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
fontWeight: '100', |
||||
|
color: '#5dc3ea', |
||||
|
lineHeight: 16, |
||||
|
textAlign: 'center', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'liquidFill', |
||||
|
radius: '85%', |
||||
|
center: ['30%', '48%'], |
||||
|
color: [ |
||||
|
{ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#446bf5', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0000FF', |
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, |
||||
|
}, |
||||
|
], |
||||
|
data: [value5, value5, value5], // data个数代表波浪数 |
||||
|
backgroundStyle: { |
||||
|
borderWidth: 1, |
||||
|
color: 'RGBA(51, 66, 127, 0.7)', |
||||
|
}, |
||||
|
label: { |
||||
|
normal: { |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
outline: { |
||||
|
// show: false |
||||
|
borderDistance: 0, |
||||
|
itemStyle: { |
||||
|
borderWidth: 6, |
||||
|
borderColor: '#0000FF', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
{ //第二个球的填充 |
||||
|
type: 'liquidFill', |
||||
|
radius: '85%', |
||||
|
center: ['84%', '45%'], |
||||
|
color: [ |
||||
|
{ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#2aa1e3', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#08bbc9', |
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, |
||||
|
}, |
||||
|
], |
||||
|
data: [value4, value4, value4], // data个数代表波浪数 |
||||
|
backgroundStyle: { |
||||
|
borderWidth: 1, |
||||
|
color: 'RGBA(51, 66, 127, 0.7)', |
||||
|
}, |
||||
|
label: { |
||||
|
normal: { |
||||
|
textStyle: { |
||||
|
fontSize: 28, |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
outline: { |
||||
|
// show: false |
||||
|
borderDistance: 0, |
||||
|
itemStyle: { |
||||
|
borderWidth: 6, |
||||
|
borderColor: '#08bbc9', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
myChartArea3.setOption(option3); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue