From c88fc4d3b3e6a2cadbbfe0c46c24aed14601db0f Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期四, 25 四月 2024 22:03:04 +0800
Subject: [PATCH] 1
---
Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html | 200 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 178 insertions(+), 22 deletions(-)
diff --git a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
index 61e4373..41c4312 100644
--- a/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
+++ b/Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html
@@ -1,7 +1,7 @@
锘�<!DOCTYPE html>
<html>
<head>
- <title>chart.html</title>
+ <title>R1.html</title>
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
@@ -11,16 +11,29 @@
<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, #main {
+ 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/jquery-1.11.3.min.js"></script>
- <script src="js/echarts.js"></script>
+ <script src="../js/echarts.js"></script>
<script>
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
@@ -31,48 +44,191 @@
return null;
}
- $(function () {
- init();
- });
+ window.onload = function () {
+ init1();
+ init2();
+ }
- function init() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts鍥捐〃
- var myChart = echarts.init(document.getElementById('main'));
-
+ function init1() {
+ var c1 = echarts.init(document.getElementById('c1'));
var option = {
- tooltip: {
- show: true
+ toolbox: {
+ show: false,
},
+ calculable: true,
+ 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: {
- data: ['閿�閲�']
+ 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',
- data: ["琛～", "缇婃瘺琛�", "闆汉琛�", "瑁ゅ瓙", "楂樿窡闉�", "琚滃瓙"]
+ 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'
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ }
}
],
series: [
{
- "name": "閿�閲�",
- "type": "bar",
- "data": [5, 20, 40, 10, 10, 20]
+ name: "鎺ュ緟浜烘",
+ type: 'line',
+ smooth: true,
+ itemStyle: {
+ normal: {
+ areaStyle: {
+ type: 'default'
+ }
+ }
+ },
+ data: [2080, 1320, 1407, 1720, 1636, 1901]
}
]
};
-
- // 涓篹charts瀵硅薄鍔犺浇鏁版嵁
- myChart.setOption(option);
+ 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 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;">1.1</span> <span>涓�</span>
+ </div>
+ </div>
+ </div>
+
+ <div style="height: 250px; 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: 200px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box;">
+ <div id="c2" style="width: 110%; height: 120%; margin: 0 0 0 -30px;">
+ </div>
+ </div>
</div>
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.3