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