From 1afe548ac40cc7f975917ef9bf2e156595cf81f3 Mon Sep 17 00:00:00 2001
From: alielie <alielie@git.com>
Date: 星期四, 16 四月 2026 08:58:04 +0800
Subject: [PATCH] 优化；
---
Plugin.DataBoard/Libs/Static/test.html | 337 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 325 insertions(+), 12 deletions(-)
diff --git a/Plugin.DataBoard/Libs/Static/test.html b/Plugin.DataBoard/Libs/Static/test.html
index 431dfe4..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>
@@ -51,6 +188,13 @@
var dom0 = document.getElementById('chart0');
var opt0 = {
+ title: {
+ text: '鎶曞叆浜у嚭缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ show: true,
+ },
color: color,
xAxis: {
type: 'category',
@@ -58,19 +202,50 @@
},
yAxis: {
type: 'value',
- interval: 1
+ minInterval: 1
},
series: [
{
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);
@@ -80,12 +255,22 @@
var dom1 = document.getElementById('chart1');
var opt1 = {
+ title: {
+ text: '浜у搧鐘舵�佺粺璁�',
+ left: 'center'
+ },
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{b}\n璁℃暟:{c}\n鍗犳瘮:{d}%',
+ fontSize: 16,
+ lineHeight: 18
},
series: [
{
@@ -114,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);
}
@@ -125,6 +334,17 @@
var dom2 = document.getElementById('chart2');
var opt2 = {
+ title: {
+ text: '鑹巼缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ show: true
+ },
legend: {
orient: 'vertical',
left: 'left'
@@ -143,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;
@@ -169,27 +423,86 @@
var dom3 = document.getElementById('chart3');
var opt3 = {
+ title: {
+ text: 'TOP10涓嶈壇缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ show: true,
+ formatter: '椤圭洰锛歿b}</br>璁℃暟锛歿c}'
+ },
color: color,
+ //xAxis: {
+ // type: 'category',
+ // axisTick: {
+ // alignWithLabel: true
+ // },
+ // data: []
+ //},
+ //yAxis: {
+ // type: 'value',
+ // interval: 1
+ //},
xAxis: {
- type: 'category',
- data: []
+ type: 'value',
+ minInterval: 1,
},
yAxis: {
- type: 'value',
- interval: 1
+ type: 'category',
+ inverse: true,
+ axisLabel: {
+ show: false
+ },
+ data: []
},
series: [
{
data: [],
+ label: {
+ show: true,
+ formatter: '{b} 璁℃暟:{c}',
+ distance: 10,
+ fontSize: 14,
+ position: 'insideLeft'
+ },
type: 'bar',
barMaxWidth: 50
}
]
};
- 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) {
- opt3.xAxis.data = label;
+ chart3 = echarts.init(dom3);
+ opt3.yAxis.data = label;
opt3.series[0].data = data;
chart3.setOption(opt3);
}
--
Gitblit v1.9.1