|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
<title>中国古文人数据展示</title>
|
|
|
<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">
|
|
|
<div class="main_top">
|
|
|
<div class="main_top_left">
|
|
|
<div class="main_top_left_top">
|
|
|
<img src="./images/main_top_left.png" />
|
|
|
<audio src="./music/周杰伦 - 青花瓷.mp3" loop="loop" autoplay="true" controls="controls"></audio>
|
|
|
<div class="main_top_left_top_title">文人-朝代</div>
|
|
|
<div class="main_top_left_top_con">
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="main_top_left_c_l_n main_top_left_c_l_n1" id="1">0</span>
|
|
|
<p>清代</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="main_top_left_c_l_n main_top_left_c_l_n2" id="2">0</span>
|
|
|
<p>唐代</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="main_top_left_c_l_n main_top_left_c_l_n3" id="3">0</span>
|
|
|
<p>宋代</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_left">
|
|
|
<div class="main_top_left_t_c_l_left">
|
|
|
<span class="main_top_left_c_l_n main_top_left_c_l_n4" id="4">0</span>
|
|
|
<p>金朝</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_t_c_l_right">
|
|
|
<span class="main_top_left_c_l_n main_top_left_c_l_n5" id="5">0</span>
|
|
|
<p>隋代</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_right main_top_left_top_con_right2">
|
|
|
<div class="main_top_left_t_c_r_left">
|
|
|
<span class="main_top_left_c_l_n" id="6">0</span>
|
|
|
<p>南北朝</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_t_c_r_right">
|
|
|
<span class="main_top_left_c_l_n" id="7">0</span>
|
|
|
<p>五代</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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_aa"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_middle">
|
|
|
<div class="main_top_middle_top_title">
|
|
|
<img class="title_bg" src="./images/title_bg.png">
|
|
|
中国文人数据展示
|
|
|
</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_list5">0</p>
|
|
|
</div>
|
|
|
<div class="main_top_middle_num_list">
|
|
|
<img src="./images/center_num.png">
|
|
|
<p class="main_top_middle_num_list4">0</p>
|
|
|
</div>
|
|
|
<div class="main_top_middle_num_list">
|
|
|
<img src="./images/center_num.png">
|
|
|
<p class="main_top_middle_num_list3">0</p>
|
|
|
</div>
|
|
|
<div class="main_top_middle_num_list">
|
|
|
<img src="./images/center_num.png">
|
|
|
<p class="main_top_middle_num_list2">0</p>
|
|
|
</div>
|
|
|
<div class="main_top_middle_num_list">
|
|
|
<img src="./images/center_num.png">
|
|
|
<p class="main_top_middle_num_list1">0</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_middle_bottom">
|
|
|
<div class="main_top_middle_bottom_echarts">
|
|
|
<img src="./images/main_top_bottom.png">
|
|
|
<div class="main_top_echarts_con">
|
|
|
<div class="main_top_echarts_con_title">文章风格</div>
|
|
|
<div id="threeTasksId" class="main_top_echarts_pie"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
|
|
|
<img src="./images/main_top_bottom.png">
|
|
|
<div class="main_top_echarts_con">
|
|
|
<div class="main_top_echarts_con_title">类型</div>
|
|
|
<div id="publicityId" class="main_top_echarts_pie"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_left main_top_right">
|
|
|
<div class="main_top_left_top">
|
|
|
<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">
|
|
|
<span class="daysData" id="8">0</span>
|
|
|
<p>元代</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_right">
|
|
|
<span class="weekData" id="9">0</span>
|
|
|
<p>明代</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="monthData" id="10">0</span>
|
|
|
<p>魏晋</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="someThing" id="11">0</span>
|
|
|
<p>两汉</p>
|
|
|
</div>
|
|
|
<div class="main_top_left_top_con_list">
|
|
|
<span class="policyData" id="12">0</span>
|
|
|
<p>先秦</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_top_left_top main_top_left_bottom">
|
|
|
<img src="./images/poem.jpg" />
|
|
|
<div class="main_top_left_top_title"></div>
|
|
|
<div id="questionId" class="main_top_left_top_con_mas">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_bottom">
|
|
|
<div class="main_bottom_top">
|
|
|
<div class="main_bottom_top_list">
|
|
|
<img src="./images/main_bottopm_top1.png">
|
|
|
<div class="main_bottom_t_l_title">经典名句</div>
|
|
|
<div class="main_bottom_t_l_con" style="top: -15px">
|
|
|
<div class="main_bottom_t_l_main">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<div class="main_bottom_t_l_main_list">
|
|
|
<div class="main_bottom_t_list_title main_bottom_t_list_title1" id="p1">
|
|
|
测试1</div>
|
|
|
<div class="main_bottom_t_list_time main_bottom_t_list_time1" id="p2">
|
|
|
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" id="p3">
|
|
|
测试1</div>
|
|
|
<div class="main_bottom_t_list_time main_bottom_t_list_time2" id="p4">
|
|
|
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" id="p5">
|
|
|
测试1</div>
|
|
|
<div class="main_bottom_t_list_time main_bottom_t_list_time3" id="p6">
|
|
|
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" id="p7">
|
|
|
测试1</div>
|
|
|
<div class="main_bottom_t_list_time main_bottom_t_list_time4" id="p8">
|
|
|
2023/05/20
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- -->
|
|
|
</div>
|
|
|
|
|
|
<div class="main_bottom_bottom">
|
|
|
<div class="main_bottom_b_left">
|
|
|
<img src="./images/main_bottom_bottom.png">
|
|
|
<div class="main_bottom_b_title">诗人的风格占比</div>
|
|
|
<div class="poemname">测试</div>
|
|
|
<div class="search">
|
|
|
文人：
|
|
|
</div>
|
|
|
<input type="search" class="search_con" id="search_content">
|
|
|
<button class="search_but" id="search">搜索</button>
|
|
|
<div id="coverageId" class="main_bottom_b_con"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
|
|
<script src="./js/echarts.min.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>
|
|
|
<script type="text/javascript" src="js/particles.min.js"></script>
|
|
|
<script type="text/javascript" src="js/app.js"></script>
|
|
|
<script src="./js/echarts-wordcloud.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
// 困难点一 ： ajax突然拿不到数据了，只能存储到本地，存之前要转换成文本格式，然后从本地拿，然后再转数组格式，因为从本地存储拿数据后变成了文本数据
|
|
|
//诗人朝代
|
|
|
var message;
|
|
|
//类型
|
|
|
var type;
|
|
|
//类型
|
|
|
var poemtype;
|
|
|
// 总数量
|
|
|
var number;
|
|
|
// 总数量
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/poetrynum",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
success: function (data) {
|
|
|
console.log(data)
|
|
|
data = JSON.stringify(data);
|
|
|
localStorage.setItem("number", data);
|
|
|
},
|
|
|
})
|
|
|
//搜索功能
|
|
|
$("#search").click(function () {
|
|
|
var poetry = document.getElementById("search_content").value;
|
|
|
localStorage.setItem("name", poetry);
|
|
|
// 某个诗人的作诗风格
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/authortypenum",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
data: {
|
|
|
name: poetry,
|
|
|
},
|
|
|
success: function (data) {
|
|
|
// console.log(data);
|
|
|
console.log(data);
|
|
|
data = JSON.stringify(data);
|
|
|
localStorage.setItem("poetry", data);
|
|
|
},
|
|
|
})
|
|
|
// 诗人名句
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/randommingju",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
data: {
|
|
|
name: poetry,
|
|
|
},
|
|
|
success: function (data) {
|
|
|
// console.log(data);
|
|
|
console.log(data);
|
|
|
data = JSON.stringify(data);
|
|
|
localStorage.setItem("poem_poetry", data);
|
|
|
},
|
|
|
})
|
|
|
location.href = "./index.html";
|
|
|
}),
|
|
|
// 诗人-朝代
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/dynastyauthornum",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
success: function (data) {
|
|
|
data = JSON.stringify(data);
|
|
|
localStorage.setItem("data", data);
|
|
|
},
|
|
|
})
|
|
|
message = localStorage.getItem("data");
|
|
|
message = JSON.parse(message);
|
|
|
console.log(message.message[0].Dynasty);
|
|
|
|
|
|
// 诗词类型的数量
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/typepeotrynum",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
success: function (data) {
|
|
|
console.log(data);
|
|
|
data = JSON.stringify(data);
|
|
|
|
|
|
localStorage.setItem("type", data);
|
|
|
},
|
|
|
})
|
|
|
type = localStorage.getItem("type");
|
|
|
type = JSON.parse(type);
|
|
|
console.log(type);
|
|
|
// 诗词曲文言文的数量
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: true,
|
|
|
url: "http://localhost:8880/formatnum",
|
|
|
dataType: "JSON",
|
|
|
ContentType: "application/json;charset=utf-8",
|
|
|
success: function (data) {
|
|
|
data = JSON.stringify(data);
|
|
|
console.log(data);
|
|
|
localStorage.setItem("poemtype", data);
|
|
|
},
|
|
|
})
|
|
|
poemtype = localStorage.getItem("poemtype");
|
|
|
poemtype = JSON.parse(poemtype);
|
|
|
console.log(poemtype);
|
|
|
$(function () {
|
|
|
function apiFn() {
|
|
|
this.hostname = ""
|
|
|
}
|
|
|
apiFn.prototype = {
|
|
|
Init: function () {
|
|
|
this.baseInfo()
|
|
|
// 右下角词云
|
|
|
// this.questionFn()
|
|
|
this.publicityFn()
|
|
|
this.threeTasksFn()
|
|
|
this.coverageFn()
|
|
|
setInterval(function () {
|
|
|
numInit()
|
|
|
}, 6000)
|
|
|
},
|
|
|
// 各朝代诗人的数量
|
|
|
baseInfo: function () {
|
|
|
var baseChart = echarts.init(document.getElementById('baseId'));
|
|
|
var charts = [
|
|
|
{ name: message.message[0].Dynasty, num: message.message[0].Count },
|
|
|
{ name: message.message[1].Dynasty, num: message.message[1].Count },
|
|
|
{ name: message.message[2].Dynasty, num: message.message[2].Count },
|
|
|
{ name: message.message[3].Dynasty, num: message.message[3].Count },
|
|
|
{ name: message.message[4].Dynasty, num: message.message[4].Count },
|
|
|
{ name: message.message[5].Dynasty, num: message.message[5].Count },
|
|
|
{ name: message.message[6].Dynasty, num: message.message[6].Count },
|
|
|
{ name: message.message[7].Dynasty, num: message.message[7].Count },
|
|
|
{ name: message.message[8].Dynasty, num: message.message[8].Count },
|
|
|
{ name: message.message[9].Dynasty, num: message.message[9].Count },
|
|
|
{ name: message.message[10].Dynasty, num: message.message[10].Count },
|
|
|
{ name: message.message[11].Dynasty, num: message.message[11].Count },
|
|
|
];
|
|
|
// 各朝代诗人数量
|
|
|
$("#1").html(message.message[0].Count);
|
|
|
$("#2").html(message.message[1].Count);
|
|
|
$("#3").html(message.message[2].Count);
|
|
|
$("#4").html(message.message[3].Count);
|
|
|
$("#5").html(message.message[4].Count);
|
|
|
$("#6").html(message.message[5].Count);
|
|
|
$("#7").html(message.message[6].Count);
|
|
|
$("#8").html(message.message[7].Count);
|
|
|
$("#9").html(message.message[8].Count);
|
|
|
$("#10").html(message.message[9].Count);
|
|
|
$("#11").html(message.message[10].Count);
|
|
|
$("#12").html(message.message[11].Count);
|
|
|
// 名句
|
|
|
var poem_poetry = JSON.parse(localStorage.getItem("poem_poetry"));
|
|
|
console.log(poem_poetry)
|
|
|
$("#p1").html(poem_poetry.message[0].Mingju);
|
|
|
$("#p2").html(poem_poetry.message[0].Author);
|
|
|
$("#p3").html(poem_poetry.message[1].Mingju);
|
|
|
$("#p4").html(poem_poetry.message[1].Author);
|
|
|
$("#p5").html(poem_poetry.message[2].Mingju);
|
|
|
$("#p6").html(poem_poetry.message[2].Author);
|
|
|
$("#p7").html(poem_poetry.message[3].Mingju);
|
|
|
$("#p8").html(poem_poetry.message[3].Author);
|
|
|
console.log(charts[0].name);
|
|
|
var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']
|
|
|
|
|
|
let lineY = []
|
|
|
for (var i = 0; i < charts.length; i++) {
|
|
|
var x = i
|
|
|
if (x > color.length - 1) {
|
|
|
x = color.length - 1
|
|
|
}
|
|
|
var data = {
|
|
|
name: charts[i].name,
|
|
|
color: color[x] + ')',
|
|
|
value: charts[i].num,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
offset: 0,
|
|
|
color: 'black'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: 'black'
|
|
|
}], false),
|
|
|
barBorderRadius: 10
|
|
|
},
|
|
|
emphasis: {
|
|
|
shadowBlur: 15,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
lineY.push(data)
|
|
|
}
|
|
|
var option = {
|
|
|
title: {
|
|
|
show: false
|
|
|
},
|
|
|
grid: {
|
|
|
// borderWidth: 1,
|
|
|
top: '10%',
|
|
|
left: '30%',
|
|
|
right: '10%',
|
|
|
bottom: '3%'
|
|
|
},
|
|
|
color: color,
|
|
|
yAxis: [{
|
|
|
type: 'category',
|
|
|
inverse: true,
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
inside: false
|
|
|
},
|
|
|
data: charts.name
|
|
|
}, {
|
|
|
type: 'category',
|
|
|
inverse: true,
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
inside: false,
|
|
|
textStyle: {
|
|
|
color: 'black',
|
|
|
fontSize: '50',
|
|
|
},
|
|
|
formatter: function (val, index) {
|
|
|
return `${charts[index].num}`
|
|
|
}
|
|
|
},
|
|
|
splitArea: {
|
|
|
show: false
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
data: charts
|
|
|
}],
|
|
|
xAxis: {
|
|
|
// type: 'value',
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
name: '',
|
|
|
type: 'bar',
|
|
|
zlevel: 2,
|
|
|
barWidth: '5px',
|
|
|
data: lineY,
|
|
|
animationDuration: 1500,
|
|
|
label: {
|
|
|
normal: {
|
|
|
color: 'black',
|
|
|
show: true,
|
|
|
position: [-160, -30],
|
|
|
textStyle: {
|
|
|
fontSize: 50
|
|
|
},
|
|
|
formatter: function (a, b) {
|
|
|
return a.name
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
animationEasing: 'cubicOut'
|
|
|
}
|
|
|
baseChart.setOption(option)
|
|
|
setInterval(function () {
|
|
|
baseChart.clear()
|
|
|
baseChart.setOption(option)
|
|
|
}, 40000)
|
|
|
},
|
|
|
// 最右下角的词云图
|
|
|
questionFn: function () {
|
|
|
var numArr = [
|
|
|
{ name: '测试11', value: 3000 },
|
|
|
{ name: '测试22', value: 5000 },
|
|
|
{ name: '测试33', value: 4000 },
|
|
|
{ name: '测试44', value: 3000 },
|
|
|
{ name: '测试55', value: 3000 },
|
|
|
{ name: '测试66', value: 8000 },
|
|
|
]
|
|
|
var questionChart = echarts.init(document.getElementById('questionId'));
|
|
|
var data = [
|
|
|
{ name: 'Farrah', value: 366 },
|
|
|
{ name: "汽车", value: 900 },
|
|
|
{ name: "视频", value: 606 },
|
|
|
];
|
|
|
|
|
|
var option = {
|
|
|
series: [{
|
|
|
type: 'wordCloud',
|
|
|
shape: 'circle',
|
|
|
keepAspect: false,
|
|
|
left: 'center',
|
|
|
top: 'center',
|
|
|
width: '100%',
|
|
|
height: '90%',
|
|
|
sizeRange: [20, 80], // 调整字体大小范围
|
|
|
rotationRange: [-90, 90],
|
|
|
rotationStep: 45,
|
|
|
gridSize: 8,
|
|
|
drawOutOfBound: false,
|
|
|
textStyle: {
|
|
|
fontFamily: 'sans-serif',
|
|
|
fontWeight: 'bold',
|
|
|
},
|
|
|
data: data
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
questionChart.setOption(option);
|
|
|
},
|
|
|
// 右上角饼状图
|
|
|
publicityFn: function () {
|
|
|
var dataArr = [
|
|
|
{ name: poemtype.message[0].Format, value: poemtype.message[0].Count },
|
|
|
{ name: poemtype.message[1].Format, value: poemtype.message[1].Count },
|
|
|
{ name: poemtype.message[2].Format, value: poemtype.message[2].Count },
|
|
|
{ name: poemtype.message[3].Format, value: poemtype.message[3].Count },
|
|
|
];
|
|
|
var publicitChart = echarts.init(document.getElementById('publicityId'));
|
|
|
var data = dataArr
|
|
|
var option = {
|
|
|
color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
itemWidth: 50,// 标志图形的长度
|
|
|
itemHeight: 50,// 标志图形的宽度
|
|
|
orient: 'vertical',
|
|
|
// left: 'right',
|
|
|
top: '1%',
|
|
|
bottom: '50%',
|
|
|
x: '45%',
|
|
|
textStyle: {
|
|
|
color: 'black',
|
|
|
fontSize: 50,
|
|
|
|
|
|
},
|
|
|
data: data,
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: 'black',
|
|
|
fontSize: 50,
|
|
|
},
|
|
|
series: [
|
|
|
// 主要展示层的
|
|
|
{
|
|
|
radius: ['70%', '90%'],
|
|
|
center: ['25%', '50%'],
|
|
|
type: 'pie',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'inner',
|
|
|
show: false,
|
|
|
// 修改nabel里面的大小
|
|
|
}
|
|
|
},
|
|
|
name: "文章类型",
|
|
|
data: data,
|
|
|
},
|
|
|
// 边框的设置
|
|
|
{
|
|
|
radius: ['50%', '55%'],
|
|
|
center: ['25%', '50%'],
|
|
|
type: 'pie',
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
show: false
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
animation: false,
|
|
|
tooltip: {
|
|
|
show: false
|
|
|
},
|
|
|
data: [{
|
|
|
value: 1,
|
|
|
itemStyle: {
|
|
|
color: "rgba(250,250,250,0.3)",
|
|
|
},
|
|
|
normal:{
|
|
|
textStyle:{
|
|
|
fontSize :1000,
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
publicitChart.setOption(option)
|
|
|
setInterval(function () {
|
|
|
publicitChart.clear()
|
|
|
publicitChart.setOption(option)
|
|
|
}, 60000)
|
|
|
},
|
|
|
// 诗词-类型
|
|
|
threeTasksFn: function () {
|
|
|
// 从本地存储中获取字符串并转换为数字
|
|
|
var number = JSON.parse(localStorage.getItem("number"));
|
|
|
console.log(number);
|
|
|
number = parseFloat(number.message.Count);
|
|
|
|
|
|
// 将数字转换为字符串
|
|
|
var names = number.toString();
|
|
|
// 根据字符串长度进行补全
|
|
|
if (6 - names.length > 0) {
|
|
|
for (var 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.charAt(j));
|
|
|
}
|
|
|
var dataArr = [
|
|
|
{ name: type.message[0].Type, value: type.message[0].Count },
|
|
|
{ name: type.message[1].Type, value: type.message[1].Count },
|
|
|
{ name: type.message[2].Type, value: type.message[2].Count },
|
|
|
{ name: type.message[3].Type, value: type.message[3].Count },
|
|
|
{ name: type.message[4].Type, value: type.message[4].Count },
|
|
|
{ name: type.message[5].Type, value: type.message[5].Count },
|
|
|
];
|
|
|
var threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
|
|
|
var data = dataArr
|
|
|
var option = {
|
|
|
color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133', '#F7E270'],
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
},
|
|
|
legend: {
|
|
|
itemWidth: 50,// 标志图形的长度
|
|
|
itemHeight: 50,// 标志图形的宽度
|
|
|
orient: 'vertical',
|
|
|
// left: 'right',
|
|
|
top: '10%',
|
|
|
bottom: '50%',
|
|
|
x: '50%',
|
|
|
textStyle: {
|
|
|
color: 'black',
|
|
|
fontSize: 50,
|
|
|
},
|
|
|
data: data
|
|
|
},
|
|
|
series:
|
|
|
{
|
|
|
name: '三务公开数量',
|
|
|
type: 'pie',
|
|
|
animationDuration: 1500,
|
|
|
radius: ['70%', '90%'],
|
|
|
center: ['25%', '50%'],
|
|
|
roseType: 'radius',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'inner',
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
data: data
|
|
|
}
|
|
|
};
|
|
|
threeTasksChart.setOption(option)
|
|
|
setInterval(function () {
|
|
|
threeTasksChart.clear()
|
|
|
threeTasksChart.setOption(option)
|
|
|
}, 4000)
|
|
|
},
|
|
|
// 诗人风格图
|
|
|
coverageFn: function () {
|
|
|
var poetry_type = localStorage.getItem("poetry");
|
|
|
poetry_type = JSON.parse(poetry_type);
|
|
|
poetry_name = localStorage.getItem("name");
|
|
|
$(".poemname").html(poetry_name);
|
|
|
console.log(poetry_type.message[0].Count);
|
|
|
var resArr = [
|
|
|
{ name: poetry_type.message[0].Type, value: poetry_type.message[0].Count * 65 },
|
|
|
{ name: poetry_type.message[1].Type, value: poetry_type.message[1].Count * 65 },
|
|
|
{ name: poetry_type.message[2].Type, value: poetry_type.message[2].Count * 65 },
|
|
|
{ name: poetry_type.message[3].Type, value: poetry_type.message[3].Count * 65 },
|
|
|
{ name: poetry_type.message[4].Type, value: poetry_type.message[4].Count * 65 },
|
|
|
{ name: poetry_type.message[5].Type, value: poetry_type.message[5].Count * 65 },
|
|
|
]
|
|
|
var indicatorArr = []
|
|
|
var numArr = []
|
|
|
for (var i = 0; i < resArr.length; i++) {
|
|
|
indicatorArr.push({ name: resArr[i].name, max: 900 })
|
|
|
numArr.push(resArr[i].value)
|
|
|
}
|
|
|
var data = [
|
|
|
{
|
|
|
value: numArr,
|
|
|
}
|
|
|
]
|
|
|
var coverageChart = echarts.init(document.getElementById('coverageId'));
|
|
|
var option = {
|
|
|
legend: {
|
|
|
show: true,
|
|
|
icon: "circle",
|
|
|
bottom: 30,
|
|
|
center: 0,
|
|
|
itemWidth: 14,
|
|
|
itemHeight: 14,
|
|
|
itemGap: 21,
|
|
|
orient: "horizontal",
|
|
|
data: ['a', 'b'],
|
|
|
textStyle: {
|
|
|
fontSize: '70%',
|
|
|
color: 'black',
|
|
|
},
|
|
|
},
|
|
|
radar: {
|
|
|
// shape: 'circle',
|
|
|
radius: '80%',
|
|
|
|
|
|
triggerEvent: true,
|
|
|
// type: 'default',
|
|
|
name: {
|
|
|
textStyle: {
|
|
|
color: 'black',
|
|
|
fontSize: '50',
|
|
|
// borderRadius: 3,
|
|
|
padding: [10, 10]
|
|
|
}
|
|
|
},
|
|
|
|
|
|
nameGap: '2',
|
|
|
indicator: indicatorArr,
|
|
|
splitArea: {
|
|
|
areaStyle: {
|
|
|
color: 'rgba(255,255,255,0)'
|
|
|
}
|
|
|
},
|
|
|
axisLine: { //指向外圈文本的分隔线样式
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
color: 'rgba(0,0,0,.6)'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
},
|
|
|
series: [{
|
|
|
name: '诗人能力图',
|
|
|
type: 'radar',
|
|
|
animationDuration: 2000,
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
opacity: 1,
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
color: '#2EEFAD'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
symbolSize: 0,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
// color: 'rgba(252,211,3, 1)',
|
|
|
width: 0
|
|
|
}
|
|
|
},
|
|
|
data: data
|
|
|
}]
|
|
|
};
|
|
|
coverageChart.setOption(option)
|
|
|
setInterval(function () {
|
|
|
coverageChart.clear()
|
|
|
coverageChart.setOption(option)
|
|
|
}, 10000)
|
|
|
},
|
|
|
}
|
|
|
var start = new apiFn()
|
|
|
start.Init()
|
|
|
})
|
|
|
})
|
|
|
</script> |
