第三部分-微博热搜echart可视化呈现

原创

于 2021-04-13 10:25:55 发布 · 861 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #微博 #spring boot

本文介绍如何使用Echarts库创建一个实时更新的微博热搜条形图。通过在SpringBoot应用中结合HTML、JavaScript（jQuery和Echarts）以及CSS，实现数据的动态展示。代码包括设置HTML页面结构、引入所需JS库、定义Echart配置以及AJAX请求数据。此外，还展示了CSS样式以适应页面背景和字体颜色。最后，调整控制器以响应新的URL路径，完成实时刷新效果。

微博热搜echart可视化呈现

文章只做简单记录和放出完整代码，详细内容可以一起讨论
参考网址https://echarts.apache.org/examples/zh/editor.html?c=bar-race-country
本部分内容需要上部分的SpringBoot程序
https://blog.youkuaiyun.com/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