From 98137eadda9575f61f684ab61c08709f4e26a9f8 Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期五, 26 四月 2024 12:28:46 +0800
Subject: [PATCH] 2024-04-26，修改统计图表
---
Terra.YaoGan.Web/Terra.YaoGan.Web/html/tooljs/tool.js | 4
Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html | 197 +++++++++++++++++++++++++++++----------
Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html | 84 ++++++++++------
3 files changed, 201 insertions(+), 84 deletions(-)
diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html
index 3ee2add..61f94e3 100644
--- a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html
+++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html
@@ -45,8 +45,128 @@
}
window.onload = function () {
- init1();
- init2();
+ init3();
+ init4();
+ }
+
+ function init3() {
+ var c3 = echarts.init(document.getElementById('c3'));
+ var option = {
+ toolbox: {
+ show: false,
+ },
+ calculable: true,
+ color: [
+ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
+ '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
+ '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
+ '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
+ series: [
+ {
+ name: "c1",
+ type: 'pie',
+ //radius: ['40%', '70%'],
+ radius: '90%',
+ center: ['50%', '50%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: true
+ },
+ labelLine: {
+ show: true
+ }
+ },
+ emphasis: {
+ label: {
+ show: true,
+ position: 'center',
+ textStyle: {
+ fontSize: '15',
+ fontWeight: 'bold'
+ }
+ }
+ }
+ },
+ data: [
+ { value: 32, name: '澶╃劧鑽夊湴' },
+ { value: 20, name: '閫�鍖�' },
+ { value: 30, name: '娌欏寲' },
+ { value: 18, name: '鐩愭笉鍖�' }
+ ]
+ }
+ ]
+ };
+ c3.setOption(option);
+ }
+
+ function init4() {
+ var c4 = echarts.init(document.getElementById('c4'));
+ var option = {
+ grid: {
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ borderWidth: 0,
+ containLabel: false
+ },
+ title: {
+ text: ' 琛ョ绫诲埆',
+ left: 'right',
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: 20
+ }
+ },
+ color: [ "#4874CB",
+ '#3cb371', '#6b8e23', '#ff6347', '#7b68ee', '#00fa9a',
+ '#ff00ff', '#b8860b', '#30e0e0', '#ffd700'],
+ tooltip: {
+ trigger: 'axis'
+ },
+ calculable: true,
+ xAxis: [
+ {
+ type: 'category',
+ data: ['缇婅崏', '娌欒崏', '绱姳鑻滆摽'],
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: true
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '琛ョ閲�',
+ type: 'bar',
+ data: [100, 500, 400]
+ }
+ ]
+ };
+ c4.setOption(option);
}
function init1() {
@@ -146,89 +266,66 @@
<body>
<div id="main">
<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
- <span style="font-size: 20px; color: white; font-weight:600;">涔℃潙鍩虹鏁版嵁</span>
+ <span style="font-size: 20px; color: white; font-weight:600;">鎵庨瞾鐗规棗</span>
</div>
<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 20px 0 0 50px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>涔℃潙鎬婚潰绉�</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>涓囦憨</span>
+ <span>澶╃劧鑽夊湴</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">113</span> <span>涓囦憨</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鎬昏�曞湴闈㈢Н</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">336</span> <span>浜�</span>
+ <span>澶╃劧鑽夊湴</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">32</span> <span>%</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鍏氱粍缁囨暟</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>涓�</span>
+ <span>閫�鍖�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">20</span> <span>%</span>
</div>
</div>
</div>
<div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 0 0 0 50px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鑷劧鏉戞暟</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">7</span> <span>涓�</span>
+ <span>娌欏寲</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">30</span> <span>%</span>
</div>
- </div>
- </div>
- <div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
- <div style=" float: left; box-sizing: border-box; padding: 0px 0px 0 50px;">
- <div style="color: white; width: 150px; float: left; box-sizing: border-box; border: 1px solid rgba(65,194,225, 0.4); height: 35px; line-height: 35px; vertical-align: central; border-bottom: none;">
- <span> 鎬讳汉鏁帮細646</span><br /><br />
- </div>
- <div style="clear: both; height: 10px; width: 160px; border-left: 160px dashed #36C6FB; box-sizing: border-box; float: left;"></div>
- <div style="height: 10px; width: 150px; float: left; border-left: 150px dashed #E66B4E; box-sizing: border-box; "></div>
- <div style="color: white;">
- <span style="float: left;">鐢凤細329</span>
- <span style="float: right;">濂筹細317</span>
+ <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
+ <span>鐩愭笉鍖�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">18</span> <span>%</span>
</div>
</div>
</div>
<div style="height: 180px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
- <div style="padding: 0 0px; box-sizing: border-box;">
- <div id="c1" style="width: 50%; height: 170px; float: left;"></div>
- <div id="c2" style="width: 50%; height: 170px; margin-left: -50px; float: left;"></div>
+ <div id="c3" style="padding: 0px 0px; box-sizing: border-box; height: 180px; width: 100%;">
</div>
</div>
- <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
- <span style="font-size: 20px; color: white; font-weight:600;">涔℃潙鐢熸�佹鍐�</span>
+ <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8; margin-top:20px;">
+ <span style="font-size: 20px; color: white; font-weight:600;">鍓嶅痉闂ㄨ嫃鏈�</span>
</div>
<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 20px 0px 0 50px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>娑蹭綅</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">28.73</span> <span>M</span>
+ <span>鎬婚潰绉�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">7554</span> <span>浜�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鐬椂娴侀噺</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6702</span> <span>A</span>
+ <span>妞嶈瑕嗙洊</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">15</span> <span>%</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鐢垫祦</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">0</span> <span>A</span>
+ <span>鍏嶈�曡ˉ绉�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1000</span> <span>浜�</span>
</div>
</div>
</div>
- <div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
- <div style=" float: left; box-sizing: border-box; padding: 0px 0px 0 50px;">
- <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鍦熷￥姘村垎</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">90</span> <span>%</span>
- </div>
- <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>婀垮害</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6</span> <span>ppm</span>
- </div>
- <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>COD</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">100</span> <span>mg</span>
- </div>
+ <div style="height: 180px; width: 100%; float: left; background-color: #023852; margin-top: 20px; margin-left: -20px; box-sizing: border-box;">
+ <div id="c4" style="padding: 0px 0px; box-sizing: border-box; height: 130%; width: 115%;">
</div>
</div>
- <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
+ <!--<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
<span style="font-size: 20px; color: white; font-weight:600;">涔℃潙鐢熸�侀瑙�</span>
</div>
<div>
@@ -240,7 +337,7 @@
<img src="img/a2.png" style="width:155px; height: 83px; cursor: pointer;" title="涔℃潙鐢熸��02" alt="" />
</div>
</div>
- </div>
+ </div>-->
</div>
</body>
</html>
\ No newline at end of file
diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
index 168b0f7..5707eb4 100644
--- a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
+++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
@@ -46,7 +46,7 @@
window.onload = function () {
init1();
- init2();
+ //init2();
init3();
}
@@ -55,6 +55,15 @@
var option = {
toolbox: {
show: false,
+ },
+ title: {
+ text: '閰嶅璁炬柦',
+ left: 'left',
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ }
},
calculable: true,
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
@@ -88,12 +97,9 @@
}
},
data: [
- { value: 15, name: '涓撲笟澶ф埛' },
- { value: 23, name: '姘戝' },
- { value: 0, name: '瀹舵棌鍐滃満' },
- { value: 2, name: '鍐滄皯鍚堜綔绀�' },
- { value: 0, name: '浜т笟鍖栦紒涓�' },
- { value: 8, name: '鍏跺畠' }
+ { value: 20, name: '浜�' },
+ { value: 4, name: '鐢�' },
+ { value: 1000, name: '鍥存爮' }
]
}
],
@@ -106,7 +112,7 @@
fontSize: 14
},
itemHeight: 22,
- data: ['涓撲笟澶ф埛', '姘戝', '瀹舵棌鍐滃満', '鍐滄皯鍚堜綔绀�', '浜т笟鍖栦紒涓�', '鍏跺畠']
+ data: ['浜�', '鐢�', '鍥存爮']
}
};
c1.setOption(option);
@@ -117,12 +123,16 @@
var option = {
title: {
text: " 鎺ュ緟娓稿鏁帮紙浜烘锛�",
- show: true,
+ show: false,
textStyle: {
color: '#41C2E1',
fontSize: 16
}
},
+ color: ['#87cefa', '#da70d6', '#32cd32', '#6495ed',
+ '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
+ '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
+ '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
tooltip: {
trigger: 'axis'
},
@@ -169,7 +179,7 @@
],
series: [
{
- name: "鎺ュ緟浜烘",
+ name: "",
type: 'line',
smooth: true,
itemStyle: {
@@ -198,7 +208,12 @@
containLabel: false
},
title: {
- show: false
+ text: " 娌荤悊绫诲瀷",
+ show: false,
+ textStyle: {
+ color: '#41C2E1',
+ fontSize: 16
+ }
},
tooltip: {
trigger: 'axis'
@@ -223,7 +238,7 @@
{
type: 'category',
barHeight: 54,
- data: ['鏉ㄦ', '鐚曠尨妗�', '妗冨瓙', '姊ㄥ瓙', '绔圭瑡骞�'],
+ data: ['鍥村皝绠℃姢', '椋炴挱鑽夌', '浜轰负骞查'],
splitLine: {
show: false
},
@@ -256,7 +271,7 @@
],
series: [{
type: 'bar',
- data: [198.5, 48.3, 29.5, 10.5, 4.9]
+ data: [1000, 2000, 1325]
}]
};
c3.setOption(option);
@@ -266,21 +281,22 @@
<body>
<div id="main">
<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
- <span style="font-size: 20px; color: white; font-weight:600;">涔℃潙浜т笟姒傚喌</span>
+ <span style="font-size: 20px; color: white; font-weight:600;">鍖楀疂鍔涚殝鍥惧槑鏌�</span>
</div>
<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 20px 0 0 20px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>缁忔祹鎬讳骇鍊�</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">120</span> <span>涓囧厓</span>
+ <span>鎬婚潰绉�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6683</span> <span>浜�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
-
+ <span>妞嶈瑕嗙洊</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">25</span> <span>浜�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>浠庝笟鎬讳汉鏁�</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">255</span> <span>浜�</span>
+ <span>PH</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">8.5-9</span> <span></span>
</div>
</div>
</div>
@@ -293,37 +309,41 @@
<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 20px 0px 0 20px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>姘戝鎬绘敹鍏�</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1200</span> <span>涓囧厓</span>
+ <span>浜�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">20</span> <span>鍙�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鎺ュ緟娓稿</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">28</span> <span>涓囦汉</span>
+ <span>鐢�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">5</span> <span>涓�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>姘戝</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">23</span> <span>瀹�</span>
+ <span>鍥存爮</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1000</span> <span>绫�</span>
</div>
</div>
</div>
- <div style="height: 150px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box;">
- <div id="c2" style="width: 110%; height: 120%; margin: 0 0 0 -40px;">
+ <!--<div style="height: 150px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box; margin-top: -50px;">
+ <div id="c2" style="width: 110%; height: 130%; margin: 0 0 0 -40px;">
</div>
+ </div>-->
+
+ <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8; margin-top: 30px;">
+ <span style="font-size: 20px; color: white; font-weight:600;">鏌ュ竷鍢庡浘鍢庢煡</span>
</div>
- <div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; margin-top: 0px; box-sizing: border-box;">
+ <div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
<div style=" float: left; box-sizing: border-box; padding: 20px 0 0 20px;">
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鍐滀骇鍝佹�婚攢閲�</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1280</span> <span>鍚�</span>
+ <span>鎬婚潰绉�</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">4325</span> <span>浜�</span>
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
</div>
<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
- <span>鍐滀骇鍝佹�婚攢鍞</span><br /><br />
- <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">296.8</span> <span>涓囧厓</span>
+ <span>鍦熷￥绫诲瀷</span><br /><br />
+ <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">椋庢矙鍦�</span> <span></span>
</div>
</div>
</div>
diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/html/tooljs/tool.js b/Terra.YaoGan.Web/Terra.YaoGan.Web/html/tooljs/tool.js
index a908e3f..d5a6cd6 100644
--- a/Terra.YaoGan.Web/Terra.YaoGan.Web/html/tooljs/tool.js
+++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/html/tooljs/tool.js
@@ -119,8 +119,8 @@
showDataCount = !showDataCount;
if (showDataCount) {
// TBAX.createBorderDialog("宸︿笂", url, lT.width, lT.height, lT.top, lT.left, lT.bottom, lT.right);
- window.external.createPmDialogDock('showDataCount1', url + "../chart/L1.html", 530, 900, 50, 20, -1, -1);
- window.external.createPmDialogDock('showDataCount2', url + "../chart/R1.html", 530, 900, 40, -1, -1, 20);
+ window.external.createPmDialogDock('showDataCount1', url + "../chart/L1.html", 530, 850, 100, 20, -1, -1);
+ window.external.createPmDialogDock('showDataCount2', url + "../chart/R1.html", 530, 850, 100, -1, -1, 20);
} else {
window.external.closeDialog("showDataCount1");
window.external.closeDialog("showDataCount2");
--
Gitblit v1.9.3