JavaEE--使用百度echarts实现地图报表

 

参考：http://echarts.baidu.com/option.html#title

　　　https://www.cnblogs.com/zhangyong123/p/4974554.html

　　　https://www.cnblogs.com/moonache/p/4661058.html

　　　http://echarts.baidu.com/examples/editor.html?c=effectScatter-map

写了个简单的servlet来显示

下面是代码

city.txt(只是制造数据测试用)

 1 "北京":[116.46,39.92],
 2 "上海":[121.48,31.22],
 3 "天津":[117.2,39.13],
 4 "重庆":[106.54,29.59],
 5 "河北":[114.48,38.03],
 6 "山西":[112.53,37.87],
 7 "辽宁":[123.38,41.8],
 8 "吉林":[125.35,43.88],
 9 "黑龙江":[126.63,45.75],
10 "浙江":[120.19,30.26],
11 "福建":[119.3,26.08],
12 "山东":[117,36.65],
13 "河南":[113.65,34.76],
14 "湖北":[114.31,30.52],
15 "湖南":[113,28.21],
16 "广东":[113.23,23.16],
17 "海南":[110.35,20.02],
18 "四川":[104.06,30.67],
19 "贵州":[106.71,26.57],
20 "云南":[102.73,25.04],
21 "江西":[115.89,28.68],
22 "陕西":[108.95,34.27],
23 "青海":[101.74,36.56],
24 "甘肃":[103.73,36.03],
25 "广西":[108.33,22.84],
26 "新疆":[87.68,43.77],
27 "内蒙古":[111.65,40.82],
28 "西藏":[91.11,29.97],
29 "宁夏":[106.27,38.47],
30 "台湾":[121.5,25.14],
31 "香港":[114.1,22.2],
32 "澳门":[113.33,22.13],
33 "安徽":[117.27,31.86],
34 "江苏":[118.78,32.04]

Demo.java(随机制造数据)

 1 package test;
 2 
 3 import java.io.BufferedReader;
 4 import java.io.FileReader;
 5 import java.io.IOException;
 6 import java.util.Random;
 7 
 8 public class Demo {
 9 
10     public static void main(String[] args) throws IOException {
11         System.out.println(new Demo().invoke());
12     }
13     
14     public String invoke() throws IOException {
15         BufferedReader br = new BufferedReader(new FileReader("E:/gitProject/Test/city.txt"));
16         String msg = "";
17         String result = "";
18         //  {name: "", value: },
19         while ((msg = br.readLine()) != null) {
20 //            System.out.println(msg);
21             result += "{name: " + msg.split(":")[0] + ", value: " + (new Random().nextInt(100) + 1) + "},\n";
22         }
23         result = result.trim();
24         System.out.println(result);
25         br.close();
26         return result.substring(0, result.length() - 1);
27     }
28     
29 }

servlet

 1 package test;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.ServletRequest;
 8 import javax.servlet.ServletResponse;
 9 import javax.servlet.http.HttpServlet;
10 
11 @SuppressWarnings("serial")
12 public class DataServlet extends HttpServlet {
13 
14     @Override
15     public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
16         // TODO Auto-generated method stub
17         System.out.println("data servlet");
18         res.setContentType("text/plain; charset=utf-8");
19         try (PrintWriter out = res.getWriter();) {
20 //            String json = "{\"name\" : \"tom\"}";
21             String result = "[ " + new Demo().invoke() + " ]";
22 //            result = "{\"data\" : ' " + result + "\"}";
23             out.println(result);
24         } catch (Exception e) {
25             e.printStackTrace();
26         }
27 
28     }
29 
30 }

