parent
e7fb395e66
commit
9416a310d0
@ -0,0 +1,153 @@
|
|||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
height: 10%;
|
||||||
|
top: 0;
|
||||||
|
left: 30%;
|
||||||
|
color: white;
|
||||||
|
font-size: 35px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#tim{
|
||||||
|
position: absolute;
|
||||||
|
height: 5%;
|
||||||
|
top: 5%;
|
||||||
|
right: 2%;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
#c1{
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
height: 30%;
|
||||||
|
top: 10%;
|
||||||
|
left: 30%;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
width: 25%;
|
||||||
|
float: left;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: gold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.txt{
|
||||||
|
width: 25%;
|
||||||
|
float: left;
|
||||||
|
font-family: "幼圆";
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.txt h2{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#c2{
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
height: 60%;
|
||||||
|
top: 40%;
|
||||||
|
left: 30%;
|
||||||
|
/*background: #888888;*/
|
||||||
|
}
|
||||||
|
#l1{
|
||||||
|
position: absolute;
|
||||||
|
width: 30%;
|
||||||
|
height: 45%;
|
||||||
|
top: 10%;
|
||||||
|
left: 0;
|
||||||
|
/*background: #999999;*/
|
||||||
|
}
|
||||||
|
#container{
|
||||||
|
position: absolute;
|
||||||
|
padding-top: 15px;
|
||||||
|
width: 30%;
|
||||||
|
height: 45%;
|
||||||
|
top: 55%;
|
||||||
|
left: 0;
|
||||||
|
/*background: #353;*/
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
#l2{
|
||||||
|
/*position: absolute;*/
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
/*top: 0;*/
|
||||||
|
/*left: 0;*/
|
||||||
|
/*background: #777;*/
|
||||||
|
overflow: hidden;
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
90deg, transparent, #fff 20%, #fff 80%, transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
#l2 div{
|
||||||
|
white-space: nowrap;
|
||||||
|
animation: animate var(--t) linear infinite;
|
||||||
|
}
|
||||||
|
#l2 div:nth-child(2){
|
||||||
|
animation: animate2 var(--t) linear infinite;
|
||||||
|
animation-delay: calc(var(--t)/ -2);
|
||||||
|
}
|
||||||
|
@keyframes animate {
|
||||||
|
from{
|
||||||
|
transform: translate(100%);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform: translate(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes animate2 {
|
||||||
|
from{
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform: translate(-200%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#l2 div span{
|
||||||
|
display: inline-flex;
|
||||||
|
margin: 10px;
|
||||||
|
letter-spacing: .2em;
|
||||||
|
background-color: #504d4d;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#r1{
|
||||||
|
position: absolute;
|
||||||
|
/*padding-bottom: 10px;*/
|
||||||
|
width: 30%;
|
||||||
|
/*height: 45%;*/
|
||||||
|
height: 371px;
|
||||||
|
top: 10%;
|
||||||
|
left: 70%;
|
||||||
|
/*background: #8888;*/
|
||||||
|
}
|
||||||
|
#r2{
|
||||||
|
position: absolute;
|
||||||
|
width: 30%;
|
||||||
|
height: 45%;
|
||||||
|
top: 55%;
|
||||||
|
left: 70%;
|
||||||
|
/*background: #444;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#wordCloudImage{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 250 KiB |
@ -0,0 +1,8 @@
|
|||||||
|
// 发送请求到后端获取平均情感得分
|
||||||
|
fetch('/average_sentiment')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// 获取平均情感得分并更新到前端
|
||||||
|
document.querySelector('#average_sentiment h1').textContent = data.average_sentiment.toFixed(2);
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
// 发送请求到后端获取弹幕总数
|
||||||
|
fetch('/barrage_count')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// 获取行数并更新到前端
|
||||||
|
document.querySelector('#barrage_count h1').textContent = data.row_count;
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var chartDom = document.getElementById('r1');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
|
||||||
|
fetch('/barrage_sentiment')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// 只加载前100条数据
|
||||||
|
data = data.slice(0, 250);
|
||||||
|
|
||||||
|
var scatterData = data.map((item, index) => [index, item.sentiment]);
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '弹幕情感分析',
|
||||||
|
left: 'center',
|
||||||
|
top: 'bottom',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data.map((item, index) => index),
|
||||||
|
axisLabel: {
|
||||||
|
show:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
data: scatterData,
|
||||||
|
type: 'scatter',
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255, 0, 0, 0.8)'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
fetch('/data')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
let clusterData = {};
|
||||||
|
data.forEach(item => {
|
||||||
|
if (!clusterData[item.cluster]) {
|
||||||
|
clusterData[item.cluster] = [];
|
||||||
|
}
|
||||||
|
clusterData[item.cluster].push(item.barrage);
|
||||||
|
});
|
||||||
|
|
||||||
|
let seriesData = [];
|
||||||
|
for (let cluster in clusterData) {
|
||||||
|
seriesData.push({
|
||||||
|
name: `Cluster ${cluster}`,
|
||||||
|
type: 'bar',
|
||||||
|
data: clusterData[cluster].map((item, index) => ({ value: item.length, name: `弹幕 ${index + 1}` }))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let chart = echarts.init(document.getElementById('l1'));
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: '弹幕聚类分析',
|
||||||
|
left:'center',
|
||||||
|
top: 'bottom',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
legend: {
|
||||||
|
data: seriesData.map(item => item.name),
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: seriesData[0].data.map(item => item.name),
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: seriesData
|
||||||
|
};
|
||||||
|
chart.setOption(option);
|
||||||
|
});
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
// 发送请求到后端获取关键字数量
|
||||||
|
fetch('/count_keywords')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// 获取关键字数量并更新到前端
|
||||||
|
document.querySelector('#keyword_count h1').textContent = data.keyword_count;
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,121 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
var myChart = echarts.init(document.getElementById('c2'));
|
||||||
|
myChart.showLoading();
|
||||||
|
$.when(
|
||||||
|
$.get('https://fastly.jsdelivr.net/npm/echarts/map/json/china.json'),
|
||||||
|
$.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
|
||||||
|
$.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
|
||||||
|
).done(function (res) {
|
||||||
|
const chinaJson = res[0];
|
||||||
|
const projection = d3.geoMercator();
|
||||||
|
myChart.hideLoading();
|
||||||
|
echarts.registerMap('China', chinaJson);
|
||||||
|
option = {
|
||||||
|
color: 'white',
|
||||||
|
title: {
|
||||||
|
text: '中国各省得奖情况',
|
||||||
|
sublink: 'http://www.census.gov/popest/data/datasets.html',
|
||||||
|
left: 'center',
|
||||||
|
top:'top',
|
||||||
|
textStyle:{
|
||||||
|
color:'#FFFFFF',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
showDelay: 0,
|
||||||
|
transitionDuration: 0.2
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
left: 'right',
|
||||||
|
min: 0,
|
||||||
|
max: 18,
|
||||||
|
inRange: {
|
||||||
|
color: [
|
||||||
|
'#313695',
|
||||||
|
'#4575b4',
|
||||||
|
'#74add1',
|
||||||
|
'#abd9e9',
|
||||||
|
'#e0f3f8',
|
||||||
|
'#ffffbf',
|
||||||
|
'#fee090',
|
||||||
|
'#fdae61',
|
||||||
|
'#f46d43',
|
||||||
|
'#d73027',
|
||||||
|
'#a50026'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
text: ['高', '低'],
|
||||||
|
calculable: true,
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false,
|
||||||
|
left: 'left',
|
||||||
|
top: 'top',
|
||||||
|
feature: {
|
||||||
|
dataView: {readOnly: false},
|
||||||
|
restore: {},
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '奖牌数',
|
||||||
|
type: 'map',
|
||||||
|
map: 'China',
|
||||||
|
projection: {
|
||||||
|
project: function (point) {
|
||||||
|
return projection(point);
|
||||||
|
},
|
||||||
|
unproject: function (point) {
|
||||||
|
return projection.invert(point);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: '北京', value: 5 },
|
||||||
|
{ name: '天津', value: 3 },
|
||||||
|
{ name: '上海', value: 9 },
|
||||||
|
{ name: '重庆', value: 2 },
|
||||||
|
{ name: '河北', value: 5 },
|
||||||
|
{ name: '河南', value: 3 },
|
||||||
|
{ name: '云南', value: 2 },
|
||||||
|
{ name: '辽宁', value: 7 },
|
||||||
|
{ name: '黑龙江', value: 1 },
|
||||||
|
{ name: '湖南', value: 15 },
|
||||||
|
{ name: '安徽', value: 1 },
|
||||||
|
{ name: '山东', value: 16 },
|
||||||
|
{ name: '新疆', value: 1 },
|
||||||
|
{ name: '江苏', value: 17 },
|
||||||
|
{ name: '浙江', value: 18 },
|
||||||
|
{ name: '江西', value: 3 },
|
||||||
|
{ name: '湖北', value: 6 },
|
||||||
|
{ name: '广西', value: 2 },
|
||||||
|
{ name: '甘肃', value: 0 },
|
||||||
|
{ name: '山西', value: 0 },
|
||||||
|
{ name: '内蒙古', value: 2 },
|
||||||
|
{ name: '陕西', value: 0 },
|
||||||
|
{ name: '吉林', value: 4 },
|
||||||
|
{ name: '福建', value: 4 },
|
||||||
|
{ name: '贵州', value: 3 },
|
||||||
|
{ name: '广东', value: 16 },
|
||||||
|
{ name: '青海', value: 0 },
|
||||||
|
{ name: '西藏', value: 0 },
|
||||||
|
{ name: '四川', value: 18 },
|
||||||
|
{ name: '宁夏', value: 0 },
|
||||||
|
{ name: '海南', value: 2 },
|
||||||
|
{ name: '台湾', value: 7 },
|
||||||
|
{ name: '香港', value: 4 },
|
||||||
|
{ name: '澳门', value: 0 },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
function getTime() {
|
||||||
|
$.ajax({
|
||||||
|
url: "/time",
|
||||||
|
timeout: 10000,
|
||||||
|
success: function (data) {
|
||||||
|
$("#tim").html(data);
|
||||||
|
},
|
||||||
|
error: function (xhr, type, errorThrown) {
|
||||||
|
console.error("Error occurred: ", type, errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setInterval(getTime,100)
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
fetch('/world_comment')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const container = document.getElementById('container');
|
||||||
|
|
||||||
|
data.forEach(entry => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.id = 'l2';
|
||||||
|
div.style.setProperty('--t', entry.time);
|
||||||
|
|
||||||
|
const innerDiv = document.createElement('div');
|
||||||
|
entry.items.forEach(item => {
|
||||||
|
const span = document.createElement('span');
|
||||||
|
span.textContent = item;
|
||||||
|
innerDiv.appendChild(span);
|
||||||
|
});
|
||||||
|
|
||||||
|
div.appendChild(innerDiv.cloneNode(true)); // 克隆一份 innerDiv
|
||||||
|
div.appendChild(innerDiv); // 添加原始 innerDiv
|
||||||
|
container.appendChild(div);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error fetching data:', error));
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
fetch('/wordcloud')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// let wordCloudData = [];
|
||||||
|
// for (let word in data) {
|
||||||
|
// wordCloudData.push({ name: word, value: data[word] });
|
||||||
|
// }
|
||||||
|
|
||||||
|
let chart = echarts.init(document.getElementById('r2'));
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'wordCloud',
|
||||||
|
shape: 'circle',
|
||||||
|
maskImage: new Image(),
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
right: null,
|
||||||
|
bottom: null,
|
||||||
|
sizeRange: [12, 50],
|
||||||
|
rotationRange: [-90, 90],
|
||||||
|
rotationStep: 45,
|
||||||
|
gridSize: 8,
|
||||||
|
drawOutOfBound: false,
|
||||||
|
textStyle: {
|
||||||
|
normal: {
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: function () {
|
||||||
|
return 'rgb(' + [
|
||||||
|
Math.round(Math.random() * 200) + 50,
|
||||||
|
Math.round(Math.random() * 50),
|
||||||
|
Math.round(Math.random() * 50) + 50
|
||||||
|
].join(',') + ')';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载遮罩图像
|
||||||
|
let maskImage = new Image();
|
||||||
|
maskImage.src = 'static/img/log.png';
|
||||||
|
maskImage.onload = function() {
|
||||||
|
option.series[0].maskImage = maskImage;
|
||||||
|
chart.setOption(option);
|
||||||
|
};
|
||||||
|
});
|
||||||
Loading…
Reference in new issue