pwh6feynr
/
123
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.1

Browse Source
master
13451294168 1 year ago
parent 4b76edade5
commit d01e7c05dc
2 changed files with 488 additions and 449 deletions
Show Stats Download Patch File Download Diff File

47
poem/css/index.css
Unescape View File

@ -20,7 +20,7 @@
float: left; float: left;
width: 17.3%; width: 17.3%;
height: 112%; height: 112%;
background: gold; /* background: gold; */
} }
/* 这是框的样式 */ /* 这是框的样式 */
.main_top_left_top { .main_top_left_top {
@ -74,7 +74,7 @@
} }
.main_top_left_bottom_bar .bar_num { .main_top_left_bottom_bar .bar_num {
color: #0EFCFF; color: #0EFCFF;
margin-left: 3%; margin-left: %;
-webkit-transform-origin-x: 0; -webkit-transform-origin-x: 0;
transform: scale(0.7); transform: scale(0.7);
-webkit-transform: scale(0.7); -webkit-transform: scale(0.7);
@ -105,19 +105,41 @@
.main_top_left_top_title { .main_top_left_top_title {
text-align: center; text-align: center;
color: #0EFCFF; color: #0EFCFF;
font-size: .75vw; font-size: 55px;
padding-top: .2vw; padding-top: 50px;
} }
/* 这是第一个框的样式*/
.main_top_left_top_con { .main_top_left_top_con {
width: 92%; width: 92%;
height: 71%; height: 71%;
margin: auto; margin: auto;
margin-top: 3%; margin-top: 16%;
color: white; color: white;
/* margin-left: 4%; */ /* margin-left: 4%; */
/* text-indent: .5vw; */ /* text-indent: .5vw; */
font-size: .7vw; font-size: 55px;
/* letter-spacing: .15vw; */ /* letter-spacing: .15vw; */
}
/* 这是横线图 */
.main_top_left_top_con_aa {
width: 92%;
height: 71%;
margin: auto;
margin-top: 16%;
color: white;
margin-left: -80px;
/* text-indent: .5vw; */
font-size: 55px;
/* letter-spacing: .15vw; */
}
/* 这是饼状图的样式 */
.main_top_left_top_con_mas{
width: 80%;
height: 71%;
margin-right: 100px;
margin-top: 25%;
/* margin-left: px; */
font-size: .7vw;
} }
.main_top_left_top_con span { .main_top_left_top_con span {
display: inline-block; display: inline-block;
@ -135,9 +157,11 @@
float: left; float: left;
width: 48%; width: 48%;
height: 100%; height: 100%;
text-align: center; margin-top: 10px;
/* 改变字体位置 */
background: #FD9133; background: #FD9133;
font-size: .7vw; text-align: center;
font-size: 55px;
} }
.main_top_left_t_c_l_right,.main_top_left_t_c_r_right { .main_top_left_t_c_l_right,.main_top_left_t_c_r_right {
background: #F6D10E; background: #F6D10E;
@ -189,6 +213,7 @@
margin-top: -7%; margin-top: -7%;
} }
.main_top_left_top_con_list { .main_top_left_top_con_list {
font-size: 55px;
float: left; float: left;
height: 48%; height: 48%;
width: 32%; width: 32%;
@ -264,8 +289,8 @@
.main_top_middle_num_title { .main_top_middle_num_title {
float: left; float: left;
color: #0EFCFF; color: #0EFCFF;
font-size: 1.5vw; font-size: 100px;
margin-left: 13%; margin-left: 16%;
line-height: 4.5vw; line-height: 4.5vw;
width: 18%; width: 18%;
margin-top: .5vw; margin-top: .5vw;
@ -329,9 +354,11 @@
font-size: .8vw; font-size: .8vw;
color: #0EFCFF; color: #0EFCFF;
} }
/* 这是中间两个饼状图的样式 */
.main_top_echarts_pie { .main_top_echarts_pie {
width: 100%; width: 100%;
height: 90%; height: 90%;
margin-left:200px ;
} }
.main_top_right { .main_top_right {
float: right; float: right;

78
poem/index.html
Unescape View File

@ -1,4 +1,3 @@
<!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -12,6 +11,7 @@
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
</head> </head>
<body> <body>
<div id="particles-js" class="main"> <div id="particles-js" class="main">
<div class="main_con"> <div class="main_con">
@ -58,7 +58,7 @@
<div class="main_top_left_top main_top_left_bottom"> <div class="main_top_left_top main_top_left_bottom">
<img src="./images/main_top_left.png" /> --> <img src="./images/main_top_left.png" /> -->
<div class="main_top_left_top_title">各朝代诗人数量</div> <div class="main_top_left_top_title">各朝代诗人数量</div>
<div id="baseId" class="main_top_left_top_con"></div> <div id="baseId" class="main_top_left_top_con_aa"></div>
</div> </div>
</div> </div>
<div class="main_top_middle"> <div class="main_top_middle">
@ -142,7 +142,7 @@
<div class="main_top_left_top main_top_left_bottom"> <div class="main_top_left_top main_top_left_bottom">
<img src="./images/main_top_left.png" /> <img src="./images/main_top_left.png" />
<div class="main_top_left_top_title">XXXX数量类型占比</div> <div class="main_top_left_top_title">XXXX数量类型占比</div>
<div id="questionId" class="main_top_left_top_con"> <div id="questionId" class="main_top_left_top_con_mas">
</div> </div>
</div> </div>
</div> </div>
@ -184,26 +184,34 @@
<ul> <ul>
<li> <li>
<div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title1">更多免费精品模板关注公众号“DreamCoders”</div> <div class="main_bottom_t_list_title main_bottom_t_list_title1">
<div class="main_bottom_t_list_time main_bottom_t_list_time1">2023/05/20</div> 更多免费精品模板关注公众号“DreamCoders”</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time1">2023/05/20
</div>
</div> </div>
</li> </li>
<li> <li>
<div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title2">更多免费精品模板关注公众号“DreamCoders”</div> <div class="main_bottom_t_list_title main_bottom_t_list_title2">
<div class="main_bottom_t_list_time main_bottom_t_list_time2">2023/05/20</div> 更多免费精品模板关注公众号“DreamCoders”</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time2">2023/05/20
</div>
</div> </div>
</li> </li>
<li> <li>
<div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title3">更多免费精品模板关注公众号“DreamCoders”</div> <div class="main_bottom_t_list_title main_bottom_t_list_title3">
<div class="main_bottom_t_list_time main_bottom_t_list_time3">2023/05/20</div> 更多免费精品模板关注公众号“DreamCoders”</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time3">2023/05/20
</div>
</div> </div>
</li> </li>
<li> <li>
<div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title4">更多免费精品模板关注公众号“DreamCoders”</div> <div class="main_bottom_t_list_title main_bottom_t_list_title4">
<div class="main_bottom_t_list_time main_bottom_t_list_time4">2023/05/20</div> 更多免费精品模板关注公众号“DreamCoders”</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time4">2023/05/20
</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -409,7 +417,7 @@
inside: false, inside: false,
textStyle: { textStyle: {
color: '#38E1E1', color: '#38E1E1',
fontSize: '8', fontSize: '40',
}, },
formatter: function (val, index) { formatter: function (val, index) {
return `${charts[index].num}` return `${charts[index].num}`
@ -451,7 +459,7 @@
show: true, show: true,
position: [-65, -2], position: [-65, -2],
textStyle: { textStyle: {
fontSize: 8 fontSize: 40
}, },
formatter: function (a, b) { formatter: function (a, b) {
return a.name return a.name
@ -492,16 +500,16 @@
}, },
color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'], color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'],
legend: { legend: {
itemWidth: 11,// 标志图形的长度 itemWidth: 50,// 标志图形的长度
itemHeight: 11,// 标志图形的宽度 itemHeight: 50,// 标志图形的宽度
orient: 'vertical', orient: 'vertical',
// left: 'right', // left: 'right',
top: '15%', top: '15%',
x: '50%', x: '90%',
data: datas, data: datas,
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff', color: '#fff',
fontSize: 8 fontSize: 50,
}, },
}, },
series: [ series: [
@ -509,7 +517,7 @@
name: '问题反馈', name: '问题反馈',
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
center: ['20%', '50%'], center: ['50%', '40%'],
animationDuration: 2500, animationDuration: 2500,
data: datas, data: datas,
label: { label: {
@ -549,12 +557,13 @@
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{a} <br/>{b} : {c} ({d}%)'
}, },
legend: { legend: {
itemWidth: 12,// 标志图形的长度 itemWidth: 50,// 标志图形的长度
itemHeight: 12,// 标志图形的宽度 itemHeight: 50,// 标志图形的宽度
orient: 'vertical', orient: 'vertical',
// left: 'right', // left: 'right',
top: '5%', top: '1%',
bottom: '50%', bottom: '50%',
x: '45%', x: '45%',
textStyle: { textStyle: {
@ -564,6 +573,10 @@
}, },
data: data, data: data,
}, },
textStyle: {
color: '#fff',
fontSize: 50,
},
series: [ series: [
// 主要展示层的 // 主要展示层的
{ {
@ -617,7 +630,7 @@
setInterval(function () { setInterval(function () {
publicitChart.clear() publicitChart.clear()
publicitChart.setOption(option) publicitChart.setOption(option)
},6000) }, 60000)
}, },
// 三务公开数量 // 三务公开数量
threeTasksFn: function () { threeTasksFn: function () {
@ -650,8 +663,8 @@
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
}, },
legend: { legend: {
itemWidth: 15,// 标志图形的长度 itemWidth: 50,// 标志图形的长度
itemHeight: 15,// 标志图形的宽度 itemHeight: 50,// 标志图形的宽度
orient: 'vertical', orient: 'vertical',
// left: 'right', // left: 'right',
top: '10%', top: '10%',
@ -659,8 +672,7 @@
x: '50%', x: '50%',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 8, fontSize: 50,
}, },
data: data data: data
}, },
@ -719,7 +731,7 @@
x: '5%', x: '5%',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 8, fontSize: 50,
}, },
data: data, data: data,
@ -749,7 +761,7 @@
borderRadius: 4, borderRadius: 4,
padding: [0, 0], padding: [0, 0],
height: 20, height: 20,
fontSize: 8, fontSize: 50,
align: 'center', align: 'center',
color: '#0EFCFF', color: '#0EFCFF',
} }
@ -951,7 +963,7 @@
formatter: fomatter_fn, formatter: fomatter_fn,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 8 fontSize: 50,
} }
} }
}; };
@ -970,7 +982,7 @@
borderWidth: 1, borderWidth: 1,
textStyle: { textStyle: {
color: '#3c3c3c', color: '#3c3c3c',
fontSize: 16 fontSize: 50
}, },
extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)' extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
}, },
@ -999,7 +1011,7 @@
yAxis: [{ yAxis: [{
data: y_data, data: y_data,
axisLabel: { axisLabel: {
fontSize: 8, fontSize: 50,
color: 'rgba(255,255,255,.7)' color: 'rgba(255,255,255,.7)'
}, },
@ -1141,7 +1153,7 @@
data: ["财务", "村务", "党务", "居务", "政务"], data: ["财务", "村务", "党务", "居务", "政务"],
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 8 fontSize: 50,
}, },
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
@ -1154,7 +1166,7 @@
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
fontSize: 8, fontSize: 50,
color: 'rgba(255,255,255,.7)', color: 'rgba(255,255,255,.7)',
} }
}, },

Write Preview
Loading…
Cancel
Save