解决:echars的data值:在js中获取request域中的集合遍历问题

1.最近在使用echars,发现里面的data,如果在javascript中的进行调用传递过来域中的值的话, hashMap的形式并不怎么好用, 苦恼了几个小时,终于解决了这个问题;
2. 本篇文章也解决了在js中获取request域中集合,想要遍历的问题

前提条件:

1. 使用jquery.js
2. 使用了echars库
3. 使用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了,看完了点个赞吧,麻烦了,各位