luodiab 2024-03-18 18:41 采纳率: 68.8%
浏览 4

获取后台数据后，通过折线图展示数据

代码运行后并没有出现曲线图，只有一条横线

html代码：

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>设备详细</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <th:block th:include="include :: header('设备详细')" />

</head>
<body>

<div th:each="inforTencent : ${inforTencentList}">
    <div th:each="data : ${inforTencent.data}" th:text="${data}" th:remove="tag"></div>
    <div th:each="createTime : ${inforTencent.createTime}" th:text="${createTime}" th:remove="tag"></div>
</div>
<div id="box" style="width: 600px;height:400px;"></div>

<script th:inline="javascript">
    var dataList = [];
    var createTimeList = [];

    function createChart() {

        // 获取所有的data元素
        var dataElements = document.querySelectorAll('div[th-each="data : ${inforTencent.data}"]');
        for (var i = 0; i < dataElements.length; i++) {
            dataList.push(dataElements[i].innerText);
        }

        // 获取所有的createTime元素
        var createTimeElements = document.querySelectorAll('div[th-each="createTime : ${inforTencent.createTime}"]');
        for (var i = 0; i < createTimeElements.length; i++) {
            createTimeList.push(createTimeElements[i].innerText);
        }
        /* option 配置 */
        var myChart = echarts.init(document.getElementById("box"));
        var option = {
            backgroundColor: '#FBFBFB',
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['数据']
            },
            calculable: true,
            xAxis: [
                {
                    axisLabel: {
                        rotate: 30,
                        interval: 0
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#CECECE'
                        }
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: createTimeList
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#CECECE'
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    smooth: 0.2,
                    color: ['#66AEDE'],
                    data: dataList
                }
            ]
        };
        myChart.setOption(option);
    }
    /* 页面加载完成后再进行折线图初始化 */
    document.addEventListener("DOMContentLoaded", function(event) {
        createChart();
    });
</script>

</body>
</html>

运行后仍然没办法正确展示这个折线图，我想请问一下该如何修改，才可以令这个折线图展示出来。

img

大概需求：读取后端传来的一个list集合，将集合元素中的createTime属性的值作为曲线图的横轴，data属性的值作为曲线图的竖轴，然后通过折线图展示出来。

请教一下各位有没有谁帮忙修改一下这个页面，已经困惑好几天了，谢谢大家。

  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺 Java领域优质创作者 2024-03-18 18:41
    关注

    luodiab 晚上好🌙🌙🌙
    本答案参考ChatGPT-3.5

    根据你提供的代码，我发现你在获取后端数据后没有正确地将数据填充到折线图的 x 轴和 y 轴的数据数组中，导致折线图无法正确展示。以下是修改的解决方案：

    1. 在 HTML 页面中，你已经将后台数据渲染到了 dataList 和 createTimeList 数组中。所以你可以不再使用 JS 动态获取 DOM 元素，而直接使用这两个数组作为折线图的数据。

    2. 修改 JavaScript 部分的代码，将 dataList 和 createTimeList 直接作为折线图的数据即可。

    下面是修改后的 HTML 代码，你可以将其替换原来的代码进行尝试：

    <!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>设备详细</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <th:block th:include="include :: header('设备详细')" />

</head>
<body>

<div id="dataList" th:remove="tag">
    <div th:each="data : ${inforTencent.data}" th:text="${data}"></div>
</div>

<div id="createTimeList" th:remove="tag">
    <div th:each="createTime : ${inforTencent.createTime}" th:text="${createTime}"></div>
</div>

<div id="box" style="width: 600px;height:400px;"></div>

<script th:inline="javascript">
    // 获取数据
    var dataList = document.querySelectorAll('#dataList div');
    var createTimeList = document.querySelectorAll('#createTimeList div');

    var data = [];
    var createTime = [];
    for (var i = 0; i < dataList.length; i++) {
        data.push(dataList[i].innerText);
        createTime.push(createTimeList[i].innerText);
    }

    /* option 配置 */
    var myChart = echarts.init(document.getElementById("box"));
    var option = {
        backgroundColor: '#FBFBFB',
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['数据']
        },
        calculable: true,
        xAxis: [
            {
                axisLabel: {
                    rotate: 30,
                    interval: 0
                },
                axisLine: {
                    lineStyle: {
                        color: '#CECECE'
                    }
                },
                type: 'category',
                boundaryGap: false,
                data: createTime
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#CECECE'
                    }
                }
            }
        ],
        series: [
            {
                type: 'line',
                smooth: 0.2,
                color: ['#66AEDE'],
                data: data
            }
        ]
    };

    myChart.setOption(option);
</script>

</body>
</html>

    修改后的代码将会根据后台数据正确展示折线图。同时，为了确保数据的正确性，请确保后台传递的数据格式正确，并且inforTencent.data和inforTencent.createTime 返回的是数组格式的数据。

    评论

报告相同问题？

问题事件

  • 创建了问题 3月18日

悬赏问题

  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸，chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗？
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源