13451294168 1 year ago
parent 4b76edade5
commit d01e7c05dc

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

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

Loading…
Cancel
Save