微博热搜echart可视化呈现
文章只做简单记录和放出完整代码,详细内容可以一起讨论
参考网址https://echarts.apache.org/examples/zh/editor.html?c=bar-race-country
本部分内容需要上部分的SpringBoot程序
https://blog.csdn.net/weixin_43596589/article/details/115611383
第一步准备html
在templates下创建weiBoTopReDraw.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../weiBoTopReDraw.css" rel="stylesheet"/>
<script src="../echarts.min.js"></script>
<script src="../jquery-3.6.0.js"></script>
<script src="../weiBoTopReDraw.js"></script>
</head>
<body>
<div class="clock">
<a>当前显示时间:</a>
<span id="time" class="time"></span>
<p></p>
<a>数据更新时间:</a>
<span id="updateTime" class="time"></span>
<p></p>
<a>数据获取时间:</a>
<span id="dataBaseUpdateTime" class="time"></span>
</div>
<div id="container" style="height: 2400px">
</div>
<script>
let dom = document.getElementById("container");
let myChart = echarts.init(dom);
let option;
option = {
grid: {
left: "30%",
right: "20%"
},
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
data: note,
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 49
},
toolbox: {
feature: {
saveAsImage: {
//控制保存按钮显示隐藏
show: false,
}
}
},
series: [{
realtimeSort: true,
name: 'X',
type: 'bar',
data: num,
itemStyle: {
color: function (param) {
return thisTimeColor[param.dataIndex];
}
},
label: {
show: true,
position: 'right',
valueAnimation: true
}
}],
legend: {
show: false
},
animationDuration: 0,
animationDurationUpdate: 300,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
</script>
<script>
//设定每一秒更新时间
setInterval("show()", 1000);
</script>
<script type="text/javascript">
setTimeout(function () {
aJax();
}, 0);
//设定每30秒执行一次ajax
setInterval(function () {
aJax();
run();
}, 30000);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
第二步准备js文件
可以看到用到了三个js
echarts.min.js、
jquery-3.6.0.js、
weiBoTopReDraw.js
其中两个是echart模板中使用的,下载网址
https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js
https://code.jquery.com/jquery-3.6.0.min.js
一起放在static目录下
新建weiBoTopReDraw.js
let app = {};
let data = [];
for (let i = 0; i < 49; ++i) {
data.push(0);
}
//for AJAX接受数据
let note = [];
let num = [];
let databaseUpdateTime;
let upDateTime;
let barColors = ["#00008b", "#f00", "#ffde00", "#002a8f", "#003580", "#ed2939",
"#003897", "#f93", "#bc002d", "#024fa2", "#00247d",
"#ef2b2d", "#dc143c", "#d52b1e", "#e30a17", "#00247d", "#b22234"];
let thisTimeColor = [];
for (let j = 0; j < 49; ++j) {
thisTimeColor.push(barColors[Math.round(Math.random() * 16.0)]);
}
//AJAX接收数据主体
$.ajax({
type: "GET",
url: "../weibo/showAll",
dataType: "json",
async: false,
success: function (result) {
for (let i = 0; i < result.length; i++) {
note.push(result[i].note);
num.push(result[i].num);
}
},
error: function (errorMsg) {
alert("获取后台数据失败!");
}
});
function run() {
let data = option.series[0].data;
let yData = option.yAxis.data;
for (let i = 0; i < 49; i++) {
data[i] = num[i];
yData[i] = note[i];
}
myChart.setOption(option);
}
function getCurrentTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month < 10 ? "0" + month : month;
let day = date.getDate();
day = day < 10 ? "0" + day : day;
let week = date.getDay();
switch (week) {
case 1: {
week = "星期一";
break;
}
case 2: {
week = "星期二";
break;
}
case 3: {
week = "星期三";
break;
}
case 4: {
week = "星期四";
break;
}
case 5: {
week = "星期五";
break;
}
case 6: {
week = "星期六";
break;
}
case 0: {
week = "星期日";
break;
}
}
let hour = date.getHours();
hour = hour < 10 ? "0" + hour : hour;
let minute = date.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
let second = date.getSeconds();
second = second < 10 ? "0" + second : second;
let result = year + "." + month + "." + day + " " + week + " " + hour + ":" + minute + ":" + second;
let noWeekResult = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
return noWeekResult;
}
function show() {
let currentTime = getCurrentTime();
document.getElementById("time").innerHTML = currentTime;
}
function aJax() {
$.ajax({
type: "GET",
url: "../weibo/showAll",
dataType: "json",
async: false,
success: function (result) {
note = [];
num = [];
databaseUpdateTime = result[1].onboardTime;
for (let i = 0; i < result.length; i++) {
note.push(result[i].note);
num.push(result[i].num);
}
//更新更新的时间
upDateTime = getCurrentTime();
document.getElementById("updateTime").innerHTML = upDateTime;
document.getElementById("dataBaseUpdateTime").innerHTML = databaseUpdateTime;
},
error: function (errorMsg) {
alert("获取后台数据失败!");
}
});
}
第三步准备css文件
在static中创建weiBoTopReDraw.css
body {
background: #0f3854;
background: -webkit-radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
.clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
color: #daf6ff;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.clock .time {
letter-spacing: 0.1em;
font-size: 30px;
padding: 20px 0 0;
}
第四步修改controller
修改WeiboController.java
加上以下代码
@RequestMapping("/weiBoTopReDraw")
public String myWeiBoTopReDraw(){
return "weiBoTopReDraw";
}
运行程序
运行springboot程序
访问http://localhost:8081/weibo/weiBoTopReDraw
效果如下