<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Demo</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery.liMarquee.js"></script>
<link rel="stylesheet" href="css/comon0.css">
<script>
$(document).ready(function () {
var whei = $(window).width()
$("html").css({
fontSize: whei / 20
})
$(window).resize(function () {
var whei = $(window).width()
$("html").css({
fontSize: whei / 20
})
});
});
</script>
<style>
body {
margin: 0;
font-family: 'Microsoft YaHei';
}
#bg {
width: 1920px;
height: 859px;
background-image: url('./img/bg3.png');
background-size: cover;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
#main-content {
width: 1920px;
height: 770px;
display: flex;
justify-content: space-between;
color: white;
}
.head {
height: 89px;
width: 1920px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
font-family: 'Microsoft YaHei';
z-index: 5;
letter-spacing: 4px;
text-align: center;
margin-top: 0px;
color: white;
}
.head::before {
width: 1135px;
height: 89px;
content: "";
background: url('./img/title.png') no-repeat center center;
background-size: cover;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
left: 390px;
right: 0;
bottom: 0;
z-index: 5;
}
@font-face {
font-family: 'SA Digital Number';
src: url('./font/sa-digital-number.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.time {
position: absolute;
right: 0.15rem;
top: 15px;
line-height: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
padding-right: 0.1rem;
font-family: 'SA Digital Number';
}
#left-column,
#right-column {
display: flex;
flex-direction: column;
}
#center {
display: flex;
flex-direction: column;
}
/* right column*/
.chart-container {
width: 520px;
height: 370px;
z-index: 5;
margin-right: 7.5px;
margin-left: 7.5px;
margin-top: 7.5px;
margin-bottom: 7.5px;
box-shadow: 0 0 1.5vw #237ad4 inset;
background: linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
background-repeat: no-repeat;
background-size: 0.2vw 1.5vw, 1.5vw 0.2vw;
}
/* left column*/
.map-container {
width: 805px;
height: 490px;
z-index: 5;
margin-right: 7.5px;
margin-left: 7.5px;
margin-top: 7.5px;
margin-bottom: 7.5px;
box-shadow: 0 0 1.5vw #237ad4 inset;
background: linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
background-repeat: no-repeat;
background-size: 0.2vw 1.5vw, 1.5vw 0.2vw;
}
.line-container {
width: 805px;
height: 250px;
z-index: 5;
margin-right: 7.5px;
margin-left: 7.5px;
margin-top: 7.5px;
margin-bottom: 7.5px;
box-shadow: 0 0 1.5vw #237ad4 inset;
background: linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
background-repeat: no-repeat;
background-size: 0.2vw 1.5vw, 1.5vw 0.2vw;
}
#left-corner {
display: flex;
justify-content: space-between;
}
.pie-container,
.circle-container {
width: 260px;
height: 250px;
z-index: 5;
margin-right: 7.5px;
margin-left: 7.5px;
margin-top: 7.5px;
margin-bottom: 7.5px;
box-shadow: 0 0 1.5vw #237ad4 inset;
background: linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
background-repeat: no-repeat;
background-size: 0.2vw 1.5vw, 1.5vw 0.2vw;
}
.smjl li {
display: flex;
justify-content: space-between;
width: 400px;
height: 35px;
font-size: 20px;
}
.smjl li span:nth-child(1) {
width: 100px;
font-size: 18px;
}
.smjl li span:nth-child(2) {
width: 100px;
/* Set the width of the second column */
font-size: 18px;
}
.smjl li span:nth-child(3) {
width: 450px;
/* Set the width of the third column */
text-align: left;
font-size: 18px;
}
.gdhead span {
display: inline-block;
vertical-align: middle;
/* Vertically align the inline-block elements */
}
.gdhead span:nth-child(1) {
width: 100px;
/* Width of the first column */
height: 40px;
color: #66dffb;
background: #093e79;
text-ali
chinaMap-main.rar （19个子文件） 
chinaMap-main 
ChinaMap.html 63KB font 
DS-DIGI.TTF 24KB sa-digital-number.ttf 22KB DS-DIGII.TTF 24KB DS-DIGIB.TTF 24KB DS-DIGIT.TTF 25KB js echarts.js 2.53MB china.js 61KB echarts.min.js 760KB index.html 9KB jquery.liMarquee.js 35KB jquery.min.js 94KB img 
bg2.png 3.13MB bg4.png 1.4MB title.png 16KB bg3.png 1.77MB bg1.png 2.11MB bg5.png 390KB css comon0.css 9KB资源评论
大头鼹鼠
- 粉丝: 10
- 资源: 2
最新资源
- flatpak-1.0.9-13.el7-9.x64-86.rpm.tar.gz
- flatpak-builder-1.0.0-13.el7-9.x64-86.rpm.tar.gz
- 三相vsrpwm整流器电压电流双环控制仿真模型
- flatpak-devel-1.0.9-13.el7-9.x64-86.rpm.tar.gz
- PdfConvert PDF WORD 转换工具
- 685635065577955蜂窝3.1.2.apk
- 1.C语言是什么？.pdf
- 62.函数的形参和实参.pdf
- 61.自定义函数.pdf
- 3.怎么学好C语言？.pdf
- 2.为什么学习C语言？.pdf
- 4.编译和链接.pdf
- 5.C语言都有哪些编译器.pdf
- 7.VS2022 使用的小技巧.pdf
- 9. main函数是什么？(1).pdf
- 8. 编写第一个C语言程序.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
