第三部分-微博热搜echart可视化呈现_echarts做微博数据情况-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43596589/article/details/115655246

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微博热搜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;
    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

效果如下
在这里插入图片描述