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