From 9d1660270272180cd71147d6ddd53d1382643d2e Mon Sep 17 00:00:00 2001
From: wenxiangchao <wenxiangchao@ihengxin.com.cn>
Date: 星期一, 02 十一月 2026 18:00:14 +0800
Subject: [PATCH] merge: 并入远程 Initial commit 作为历史根节点
---
Plugin.DataBoard/Libs/Static/test.html | 512 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 512 insertions(+), 0 deletions(-)
diff --git a/Plugin.DataBoard/Libs/Static/test.html b/Plugin.DataBoard/Libs/Static/test.html
new file mode 100644
index 0000000..d037510
--- /dev/null
+++ b/Plugin.DataBoard/Libs/Static/test.html
@@ -0,0 +1,512 @@
+锘�<!DOCTYPE html>
+
+
+<html>
+
+<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'];
+
+
+ function resize(width, height) {
+ var dom = document.getElementById('container');
+ dom.style.height = height + 'px';
+ chart0.resize();
+ chart1.resize();
+ chart3.resize();
+ }
+ </script>
+ <style type="text/css">
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ }
+
+ #container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ }
+
+ .chart {
+ height: 100%;
+ width: 25%;
+ position: relative;
+ }
+ </style>
+</head>
+<body>
+ <div id="container">
+ <div id="chart0" class="chart">
+
+ </div>
+ <div id="chart1" class="chart"></div>
+ <div id="chart2" class="chart"></div>
+ <div id="chart3" class="chart"></div>
+ </div>
+ <script type="text/javascript">
+ var dom0 = document.getElementById('chart0');
+
+ var opt0 = {
+ title: {
+ text: '鎶曞叆浜у嚭缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ show: true,
+ },
+ color: color,
+ xAxis: {
+ type: 'category',
+ data: []
+ },
+ yAxis: {
+ type: 'value',
+ minInterval: 1
+ },
+ series: [
+ {
+ data: [],
+ type: 'bar',
+ label: {
+ show: true,
+ formatter: '{c}',
+ distance: 5,
+ fontSize: 14,
+ position: 'inside'
+ },
+ barMaxWidth: 50
+ }
+ ]
+ };
+ 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);
+ }
+ </script>
+ <script type="text/javascript">
+ 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: [
+ {
+ type: 'pie',
+ radius: '50%',
+ data: [],
+ itemStyle: {
+ color: (param) => {
+ if (param.name === 'Passed') {
+ return 'green';
+ } else if (param.name == 'Failed') {
+ return 'red';
+ } else if (param.name == 'Action') {
+ return 'Orange';
+ }
+ return 'gray';
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ }
+ }
+ }
+ ]
+ };
+ 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);
+ }
+ </script>
+ <script type="text/javascript">
+ var dom2 = document.getElementById('chart2');
+
+ var opt2 = {
+ title: {
+ text: '鑹巼缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ show: true
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ xAxis: {
+ type: 'category',
+ data: []
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [],
+ type: 'line',
+ itemStyle: {
+ color: 'red'
+ },
+ label: {
+ show: true,
+ position: 'bottom',
+ formatter: (param) => param.value.toFixed(2) + '%'
+ },
+ },
+ {
+ data: [],
+ itemStyle: {
+ color: '#22448b'
+ },
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ formatter: (param) => param.value.toFixed(2)+'%'
+ },
+ }
+ ]
+ };
+ 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;
+ opt2.series[1].name = names[1];
+ opt2.series[1].data = data1;
+ chart2.setOption(opt2);
+ }
+ </script>
+
+ <script type="text/javascript">
+ 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: 'value',
+ minInterval: 1,
+ },
+ yAxis: {
+ 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 = 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);
+ }
+ </script>
+
+</body>
+</html>
\ No newline at end of file
--
Gitblit v1.9.1