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(只是制造数据测试用)
"北京":[116.46,39.92],
"上海":[121.48,31.22],
"天津":[117.2,39.13],
"重庆":[106.54,29.59],
"河北":[114.48,38.03],
"山西":[112.53,37.87],
"辽宁":[123.38,41.8],
"吉林":[125.35,43.88],
"黑龙江":[126.63,45.75],
"浙江":[120.19,30.26],
"福建":[119.3,26.08],
"山东":[117,36.65],
"河南":[113.65,34.76],
"湖北":[114.31,30.52],
"湖南":[113,28.21],
"广东":[113.23,23.16],
"海南":[110.35,20.02],
"四川":[104.06,30.67],
"贵州":[106.71,26.57],
"云南":[102.73,25.04],
"江西":[115.89,28.68],
"陕西":[108.95,34.27],
"青海":[101.74,36.56],
"甘肃":[103.73,36.03],
"广西":[108.33,22.84],
"新疆":[87.68,43.77],
"内蒙古":[111.65,40.82],
"西藏":[91.11,29.97],
"宁夏":[106.27,38.47],
"台湾":[121.5,25.14],
"香港":[114.1,22.2],
"澳门":[113.33,22.13],
"安徽":[117.27,31.86],
"江苏":[118.78,32.04]
Demo.java(随机制造数据)
package test; import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.Random; public class Demo { public static void main(String[] args) throws IOException {
System.out.println(new Demo().invoke());
} public String invoke() throws IOException {
BufferedReader br = new BufferedReader(new FileReader("E:/gitProject/Test/city.txt"));
String msg = "";
String result = "";
// {name: "", value: },
while ((msg = br.readLine()) != null) {
// System.out.println(msg);
result += "{name: " + msg.split(":")[0] + ", value: " + (new Random().nextInt(100) + 1) + "},\n";
}
result = result.trim();
System.out.println(result);
br.close();
return result.substring(0, result.length() - 1);
} }
servlet
package test; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet; @SuppressWarnings("serial")
public class DataServlet extends HttpServlet { @Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("data servlet");
res.setContentType("text/plain; charset=utf-8");
try (PrintWriter out = res.getWriter();) {
// String json = "{\"name\" : \"tom\"}";
String result = "[ " + new Demo().invoke() + " ]";
// result = "{\"data\" : ' " + result + "\"}";
out.println(result);
} catch (Exception e) {
e.printStackTrace();
} } }
用于显示的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js" charset="utf-8"></script>
<script src="china.js" charset="utf-8"></script>
<script src="jquery-3.3.1.min.js" charset="utf-8"></script>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
} #main {
height: 100%;
z-index: 0;
background: #00FF00;
}
</style>
<script type="text/javascript">
//声明一个函数(整个文档都可以使用)
var geoCoordMap = {
"北京" : [ 116.46, 39.92 ],
"上海" : [ 121.48, 31.22 ],
"天津" : [ 117.2, 39.13 ],
"重庆" : [ 106.54, 29.59 ],
"河北" : [ 114.48, 38.03 ],
"山西" : [ 112.53, 37.87 ],
"辽宁" : [ 123.38, 41.8 ],
"吉林" : [ 125.35, 43.88 ],
"黑龙江" : [ 126.63, 45.75 ],
"浙江" : [ 120.19, 30.26 ],
"福建" : [ 119.3, 26.08 ],
"山东" : [ 117, 36.65 ],
"河南" : [ 113.65, 34.76 ],
"湖北" : [ 114.31, 30.52 ],
"湖南" : [ 113, 28.21 ],
"广东" : [ 113.23, 23.16 ],
"海南" : [ 110.35, 20.02 ],
"四川" : [ 104.06, 30.67 ],
"贵州" : [ 106.71, 26.57 ],
"云南" : [ 102.73, 25.04 ],
"江西" : [ 115.89, 28.68 ],
"陕西" : [ 108.95, 34.27 ],
"青海" : [ 101.74, 36.56 ],
"甘肃" : [ 103.73, 36.03 ],
"广西" : [ 108.33, 22.84 ],
"新疆" : [ 87.68, 43.77 ],
"内蒙古" : [ 111.65, 40.82 ],
"西藏" : [ 91.11, 29.97 ],
"宁夏" : [ 106.27, 38.47 ],
"台湾" : [ 121.5, 25.14 ],
"香港" : [ 114.1, 22.2 ],
"澳门" : [ 113.33, 22.13 ],
"安徽" : [ 117.27, 31.86 ],
"江苏" : [ 118.78, 32.04 ]
}; var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
console.log(geoCoord);
if (geoCoord) {
res.push({
name : data[i].name,
value : geoCoord.concat(data[i].value)
});
}
}
return res;
};
</script>
<title>Insert title here</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"></div>
var myChart;
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var data = [ {
name : "北京",
value : 53
}, {
name : "上海",
value : 50
}, {
name : "天津",
value : 32
}, {
name : "重庆",
value : 69
}, {
name : "河北",
value : 94
}, {
name : "山西",
value : 96
}, {
name : "辽宁",
value : 57
}, {
name : "吉林",
value : 69
}, {
name : "黑龙江",
value : 26
}, {
name : "浙江",
value : 89
}, {
name : "福建",
value : 37
}, {
name : "山东",
value : 9
}, {
name : "河南",
value : 26
}, {
name : "湖北",
value : 59
}, {
name : "湖南",
value : 46
}, {
name : "广东",
value : 73
}, {
name : "海南",
value : 7
}, {
name : "四川",
value : 48
}, {
name : "贵州",
value : 89
}, {
name : "云南",
value : 73
}, {
name : "江西",
value : 11
}, {
name : "陕西",
value : 65
}, {
name : "青海",
value : 63
}, {
name : "甘肃",
value : 9
}, {
name : "广西",
value : 47
}, {
name : "新疆",
value : 76
}, {
name : "内蒙古",
value : 32
}, {
name : "西藏",
value : 93
}, {
name : "宁夏",
value : 83
}, {
name : "台湾",
value : 92
}, {
name : "香港",
value : 80
}, {
name : "澳门",
value : 6
}, {
name : "安徽",
value : 9
}, {
name : "江苏",
value : 6
}, ]; option = {
backgroundColor : '#404a59',
title : {
text : '全国各省开票量',
subtext : '',
sublink : '',
left : 'center',
textStyle : {
color : '#fff'
}
},
tooltip : {
trigger : 'item',
axisPointer : {
label : {
show : true,
textStyle : {
color : ''
}
}
},
formatter : function(params) {
return '开票量<br>' + params.name + ' : ' + params.value[2];
}
},
legend : {
orient : 'vertical',
y : 'bottom',
x : 'right',
data : [ '开票量' ],
textStyle : {
color : '#fff'
}
},
geo : {
map : 'china',
label : {
emphasis : {
show : false
}
},
roam : true,
itemStyle : {
normal : {
areaColor : '#323c48',
borderColor : '#111'
},
emphasis : {
areaColor : '#2a333d'
}
}
},
series : [ {
name : '开票量',
type : 'effectScatter',
coordinateSystem : 'geo',
data : convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, data.length)),
symbol : 'circle',
symbolSize : function(val) {
return val[2] / 5;
},
showEffectOn : 'render',
rippleEffect : {
brushType : 'stroke'
},
hoverAnimation : true,
label : {
normal : {
formatter : '{b}',
position : 'right',
show : true
}
},
itemStyle : {
normal : {
color : '#97FFFF',
shadowBlur : 10,
shadowColor : '#97FFFF'
}
}
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
<script type="text/javascript"> //声明一个函数(整个文档都可以使用)
main.onclick = function() {
alert('hello world');
$.ajax({
url : 'data',
type : 'GET', //GET
async : true, //或false,是否异步
data : {
//name:'yang',age:25
},
timeout : 5000, //超时时间
dataType : 'text', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend : function(xhr) {
console.log(xhr)
console.log('发送前')
alert('before')
},
success : function(data, textStatus, jqXHR) {
var option = myChart.getOption(); var ds = eval(data); option.series[0].data = convertData(ds);
myChart.setOption(option); },
error : function(xhr, textStatus) {
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete : function() {
console.log('结束')
}
}); }
</script>
</html>
最终效果
这里模拟的是点击刷新，实际应用可以写个定时器
JavaEE--使用百度echarts实现地图报表的更多相关文章
- 百度Echarts中国地图经纬度
百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况
/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 * 作者:杨浩瑞 QQ:1420213383 独立博客:http://www. ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- 利用c#+jquery+echarts生成统计报表（附源代码）
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...
- 百度ECharts数据绑定诀窍
百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括 ...
- 网页图表类框架（插件）——百度eCharts和Highcharts
ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10 ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
随机推荐
- 20170430深圳Meetup
一.类似于淘宝网,可以连续选择多个商品筛选条件,这多个参数如何传递到后台,进行数据交互? 方案一: def index // 给view提供多个参数 @param1 = ... @param2 = . ...
- centos6.7开启linux虚拟机内部错误
如图 这个需要用管理员身份运行就好了 右键----->以管理员身份打开,正常启动
- PATH环境 变量
PATH环境 变量 $HOME/.bash_profile和/etc/profile 两个文件在登陆用户的时候会执行, /etc/profile 所有用户都执行,$HOME/.bash_profile ...
- SLAM的评测工具evo
遇到的问题 今天用orbslam2跑euroc数据集,将结果和真实轨迹用evo测评,发现差别特别大: evo_traj tum data.tum CameraTrajectory.txt --plot ...
- 杭电oj3306：Another kind of Fibonacci（矩阵快速幂）
Another kind of Fibonacci 题目链接 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (J ...
- 开源DDD设计模式框架YMNNetCoreFrameWork第四篇-增加YMNSession，增加异常处理，增加策略授权
1.增加YMNSession,可以获取当前登录的用户信息 2.增加异常处理,不要使用过滤器,过滤器只能获取到mvc异常 3.增加策略授权,策略授权支持用户角色.用户名授权,初步实现 代码地址:http ...
- LCT(2)
LCT(2) 关于 LCT 的基本操作和代码实现见 (1) . 5. LCT的应用 5.0 LCT 裸题 就是LCT的基本操作模板题,常出现于早年省选.不讨论. 5.1 LCT维护子树信息 很多时候, ...
- torch.cuda.FloatTensor
Pytorch中的tensor又包括CPU上的数据类型和GPU上的数据类型,一般GPU上的Tensor是CPU上的Tensor加cuda()函数得到. 一般系统默认是torch.FloatTensor ...
- AI 伴游小精灵
北京市商汤科技开发有限公司面向青少年研发了一款智能伴游机器人-- AI 伴游小精灵.一经推出,深受孩子们的喜爱,可爱又机智的小精灵会想出很多有趣的小游戏来启迪孩子们思考.今天,小精灵给你提出了一个神奇 ...
- js运用sort对json 数组进行排序
Array.sort()方法是用来对数组项进行排序的 ,默认情况下是进行升序排列.sort() 方法可以接受一个 方法为参数. sort()排序时每次比较两个数组项都回执行这个参数,并把两个比较的数组 ...