From 889ada155e457dbc703531f9628353d288ca3f92 Mon Sep 17 00:00:00 2001 From: 13693261870 <252740454@qq.com> Date: 星期五, 26 四月 2024 10:08:29 +0800 Subject: [PATCH] 1 --- Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html | 246 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 246 insertions(+), 0 deletions(-) diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html new file mode 100644 index 0000000..3ee2add --- /dev/null +++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/L1.html @@ -0,0 +1,246 @@ +锘�<!DOCTYPE html> +<html> +<head> + <title>L1.html</title> + <meta http-equiv="Expires" content="0" /> + <meta http-equiv="Cache" content="no-cache" /> + <meta http-equiv="Pragma" content="no-cache" /> + <meta http-equiv="Cache-control" content="no-cache" /> + <link href="imgs/favicon.ico" rel="icon" type="image/x-icon" /> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> + <style> + html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; + font-family: "Microsoft YaHei", sansserif; + } + + #main { + width: 530px; + height: 100%; + padding: 10px; + box-sizing: border-box; + background-color: #023852; + } + + #yulian img:hover { + box-sizing: border-box; + border-bottom: 2px solid #3DC2E1; + } + </style> + <script src="../js/echarts.js"></script> + <script> + function getQueryString(name) { + var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); + var r = window.location.search.substring(1).match(reg); + if (r != null) { + return decodeURI(r[2]); + }; + return null; + } + + window.onload = function () { + init1(); + init2(); + } + + function init1() { + var c1 = echarts.init(document.getElementById('c1')); + 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: ['50%', '70%'], + itemStyle: { + normal: { + label: { + show: true + }, + labelLine: { + show: true + } + }, + emphasis: { + label: { + show: true, + position: 'center', + textStyle: { + fontSize: '15', + fontWeight: 'bold' + } + } + } + }, + data: [ + { value: 643, name: '姹夋棌' }, + { value: 3, name: '灏戞暟姘戞棌' } + ] + } + ] + }; + c1.setOption(option); + } + + function init2() { + var c2 = echarts.init(document.getElementById('c2')); + var option = { + toolbox: { + show: false, + }, + calculable: true, + color: [ + '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', + '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', + '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', + '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'], + series: [ + { + name: "c2", + type: 'pie', + radius: ['50%', '70%'], + itemStyle: { + normal: { + label: { + show: true + }, + labelLine: { + show: true + } + }, + emphasis: { + label: { + show: true, + position: 'center', + textStyle: { + fontSize: '15', + fontWeight: 'bold' + } + } + } + }, + data: [ + { value: 636, name: '鍐滀笟浜哄彛' }, + { value: 10, name: '闈炲啘涓氫汉鍙�' } + ] + } + ] + }; + c2.setOption(option); + } + </script> +</head> +<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> + </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> + </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> + </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> + </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> + </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> + </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> + </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> + <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> + </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> + </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> + </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> + </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> + <div> + <div id="yulian" style="float: left; box-sizing: border-box; padding: 20px 0px 0 50px;"> + <div style="float: left;"> + <img src="img/a1.png" style="width: 155px; height: 83px; cursor: pointer;" title="涔℃潙鐢熸��01" alt="" /> + </div> + <div style="float: left; margin-left: 60px;"> + <img src="img/a2.png" style="width:155px; height: 83px; cursor: pointer;" title="涔℃潙鐢熸��02" alt="" /> + </div> + </div> + </div> + </div> +</body> +</html> \ No newline at end of file -- Gitblit v1.9.3