From 771a0e7b6b1276087515bbe94de28358cb92963b Mon Sep 17 00:00:00 2001
From: alielie <alielie@git.com>
Date: 星期四, 04 六月 2026 10:32:27 +0800
Subject: [PATCH] 优化老化；
---
Plugin.DataBoard/Libs/Static/test.html | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 264 insertions(+), 7 deletions(-)
diff --git a/Plugin.DataBoard/Libs/Static/test.html b/Plugin.DataBoard/Libs/Static/test.html
index 9b2e204..d037510 100644
--- a/Plugin.DataBoard/Libs/Static/test.html
+++ b/Plugin.DataBoard/Libs/Static/test.html
@@ -6,6 +6,140 @@
<head>
<title>Simple Surface</title>
<meta charset="utf-8">
+ <style type="text/css">
+ /* 瀵� loading 鏁翠綋甯冨眬*/
+ .loading-wrapper {
+ padding: 16px;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-radius: 10px;
+ color: #fff;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+
+ /* loading 鍔ㄧ敾鍥惧儚鐖剁骇鐨勫竷灞� */
+ .loading-view {
+ height: 40px;
+ position: relative;
+ }
+
+ .loading-msg {
+ font-size: 14px;
+ margin: 8px 0 0 0;
+ position: relative;
+ }
+
+ .container1,
+ .container2 {
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ /* border: 1px solid #ff0000; */
+ top: 0;
+ left: 50%;
+ margin-left: -20px;
+ position: absolute;
+ }
+
+ .container2 {
+ transform: rotate(45deg);
+ }
+
+ /* 绗�1绉嶅姩鐢诲拰绗簩绉嶇殑鐩稿悓閮ㄥ垎锛屽叾涓殑 animation 涔熺浉鍚� */
+ .circle,
+ .bounce {
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border-radius: 50%;
+ /* 璁剧疆灏忕悆鍔ㄧ敾 */
+ animation: loading 1.2s both infinite;
+ }
+
+ .circle {
+ position: absolute;
+ }
+
+ /* 璁剧疆灏忕悆鐨勭浉瀵逛綅缃� */
+ .circle1 {
+ top: 0;
+ left: 0;
+ }
+
+ .circle2 {
+ top: 0;
+ right: 0;
+ }
+
+ .circle3 {
+ bottom: 0;
+ right: 0;
+ }
+
+ .circle4 {
+ bottom: 0;
+ left: 0;
+ }
+
+ /* 璁剧疆寤舵椂 */
+ .container1 .circle1 {
+ animation-delay: 0s;
+ }
+
+ .container2 .circle1 {
+ animation-delay: 0.2s;
+ }
+
+ .container1 .circle2 {
+ animation-delay: 0.3s;
+ }
+
+ .container2 .circle2 {
+ animation-delay: 0.4s;
+ }
+
+ .container1 .circle3 {
+ animation-delay: 0.5s;
+ }
+
+ .container2 .circle3 {
+ animation-delay: 0.6s;
+ }
+
+ .container1 .circle4 {
+ animation-delay: 0.7s;
+ }
+
+ .container2 .circle5 {
+ animation-delay: 0.8s;
+ }
+
+ @keyframes loading {
+ 0% {
+ transform: scale(0);
+ }
+
+ 40% {
+ transform: scale(1);
+ }
+
+ 80% {
+ transform: scale(0);
+ }
+
+ 100% {
+ transform: scale(0);
+ }
+ }
+ </style>
<script src="echarts.min.js"></script>
<script type="text/javascript">
const color = ['#22448b'];
@@ -37,12 +171,15 @@
.chart {
height: 100%;
width: 25%;
+ position: relative;
}
</style>
</head>
<body>
<div id="container">
- <div id="chart0" class="chart"></div>
+ <div id="chart0" class="chart">
+
+ </div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
@@ -71,13 +208,44 @@
{
data: [],
type: 'bar',
+ label: {
+ show: true,
+ formatter: '{c}',
+ distance: 5,
+ fontSize: 14,
+ position: 'inside'
+ },
barMaxWidth: 50
}
]
};
- var chart0 = echarts.init(dom0);
+ var chart0 = null;
+ function loading0(msg) {
+ if (chart0 != null) {
+ chart0.dispose();
+ chart0 = null;
+ }
+ dom0.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart0(fields, data) {
+ chart0 = echarts.init(dom0);
opt0.xAxis.data = fields;
opt0.series[0].data = data;
chart0.setOption(opt0);
@@ -97,6 +265,12 @@
legend: {
orient: 'vertical',
left: 'left'
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{b}\n璁℃暟:{c}\n鍗犳瘮:{d}%',
+ fontSize: 16,
+ lineHeight: 18
},
series: [
{
@@ -125,9 +299,33 @@
}
]
};
- var chart1 = echarts.init(dom1);
+ var chart1 = null;
+ function loading1(msg) {
+ if (chart1 != null) {
+ chart1.dispose();
+ chart1 = null;
+ }
+ dom1.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart1(data) {
+ chart1 = echarts.init(dom1);
opt1.series[0].data = data;
chart1.setOption(opt1);
}
@@ -165,19 +363,53 @@
itemStyle: {
color: 'red'
},
+ label: {
+ show: true,
+ position: 'bottom',
+ formatter: (param) => param.value.toFixed(2) + '%'
+ },
},
{
data: [],
itemStyle: {
color: '#22448b'
},
- type: 'line'
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ formatter: (param) => param.value.toFixed(2)+'%'
+ },
}
]
};
- var chart2 = echarts.init(dom2);
+ var chart2 = null;
+ function loading2(msg) {
+ if (chart2 != null) {
+ chart2.dispose();
+ chart2 = null;
+ }
+ dom2.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart2(label, names, data0, data1) {
+ chart2 = echarts.init(dom2)
opt2.xAxis.data = label;
opt2.series[0].name = names[0];
opt2.series[0].data = data0;
@@ -232,7 +464,7 @@
data: [],
label: {
show: true,
- formatter: '{b}',
+ formatter: '{b} 璁℃暟:{c}',
distance: 10,
fontSize: 14,
position: 'insideLeft'
@@ -242,9 +474,34 @@
}
]
};
- var chart3 = echarts.init(dom3);
+ var chart3 = null;
+
+ function loading3(msg) {
+ if (chart3 != null) {
+ chart3.dispose();
+ chart3 = null;
+ }
+ dom3.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart3(label, data) {
+ chart3 = echarts.init(dom3);
opt3.yAxis.data = label;
opt3.series[0].data = data;
chart3.setOption(opt3);
--
Gitblit v1.9.1