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;

354
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,13 +11,14 @@
<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">
<div class="main_top"> <div class="main_top">
<div class="main_top_left"> <div class="main_top_left">
<div class="main_top_left_top"> <div class="main_top_left_top">
<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 class="main_top_left_top_con"> <div class="main_top_left_top_con">
<div class="main_top_left_top_con_list"> <div class="main_top_left_top_con_list">
@ -56,9 +56,9 @@
</div> </div>
</div> </div>
<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">
@ -70,10 +70,10 @@
</div> </div>
<div class="main_top_middle_num_title">诗词总量：</div> <div class="main_top_middle_num_title">诗词总量：</div>
<div class="main_top_middle_num"> <div class="main_top_middle_num">
<!-- <div class="main_top_middle_num_list">--> <!-- <div class="main_top_middle_num_list">-->
<!-- <img src="./images/center_num.png">--> <!-- <img src="./images/center_num.png">-->
<!-- <p class="main_top_middle_num_list6">0</p>--> <!-- <p class="main_top_middle_num_list6">0</p>-->
<!-- </div>--> <!-- </div>-->
<div class="main_top_middle_num_list"> <div class="main_top_middle_num_list">
<img src="./images/center_num.png"> <img src="./images/center_num.png">
<p class="main_top_middle_num_list5">0</p> <p class="main_top_middle_num_list5">0</p>
@ -114,7 +114,7 @@
</div> </div>
<div class="main_top_left main_top_right"> <div class="main_top_left main_top_right">
<div class="main_top_left_top"> <div class="main_top_left_top">
<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 class="main_top_left_top_con"> <div class="main_top_left_top_con">
<div class="main_top_left_top_con_left"> <div class="main_top_left_top_con_left">
@ -140,9 +140,9 @@
</div> </div>
</div> </div>
<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>
@ -275,12 +283,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./js/echarts.js"></script> <script src="./js/echarts.js"></script>
<script type="text/javascript" src="js/dataScoll.js"></script> <script type="text/javascript" src="js/dataScoll.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script> <script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script> <script type="text/javascript" src="js/jcarousellite.js"></script>
@ -288,12 +296,12 @@
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
<script> <script>
$(function() { $(function () {
function apiFn() { function apiFn() {
this.hostname = "" this.hostname = ""
} }
apiFn.prototype = { apiFn.prototype = {
Init:function() { Init: function () {
this.findCount() this.findCount()
this.otherDataFn() this.otherDataFn()
this.baseInfo() this.baseInfo()
@ -307,15 +315,15 @@
this.yearsNumFn() this.yearsNumFn()
this.contentFn() this.contentFn()
this.publicNumFn() this.publicNumFn()
setInterval(function() { setInterval(function () {
numInit() numInit()
},6000) }, 6000)
}, },
findCount:function() { findCount: function () {
}, },
// 其他数据展示 // 其他数据展示
otherDataFn:function() { otherDataFn: function () {
$(".daysData").addClass("counter-value").text("304") $(".daysData").addClass("counter-value").text("304")
$(".weekData").addClass("counter-value").text("2044") $(".weekData").addClass("counter-value").text("2044")
$(".monthData").addClass("counter-value").text("909") $(".monthData").addClass("counter-value").text("909")
@ -323,19 +331,19 @@
$(".policyData").addClass("counter-value").text("200") $(".policyData").addClass("counter-value").text("200")
}, },
// 基础信息 // 基础信息
baseInfo:function() { baseInfo: function () {
var baseChart = echarts.init(document.getElementById('baseId')); var baseChart = echarts.init(document.getElementById('baseId'));
var charts = [ var charts = [
{name: "测试1", num: 200}, { name: "测试1", num: 200 },
{name: "测试2", num: 300}, { name: "测试2", num: 300 },
{name: "测试3", num: 400}, { name: "测试3", num: 400 },
{name: "测试4", num: 500}, { name: "测试4", num: 500 },
{name: "测试5", num: 300}, { name: "测试5", num: 300 },
{name: "测试1", num: 200}, { name: "测试1", num: 200 },
{name: "测试2", num: 300}, { name: "测试2", num: 300 },
{name: "测试3", num: 400}, { name: "测试3", num: 400 },
{name: "测试4", num: 500}, { name: "测试4", num: 500 },
{name: "测试5", num: 300}, { name: "测试5", num: 300 },
] ]
var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249'] var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']
@ -369,7 +377,7 @@
} }
lineY.push(data) lineY.push(data)
} }
var option= { var option = {
title: { title: {
show: false show: false
}, },
@ -409,9 +417,9 @@
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
@ -462,20 +470,20 @@
animationEasing: 'cubicOut' animationEasing: 'cubicOut'
} }
baseChart.setOption(option) baseChart.setOption(option)
setInterval(function() { setInterval(function () {
baseChart.clear() baseChart.clear()
baseChart.setOption(option) baseChart.setOption(option)
},40000) }, 40000)
}, },
// 问题反馈类型占比 // 问题反馈类型占比
questionFn:function() { questionFn: function () {
var numArr = [ var numArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
{name: '测试66', value: 800}, { name: '测试66', value: 800 },
] ]
// for(var i = 0; i < data.list.length; i++) { // for(var i = 0; i < data.list.length; i++) {
// numArr.push({name: data.list[i].name,value: data.list[i].num}) // numArr.push({name: data.list[i].name,value: data.list[i].num})
@ -490,18 +498,18 @@
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{a} <br/>{b} : {c} ({d}%)'
}, },
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,33 +517,33 @@
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: {
normal: { normal: {
position: 'inner', position: 'inner',
show : false show: false
} }
} }
} }
] ]
}; };
questionChart.setOption(option) questionChart.setOption(option)
setInterval(function() { setInterval(function () {
questionChart.clear() questionChart.clear()
questionChart.setOption(option) questionChart.setOption(option)
},8000) }, 8000)
}, },
// 党务公开 // 党务公开
publicityFn:function() { publicityFn: function () {
var dataArr = [ var dataArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
{name: '测试66', value: 800}, { name: '测试66', value: 800 },
] ]
// for(var i = 0; i < res.list.length; i++) { // for(var i = 0; i < res.list.length; i++) {
// dataArr.push({name: res.list[i].name, value: res.list[i].num}) // dataArr.push({name: res.list[i].name, value: res.list[i].num})
@ -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: [
// 主要展示层的 // 主要展示层的
{ {
@ -573,7 +586,7 @@
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show : false show: false
} }
}, },
name: "XX公开数量", name: "XX公开数量",
@ -614,44 +627,44 @@
] ]
}; };
publicitChart.setOption(option) publicitChart.setOption(option)
setInterval(function() { setInterval(function () {
publicitChart.clear() publicitChart.clear()
publicitChart.setOption(option) publicitChart.setOption(option)
},6000) }, 60000)
}, },
// 三务公开数量 // 三务公开数量
threeTasksFn:function() { threeTasksFn: function () {
let names = "666666"; let names = "666666";
if(6 - names.length > 0) { if (6 - names.length > 0) {
for(g = 0; g < 6 - names.length; g++) { for (g = 0; g < 6 - names.length; g++) {
$(".main_top_middle_num_list"+(6 - g)).text('0') $(".main_top_middle_num_list" + (6 - g)).text('0')
} }
} }
for(var j = 0; j < names.length; j++) { for (var j = 0; j < names.length; j++) {
$(".main_top_middle_num_list"+(names.length - j)).text(names.substr(j,1)) $(".main_top_middle_num_list" + (names.length - j)).text(names.substr(j, 1))
} }
var dataArr = [ var dataArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
{name: '测试66', value: 800}, { name: '测试66', value: 800 },
] ]
for(var i = 1; i < dataArr.length; i++) { for (var i = 1; i < dataArr.length; i++) {
$(".main_top_left_c_l_n"+i).addClass("counter-value").text(dataArr[i].value) $(".main_top_left_c_l_n" + i).addClass("counter-value").text(dataArr[i].value)
} }
var threeTasksChart = echarts.init(document.getElementById('threeTasksId')); var threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
var data = dataArr var data = dataArr
var option = { var option = {
color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133','#F7E270'], color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133', '#F7E270'],
tooltip : { tooltip: {
trigger: 'item', trigger: 'item',
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,53 +672,52 @@
x: '50%', x: '50%',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 8, fontSize: 50,
}, },
data: data data: data
}, },
series : series:
{ {
name:'三务公开数量', name: '三务公开数量',
type:'pie', type: 'pie',
animationDuration: 1500, animationDuration: 1500,
radius: ['70%', '90%'], radius: ['70%', '90%'],
center: ['25%', '50%'], center: ['25%', '50%'],
roseType : 'radius', roseType: 'radius',
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show : false show: false
} }
}, },
data:data data: data
} }
}; };
threeTasksChart.setOption(option) threeTasksChart.setOption(option)
setInterval(function() { setInterval(function () {
threeTasksChart.clear() threeTasksChart.clear()
threeTasksChart.setOption(option) threeTasksChart.setOption(option)
},4000) }, 4000)
}, },
// 各部门苏木镇嘎查村公开占比 // 各部门苏木镇嘎查村公开占比
departmentFn:function() { departmentFn: function () {
var dataArr = [ var dataArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
] ]
// 中间滚动数据展示 // 中间滚动数据展示
for(var j = 0; j < dataArr.length; j++) { for (var j = 0; j < dataArr.length; j++) {
$(".main_list_title_num"+(j+1)).addClass("counter-value").text(dataArr[j].value) $(".main_list_title_num" + (j + 1)).addClass("counter-value").text(dataArr[j].value)
$(".main_list_title"+(j+1)).text(dataArr[j].name) $(".main_list_title" + (j + 1)).text(dataArr[j].name)
} }
var departmentChart = echarts.init(document.getElementById('departmentId')); var departmentChart = echarts.init(document.getElementById('departmentId'));
var data = dataArr var data = dataArr
var option = { var option = {
color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'], color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
tooltip : { tooltip: {
trigger: 'item', trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
}, },
@ -719,7 +731,7 @@
x: '5%', x: '5%',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 8, fontSize: 50,
}, },
data: data, data: data,
@ -742,14 +754,14 @@
}, },
label: { label: {
normal: { normal: {
formatter: (params)=>{ formatter: (params) => {
return params.name return params.name
}, },
borderWidth: 0, borderWidth: 0,
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',
} }
@ -778,45 +790,45 @@
] ]
}; };
departmentChart.setOption(option) departmentChart.setOption(option)
setInterval(function() { setInterval(function () {
departmentChart.clear() departmentChart.clear()
departmentChart.setOption(option) departmentChart.setOption(option)
},12000) }, 12000)
}, },
// 办事指南 // 办事指南
guideFn:function() { guideFn: function () {
$(".main_bottom_t_l_main").jCarouselLite({ $(".main_bottom_t_l_main").jCarouselLite({
vertical: true, vertical: true,
hoverPause:true, hoverPause: true,
visible: 4, visible: 4,
auto: 1000, auto: 1000,
speed: 500 speed: 500
}); });
}, },
// 政策解读 // 政策解读
policyFn:function() { policyFn: function () {
$(".main_bottom_t_l_main2").jCarouselLite({ $(".main_bottom_t_l_main2").jCarouselLite({
vertical: true, vertical: true,
hoverPause:true, hoverPause: true,
visible: 4, visible: 4,
auto: 1000, auto: 1000,
speed: 500 speed: 500
}); });
}, },
// 主要关注内容区域占比 // 主要关注内容区域占比
coverageFn:function() { coverageFn: function () {
var resArr = [ var resArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
{name: '测试66', value: 800}, { name: '测试66', value: 800 },
] ]
var indicatorArr = [] var indicatorArr = []
var numArr = [] var numArr = []
for(var i = 0; i < resArr.length; i++) { for (var i = 0; i < resArr.length; i++) {
indicatorArr.push({name: resArr[i].name,max: 900}) indicatorArr.push({ name: resArr[i].name, max: 900 })
numArr.push(resArr[i].value) numArr.push(resArr[i].value)
} }
var data = [ var data = [
@ -903,20 +915,20 @@
}] }]
}; };
coverageChart.setOption(option) coverageChart.setOption(option)
setInterval(function() { setInterval(function () {
coverageChart.clear() coverageChart.clear()
coverageChart.setOption(option) coverageChart.setOption(option)
},10000) }, 10000)
}, },
// 本年公开数量 // 本年公开数量
yearsNumFn:function() { yearsNumFn: function () {
var resArr = [ var resArr = [
{name: '测试11', value: 30}, { name: '测试11', value: 30 },
{name: '测试22', value: 50}, { name: '测试22', value: 50 },
{name: '测试33', value: 40}, { name: '测试33', value: 40 },
{name: '测试44', value: 35}, { name: '测试44', value: 35 },
{name: '测试55', value: 36}, { name: '测试55', value: 36 },
{name: '测试66', value: 80}, { name: '测试66', value: 80 },
] ]
var nameArr = [] var nameArr = []
var caiArr = [] var caiArr = []
@ -924,7 +936,7 @@
var danArr = [] var danArr = []
var junArr = [] var junArr = []
var zhenArr = [] var zhenArr = []
for(var i = 0; i < resArr.length; i++) { for (var i = 0; i < resArr.length; i++) {
nameArr.push(resArr[i].name) nameArr.push(resArr[i].name)
caiArr.push(resArr[i].value) caiArr.push(resArr[i].value)
cunArr.push(resArr[i].value) cunArr.push(resArr[i].value)
@ -933,15 +945,15 @@
zhenArr.push(resArr[i].value) zhenArr.push(resArr[i].value)
} }
var yearsNumChart = echarts.init(document.getElementById('yearsNumId')); var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));
var spNum = 5,_max=100; var spNum = 5, _max = 100;
var y_data = nameArr.reverse(); var y_data = nameArr.reverse();
var _datamax = [100,100,100,100,100,100,100,100,100,100,100,100], var _datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
_data1 = caiArr.reverse(), _data1 = caiArr.reverse(),
_data2 = cunArr.reverse(), _data2 = cunArr.reverse(),
_data3 = danArr.reverse(); _data3 = danArr.reverse();
_data4 = junArr.reverse(); _data4 = junArr.reverse();
_data5 = zhenArr.reverse(); _data5 = zhenArr.reverse();
var fomatter_fn = function(v) { var fomatter_fn = function (v) {
return (v.value / _max * 100).toFixed(0) return (v.value / _max * 100).toFixed(0)
} }
var _label = { var _label = {
@ -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)'
}, },
@ -980,7 +992,7 @@
max: _max, max: _max,
axisLabel: { axisLabel: {
show: false, show: false,
formatter: function(v) { formatter: function (v) {
var _v = (v / _max * 100).toFixed(0); var _v = (v / _max * 100).toFixed(0);
return _v == 0 ? _v : _v + '%'; return _v == 0 ? _v : _v + '%';
} }
@ -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)'
}, },
@ -1102,18 +1114,18 @@
}] }]
}; };
yearsNumChart.setOption(option) yearsNumChart.setOption(option)
setInterval(function() { setInterval(function () {
yearsNumChart.clear() yearsNumChart.clear()
yearsNumChart.setOption(option) yearsNumChart.setOption(option)
},120000) }, 120000)
}, },
// 关注内容区域占比 // 关注内容区域占比
contentFn:function() { contentFn: function () {
var resArr = [ var resArr = [
{name: '测试11', value: 30}, { name: '测试11', value: 30 },
{name: '测试22', value: 50}, { name: '测试22', value: 50 },
{name: '测试55', value: 33}, { name: '测试55', value: 33 },
{name: '测试66', value: 80}, { name: '测试66', value: 80 },
] ]
var nameArr = [] var nameArr = []
var caiArr = [] var caiArr = []
@ -1121,7 +1133,7 @@
var danArr = [] var danArr = []
var junArr = [] var junArr = []
var zhenArr = [] var zhenArr = []
for(var i = 0; i < resArr.length; i++) { for (var i = 0; i < resArr.length; i++) {
nameArr.push(resArr[i].name) nameArr.push(resArr[i].name)
caiArr.push(resArr[i].value) caiArr.push(resArr[i].value)
cunArr.push(resArr[i].value) cunArr.push(resArr[i].value)
@ -1138,10 +1150,10 @@
legend: { legend: {
x: '35%', x: '35%',
y: '0%', y: '0%',
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)',
} }
}, },
@ -1278,25 +1290,25 @@
] ]
}; };
contentChart.setOption(option) contentChart.setOption(option)
setInterval(function() { setInterval(function () {
contentChart.clear() contentChart.clear()
contentChart.setOption(option) contentChart.setOption(option)
},90000) }, 90000)
}, },
// 巡察 // 巡察
publicNumFn:function() { publicNumFn: function () {
var resArr = [ var resArr = [
{name: '测试11', value: 300}, { name: '测试11', value: 300 },
{name: '测试22', value: 500}, { name: '测试22', value: 500 },
{name: '测试33', value: 400}, { name: '测试33', value: 400 },
{name: '测试44', value: 350}, { name: '测试44', value: 350 },
{name: '测试55', value: 363}, { name: '测试55', value: 363 },
{name: '测试66', value: 800}, { name: '测试66', value: 800 },
] ]
var xunArr = [] var xunArr = []
var jingArr = [] var jingArr = []
var dateArr = [] var dateArr = []
for(var i = 0; i < resArr.length; i++) { for (var i = 0; i < resArr.length; i++) {
xunArr.push(resArr[i].value) xunArr.push(resArr[i].value)
jingArr.push(resArr[i].value) jingArr.push(resArr[i].value)
dateArr.push(resArr[i].name) dateArr.push(resArr[i].name)
@ -1429,10 +1441,10 @@
animationEasing: 'cubicOut' animationEasing: 'cubicOut'
}; };
publicNumChart.setOption(option) publicNumChart.setOption(option)
setInterval(function() { setInterval(function () {
publicNumChart.clear() publicNumChart.clear()
publicNumChart.setOption(option) publicNumChart.setOption(option)
},60000) }, 60000)
} }
} }

Write Preview
Loading…
Cancel
Save