用于显示的html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <!-- 引入 ECharts 文件 -->
  6 <script src="echarts.js" charset="utf-8"></script>
  7 <script src="china.js" charset="utf-8"></script>
  8 <script src="jquery-3.3.1.min.js" charset="utf-8"></script>
  9 <style type="text/css">
 10 html, body {
 11     padding: 0;
 12     margin: 0;
 13     height: 100%;
 14     overflow: hidden;
 15 }
 16 
 17 #main {
 18     height: 100%;
 19     z-index: 0;
 20     background: #00FF00;
 21 }
 22 </style>
 23 <script type="text/javascript">
 24     //声明一个函数(整个文档都可以使用)
 25     var geoCoordMap = {
 26         "北京" : [ 116.46, 39.92 ],
 27         "上海" : [ 121.48, 31.22 ],
 28         "天津" : [ 117.2, 39.13 ],
 29         "重庆" : [ 106.54, 29.59 ],
 30         "河北" : [ 114.48, 38.03 ],
 31         "山西" : [ 112.53, 37.87 ],
 32         "辽宁" : [ 123.38, 41.8 ],
 33         "吉林" : [ 125.35, 43.88 ],
 34         "黑龙江" : [ 126.63, 45.75 ],
 35         "浙江" : [ 120.19, 30.26 ],
 36         "福建" : [ 119.3, 26.08 ],
 37         "山东" : [ 117, 36.65 ],
 38         "河南" : [ 113.65, 34.76 ],
 39         "湖北" : [ 114.31, 30.52 ],
 40         "湖南" : [ 113, 28.21 ],
 41         "广东" : [ 113.23, 23.16 ],
 42         "海南" : [ 110.35, 20.02 ],
 43         "四川" : [ 104.06, 30.67 ],
 44         "贵州" : [ 106.71, 26.57 ],
 45         "云南" : [ 102.73, 25.04 ],
 46         "江西" : [ 115.89, 28.68 ],
 47         "陕西" : [ 108.95, 34.27 ],
 48         "青海" : [ 101.74, 36.56 ],
 49         "甘肃" : [ 103.73, 36.03 ],
 50         "广西" : [ 108.33, 22.84 ],
 51         "新疆" : [ 87.68, 43.77 ],
 52         "内蒙古" : [ 111.65, 40.82 ],
 53         "西藏" : [ 91.11, 29.97 ],
 54         "宁夏" : [ 106.27, 38.47 ],
 55         "台湾" : [ 121.5, 25.14 ],
 56         "香港" : [ 114.1, 22.2 ],
 57         "澳门" : [ 113.33, 22.13 ],
 58         "安徽" : [ 117.27, 31.86 ],
 59         "江苏" : [ 118.78, 32.04 ]
 60     };
 61 
 62 var convertData = function(data) {
 63     var res = [];
 64     for (var i = 0; i < data.length; i++) {
 65         var geoCoord = geoCoordMap[data[i].name];
 66         console.log(geoCoord);
 67         if (geoCoord) {
 68             res.push({
 69                 name : data[i].name,
 70                 value : geoCoord.concat(data[i].value)
 71             });
 72         }
 73     }
 74     return res;
 75 };
 76 </script>
 77 <title>Insert title here</title>
 78 </head>
 79 <body>
 80     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 81     <div id="main"></div>
 82 var myChart;
 83     <script type="text/javascript">
 84         // 基于准备好的dom，初始化echarts实例
 85          myChart = echarts.init(document.getElementById('main'));
 86 
 87         // 指定图表的配置项和数据
 88         var data = [ {
 89             name : "北京",
 90             value : 53
 91         }, {
 92             name : "上海",
 93             value : 50
 94         }, {
 95             name : "天津",
 96             value : 32
 97         }, {
 98             name : "重庆",
 99             value : 69
100         }, {
101             name : "河北",
102             value : 94
103         }, {
104             name : "山西",
105             value : 96
106         }, {
107             name : "辽宁",
108             value : 57
109         }, {
110             name : "吉林",
111             value : 69
112         }, {
113             name : "黑龙江",
114             value : 26
115         }, {
116             name : "浙江",
117             value : 89
118         }, {
119             name : "福建",
120             value : 37
121         }, {
122             name : "山东",
123             value : 9
124         }, {
125             name : "河南",
126             value : 26
127         }, {
128             name : "湖北",
129             value : 59
130         }, {
131             name : "湖南",
132             value : 46
133         }, {
134             name : "广东",
135             value : 73
136         }, {
137             name : "海南",
138             value : 7
139         }, {
140             name : "四川",
141             value : 48
142         }, {
143             name : "贵州",
144             value : 89
145         }, {
146             name : "云南",
147             value : 73
148         }, {
149             name : "江西",
150             value : 11
151         }, {
152             name : "陕西",
153             value : 65
154         }, {
155             name : "青海",
156             value : 63
157         }, {
158             name : "甘肃",
159             value : 9
160         }, {
161             name : "广西",
162             value : 47
163         }, {
164             name : "新疆",
165             value : 76
166         }, {
167             name : "内蒙古",
168             value : 32
169         }, {
170             name : "西藏",
171             value : 93
172         }, {
173             name : "宁夏",
174             value : 83
175         }, {
176             name : "台湾",
177             value : 92
178         }, {
179             name : "香港",
180             value : 80
181         }, {
182             name : "澳门",
183             value : 6
184         }, {
185             name : "安徽",
186             value : 9
187         }, {
188             name : "江苏",
189             value : 6
190         }, ];
191         
192 
193         option = {
194             backgroundColor : '#404a59',
195             title : {
196                 text : '全国各省开票量',
197                 subtext : '',
198                 sublink : '',
199                 left : 'center',
200                 textStyle : {
201                     color : '#fff'
202                 }
203             },
204             tooltip : {
205                 trigger : 'item',
206                 axisPointer : {
207                     label : {
208                         show : true,
209                         textStyle : {
210                             color : ''
211                         }
212                     }
213                 },
214                 formatter : function(params) {
215                     return '开票量<br>' + params.name + ' : ' + params.value[2];
216                 }
217             },
218             legend : {
219                 orient : 'vertical',
220                 y : 'bottom',
221                 x : 'right',
222                 data : [ '开票量' ],
223                 textStyle : {
224                     color : '#fff'
225                 }
226             },
227             geo : {
228                 map : 'china',
229                 label : {
230                     emphasis : {
231                         show : false
232                     }
233                 },
234                 roam : true,
235                 itemStyle : {
236                     normal : {
237                         areaColor : '#323c48',
238                         borderColor : '#111'
239                     },
240                     emphasis : {
241                         areaColor : '#2a333d'
242                     }
243                 }
244             },
245             series : [ {
246                 name : '开票量',
247                 type : 'effectScatter',
248                 coordinateSystem : 'geo',
249                 data : convertData(data.sort(function(a, b) {
250                     return b.value - a.value;
251                 }).slice(0, data.length)),
252                 symbol : 'circle',
253                 symbolSize : function(val) {
254                     return val[2] / 5;
255                 },
256                 showEffectOn : 'render',
257                 rippleEffect : {
258                     brushType : 'stroke'
259                 },
260                 hoverAnimation : true,
261                 label : {
262                     normal : {
263                         formatter : '{b}',
264                         position : 'right',
265                         show : true
266                     }
267                 },
268                 itemStyle : {
269                     normal : {
270                         color : '#97FFFF',
271                         shadowBlur : 10,
272                         shadowColor : '#97FFFF'
273                     }
274                 }
275             }]
276         };
277 
278         // 使用刚指定的配置项和数据显示图表。
279         myChart.setOption(option);
280     </script>
281 </body>
282 <script type="text/javascript">
283 
284     //声明一个函数(整个文档都可以使用)  
285     main.onclick = function() {
286         alert('hello world');
287         $.ajax({
288             url : 'data',
289             type : 'GET', //GET
290             async : true, //或false,是否异步
291             data : {
292             //name:'yang',age:25
293             },
294             timeout : 5000, //超时时间
295             dataType : 'text', //返回的数据格式：json/xml/html/script/jsonp/text
296             beforeSend : function(xhr) {
297                 console.log(xhr)
298                 console.log('发送前')
299                 alert('before')
300             },
301             success : function(data, textStatus, jqXHR) {
302                  var option = myChart.getOption();
303             
304                 var ds = eval(data);
305                 
306                 
307                   option.series[0].data = convertData(ds);   
308                   myChart.setOption(option);    
309                 
310                 
311                 
312                 
313             },
314             error : function(xhr, textStatus) {
315                 console.log('错误')
316                 console.log(xhr)
317                 console.log(textStatus)
318             },
319             complete : function() {
320                 console.log('结束')
321             }
322         });
323 
324     }
325 </script>
326 </html>

最终效果

这里模拟的是点击刷新，实际应用可以写个定时器

posted @ 2018-01-23 14:02  MicroCat  阅读(389)  评论(0)  编辑  收藏  举报