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/R1.html | 336 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 336 insertions(+), 0 deletions(-) diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html new file mode 100644 index 0000000..168b0f7 --- /dev/null +++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html @@ -0,0 +1,336 @@ +锘�<!DOCTYPE html> +<html> +<head> + <title>R1.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(); + init3(); + } + + 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: ['100%', '70%'], + center: ['30%', '50%'], + itemStyle: { + normal: { + label: { + show: false + }, + labelLine: { + show: false + } + }, + emphasis: { + label: { + show: true, + position: 'center', + textStyle: { + fontSize: '15', + fontWeight: 'bold' + } + } + } + }, + data: [ + { value: 15, name: '涓撲笟澶ф埛' }, + { value: 23, name: '姘戝' }, + { value: 0, name: '瀹舵棌鍐滃満' }, + { value: 2, name: '鍐滄皯鍚堜綔绀�' }, + { value: 0, name: '浜т笟鍖栦紒涓�' }, + { value: 8, name: '鍏跺畠' } + ] + } + ], + legend: { + orient: 'vertical', + x: 'right', + y: 'center', + textStyle: { + color: '#fff', + fontSize: 14 + }, + itemHeight: 22, + data: ['涓撲笟澶ф埛', '姘戝', '瀹舵棌鍐滃満', '鍐滄皯鍚堜綔绀�', '浜т笟鍖栦紒涓�', '鍏跺畠'] + } + }; + c1.setOption(option); + } + + function init2() { + var c2 = echarts.init(document.getElementById('c2')); + var option = { + title: { + text: " 鎺ュ緟娓稿鏁帮紙浜烘锛�", + show: true, + textStyle: { + color: '#41C2E1', + fontSize: 16 + } + }, + tooltip: { + trigger: 'axis' + }, + grid: { + left: '0%', + top: '0%', + right: '0%', + bottom: '0%', + borderWidth: 0, + containLabel: false + }, + calculable: true, + xAxis: [ + { + type: 'category', + boundaryGap: false, + splitLine: { + show: false + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff', + fontSize: 14 + } + }, + data: ['2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03'] + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + show: false + }, + axisLabel: { + show: false, + textStyle: { + color: '#fff', + fontSize: 14 + } + } + } + ], + series: [ + { + name: "鎺ュ緟浜烘", + type: 'line', + smooth: true, + itemStyle: { + normal: { + areaStyle: { + type: 'default' + } + } + }, + data: [2080, 1320, 1407, 1720, 1636, 1901] + } + ] + }; + c2.setOption(option); + } + + function init3() { + var c3 = echarts.init(document.getElementById('c3')); + var option = { + grid: { + left: 0, + top: 0, + right: 0, + bottom: 0, + borderWidth: 0, + containLabel: false + }, + title: { + show: false + }, + tooltip: { + trigger: 'axis' + }, + calculable: true, + xAxis: [ + { + type: 'value', + splitLine: { + show: false + }, + axisLabel: { + show: false, + textStyle: { + color: '#fff', + fontSize: 14 + } + } + } + ], + yAxis: [ + { + type: 'category', + barHeight: 54, + data: ['鏉ㄦ', '鐚曠尨妗�', '妗冨瓙', '姊ㄥ瓙', '绔圭瑡骞�'], + splitLine: { + show: false + }, + smooth: true, + label: { + normal: { + show: true, + position: "right", + offset: [5, -2], + textStyle: { + color: "#fff", + fontSize: 12 + } + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff', + fontSize: 14 + } + }, + scale: true, + inverse: true, + nameTextStyle: { + color: '#fff', + fontSize: 18 + } + } + ], + series: [{ + type: 'bar', + data: [198.5, 48.3, 29.5, 10.5, 4.9] + }] + }; + c3.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 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> + </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;">255</span> <span>浜�</span> + </div> + </div> + </div> + + <div style="height: 200px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;"> + <div id="c1" style="float: left; box-sizing: border-box; padding: 0 35px 0 20px; width: 100%; height: 100%;"> + </div> + </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 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> + </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> + </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> + </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> + </div> + + <div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; margin-top: 0px; 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> + </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> + </div> + </div> + </div> + <div style="height: 180px; width: 100%; float: left; padding-left: 10px; margin-top: -50px; box-sizing: border-box; border: 0px solid red;"> + <div id="c3" style="width: 100%; height: 150%; margin: 0 0 0 0px;"> + </div> + </div> + </div> +</body> +</html> \ No newline at end of file -- Gitblit v1.9.3