1.最近在使用echars,发现里面的data,如果在javascript中的进行调用传递过来域中的值的话, hashMap的形式并不怎么好用, 苦恼了几个小时,终于解决了这个问题;
2. 本篇文章也解决了在js中获取request域中集合,想要遍历的问题
前提条件:
- 使用jquery.js
- 使用了echars库
- 使用china.js绘制的世界地图
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script>
1.传值类型
说明: 如果我们要想在js中获取值的话,且遍历, 我们最好使用标准的json字符串的形式进行传递, 在controller中我们传递的类型如果是集合形式的对象:
ArrayList这种, 我们可以使用下面类似的代码进行标准转换
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
@RequestMapping("/allEpidemic")
public String findAll(Model model) throws JsonProcessingException {
List<Province> epidemicList = epidemicService.findAllProvince();
//将对象集合转换为标准的JSON集合字符串进行输出
ObjectMapper objectMapper = new ObjectMapper();
String str_epidemic = objectMapper.writeValueAsString(epidemicList);
model.addAttribute("epidemic_str",str_epidemic);
System.out.println(str_epidemic);
return "epidemic_analysis";
}
上面这样的话, epidemic_str中的数据就是标准JSON集合字符串的形式了
2. 传值到页面问题
使用隐藏域的方式进行获取:
jsp页面中:
<input type="hidden" value='<%=request.getAttribute("epidemic_str")%>' id="epidemic_str_id"/>
然后在javascript中进行获取:
var epidemicStr = document.getElementById(‘epidemic_str_id’).value;
3.data数据的传值拼接
var epidemicStr = document.getElementById('epidemic_str_id').value;
//alert(epidemicStr) 查看一下获取类型是否标准
var epidemicJsonStr="[";
var epidemicArray= eval(epidemicStr);//将字符串转换为集合类型
//对集合进行遍历, 对字符串进行拼接
for(var i=0 ; i<epidemicArray.length; i++){
epidemicJsonStr+="{ \"name\":"+ "\""+epidemicArray[i].provinceName+"\""+", \"value\":"+ "\""+epidemicArray[i].sum_data+"\""+ "},"
}
var result = epidemicJsonStr.substr(0, epidemicJsonStr.length - 1);// 处理数据将最后一个 "," 去掉
result+="]"
JSON.parse(result)//再将JSON字符串转换为JSON集合
// 最后再将JSON.parse(result)进行赋值后,放到data值所对应的位置就ok了
最后我们就可以正常简单的使用echars了,看完了点个赞吧,麻烦了,各位
