springboot数据传到前端在echarts中显示

带背景的柱状图

scand123

180人浏览 · 2023-09-23 12:36:04

scand123 · 2023-09-23 12:36:04 发布

后端正常返回查询所有的信息

前端使用echarts.min.js和jquery.min.js进行使用

ajax使用：

    $(document).ready(function() {
        $.ajax({
            url: 'http://localhost:7070/selectHang',　　//你的url
            method: 'GET',　　　　　　//方法名
            dataType: 'json',
            success: function(responseData) {
                renderBarChart(responseData);
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    });

显示的页面全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>带背景的柱状图</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="barChart" style="width: 800px; height: 400px;"></div>

<script>
    $(document).ready(function() {
        $.ajax({
            url: 'http://localhost:7070/selectHang',
            method: 'GET',
            dataType: 'json',
            success: function(responseData) {
                renderBarChart(responseData);
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    });

    function renderBarChart(data) {
        var uniqueDates = [...new Set(data.map(item => item.day_id))];
        var seriesData = [];

        uniqueDates.forEach(date => {
            var series = {
                name: date,
                type: 'bar',
                data: []
            };

            data.forEach(item => {
                if (item.day_id === date) {
                    series.data.push(item.round);
                } else {
                    series.data.push(null);
                }
            });

            seriesData.push(series);
        });

        var option = {
            title: {
                text: '带背景的柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: uniqueDates
            },
            xAxis: {
                type: 'category',
                data: uniqueDates
            },
            yAxis: {
                type: 'value'
            },
            series: seriesData
        };

        var myChart = echarts.init(document.getElementById('barChart'));
        myChart.setOption(option);
    }
</script>
</body>
</html>

springboot数据传到前端在echarts中显示