前端处理model.addtribute传来的值

比如开始时间和结束时间，后端传来的样式为

model.addAttribute("startDate", startDate);
model.addAttribute("endDate", endDate);

前端接收为

[[${startDate}]]-[[${endDate}]]

如果前端为地图类型的echarts

<script>
    var sitepvs = '[[${sitepvs}]]';
    var province = '[[${province}]]';

    sitepvs = sitepvs.replace(/"/g, '');
    province = province.replace(/"/g, '');

    // 将字符串拆分为数组
    var sitepvsArray = sitepvs.split(',');
    var provinceArray = province.split(',');

    var data = [];

    for (var i = 0; i < provinceArray.length; i++) {
        // 检查数组元素是否为 undefined
        if (sitepvsArray[i] !== undefined) {
            // 使用trim()函数移除可能的空格
            var value = parseInt(sitepvsArray[i].trim());
            if (!isNaN(value)) {
                // 检查provinceArray[i]是否为undefined
                var provinceName = provinceArray[i] !== undefined ? provinceArray[i].trim().replace('省','') : '';
                data.push({
                    name: provinceName,
                    value: value
                });
            } else {
                console.error("Invalid value:", sitepvsArray[i]);
            }
        } else {
            console.error("Array element is undefined at index:", i);
        }
    }

    renderMap(data);
    // console.log(data);
        function renderMap(data) {
            // 地域分布
            var mapContainer = document.getElementById('mapBox');
            // 初始化ECharts实例
            var myChart = echarts.init(mapContainer);
            // 配置项
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    min: 0,
                    max: 10000,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 图例的文本
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'red']
                    }
                },
                series: [
                    {
                        name: '数据名称',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            show: true
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 0.5,
                                borderColor: '#ccc',
                            },
                            emphasis: {
                                borderWidth: 0.5,
                                borderColor: '#ccc'
                            }
                        },
                        data: data
                    }
                ],
            };

            // 使用配置项渲染地图
            myChart.setOption(option);
        }
</script>


旁边的表格数据处理
<script language="javascript">
    var sitepvs = '[[${sitepvs}]]';
    var province = '[[${province}]]';
    var zbs = '[[${zbs}]]';

    // 去除字符串中的引号
    sitepvs = sitepvs.replace(/"/g, '');
    province = province.replace(/"/g, '');
    zbs = zbs.replace(/"/g, '');

    // 将字符串拆分为数组
    var sitepvsArray = sitepvs.split(',');
    var provinceArray = province.split(',');
    var zbsArray = zbs.split(',');

    // 填充表格内容
    var table = document.getElementById("dataTable");
    table.innerHTML = `<tr>
    <th style="height: 30px;background-color: #f2f2f2;">（填标题）</th>
    <th style="height: 30px;background-color: #f2f2f2;"></th>
    <th style="height: 30px;background-color: #f2f2f2;"></th>
    <th style="height: 30px;background-color: #f2f2f2;"></th>
</tr>`;

    var numberOfRowsToShow = Math.min(20, provinceArray.length);

    for (var index = 0; index < numberOfRowsToShow; index++) {
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        cell1.textContent = index + 1;
        cell2.textContent = provinceArray[index];
        cell3.textContent = sitepvsArray[index];
        cell4.textContent = zbsArray[index];
    }
</script>

以及趋势图

<script>
    var pvNums = '[[${pvNums}]]';
    var uvNums = '[[${uvNums}]]';
    var ipNums = '[[${ipNums}]]';
    var pvNumsArr = pvNums.split(',').map(Number);
    var uvNumsArr = uvNums.split(',').map(Number);
    var ipNumsArr = ipNums.split(',').map(Number);
    function fetchDataAndUpdateChart(pvNumsArr, uvNumsArr, ipNumsArr) {
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 配置项
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['（填对应数据标题）', '（填对应数据标题）', '（填对应数据标题）'],
                //右侧对齐
                left: 'center'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    // 文字颜色
                    color: '#000'
                },
                //隐藏刻度
                axisTick: {
                    show: false
                },
                data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27号','28日','29日','30日','31日']
            },
            yAxis: [{
                type: 'value',
                axisLabel: {
                    // 文字颜色
                    color: '#000'
                },
                //修改刻度颜色
                splitLine: {
                    lineStyle: {
                        color: '#012f4a'
                    }
                },
                //隐藏刻度
                axisTick: {
                    show: false
                }
            }, {}],
            series: [
                {
                    name: '（填对应数据标题）',
                    type: 'line',
                    data: pvNums.split(','),
                    //曲线
                    smooth: true,
                    //圆圈大小
                    symbolSize: 8,
                    //线颜色
                    itemStyle: {
                        color: '#96A7DB'  // 线颜色
                    },
                },
                {
                    name: '（填对应数据标题）',
                    type: 'line',
                    data: uvNums.split(','),
                    //曲线
                    smooth: true,
                    //圆圈大小
                    symbolSize: 8,
                    //线颜色
                    itemStyle: {
                        color: '#C2E2B2'  // 线颜色
                    },
                },
                {
                    name: '（填对应数据标题）',
                    type: 'line',
                    data: ipNums.split(','),
                    //曲线
                    smooth: true,
                    //圆圈大小
                    symbolSize: 8,
                    //线颜色
                    itemStyle: {
                        color: '#F6D280'  // 线颜色
                    },
                }
            ]
        };
        myChart.setOption(option);
    }

    document.addEventListener('DOMContentLoaded', function() {
        // 获取参数并调用fetchDataAndUpdateChart函数
        var siteid = getParameterByName('siteid');
        var nowDate = getParameterByName("nowDate");

        if (siteid && nowDate) {
            fetchDataAndUpdateChart(siteid, nowDate);
        } else {
            console.error('Required parameters not found in URL');
        }
    });

    // 获取 URL 参数的函数
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>