比如开始时间和结束时间，后端传来的样式为
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>
