【Echarts】百度Echarts的使用入门+两个简单的小例子+心得

Echarts对于展示结果，有一个很好的表达方式。

1.首先，在官网将js下载到本地，引用到页面上

这里是在开发环境，所以下载最后源代码这个

1 @RequestMapping(value= "/barDate" ,produces = "text/html;charset=UTF-8")
2     @ResponseBody
3     public String barDate(HttpServletRequest request,String condition,String  questOptions) throws UnsupportedEncodingException{
4
5         //勾选项
6         questOptions = questOptions.replaceAll("category=", "");
7         String [] questArr = questOptions.equals("")? new String[0]:questOptions.split(";");
8         //填空题
9         Map<String,Object> mapList = doMap(condition);
10         System.out.println("勾选项："+questArr);
11
12
13         JSONObject jsonObject = new JSONObject();
14         JSONArray array1 = new JSONArray();
15         JSONArray array2 = new JSONArray();
16         Map<String,Object> newList = new HashMap<String, Object>();
17         //填空题
18         mapList.forEach((key,value)->{
19             boolean flag = false;
20             if(value != null){
21                 if(key.contains("Arr")){
22                     String newKey = key.substring(0,key.lastIndexOf("Arr"));
23                     if(key.contains("age")){
24                         Date[] date = (Date[]) value;
25                         if(date[0] != null && date[1] != null){
26                             array1.add("年龄段:"+date[0]+"-"+date[1]);
27                             flag = true;
28                         }else if(date[0] != null || date[1] != null){
29                             array1.add("年龄:"+date[0] == null ? date[1] : date[0]);
30                             flag = true;
31                         }
32                     }else{
33                         Double [] v = (Double[]) value;
34                         if(v[0] != null && v[1] != null){
35                             array1.add(newKey+"段:"+v[0]+"-"+v[1]);
36                             flag = true;
37                         }else if(v[0] != null || v[1] != null){
38                             array1.add(newKey+":"+v[0] == null ? v[1] : v[0]);
39                             flag = true;
40                         }
41                     }
42                 }
43                 if(key.contains("userName")){
44                     array1.add("姓名:"+value);
45                     flag = true;
46                 }
47                 if(key.contains("sex")){
48                     array1.add("性别:"+value);
49                     flag = true;
50                 }
51                 if(key.contains("memopause")){
52                     array1.add("是否绝经:"+value);
53                     flag = true;
54                 }
55
56                 if(flag){
57                     newList.put(key, value);
58                     List<Questionnaire> list = questionnaireService.findQuests(newList, new String[0]);
59                     newList.clear();
60                     array2.add(list.size());
61                     flag = false;
62                 }
63
64             }
65         });
66         //获取资源文件中键值对
67         ResourceBundle bundle = ResourceBundle.getBundle("quest");
68
69         if(questArr.length >0){
70             for (String string : questArr) {
71                 array1.add(bundle.getString(string));
72                 List<Questionnaire> list = questionnaireService.findQuests(newList, string);
73                 array2.add(list.size());
74             }
75         }
76         jsonObject.put("X", array1);//键名为 X
77         jsonObject.put("V", array2);//键名为 V
78
79         return jsonObject.toString();
80     }
81

View Code

JSONArray array1 = new JSONArray();用来存储X轴类目名

JSONArray array2 = new JSONArray();用来存储实际一一对应的数据

6》看看图示的结果



心得：

只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！