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 ...
随机推荐
- JuJu团队12月2号工作汇报
JuJu团队12月2号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 于达 和婷婷一起调试main.jl 继续调试 金华实现的BiLSTM参数无法使用save存入 婷婷 和于达 ...
- Windows Server 2008 R2 ntoskrnl.exe 引起蓝屏故障，重新启动
前不久在HP ProLiant DL360 G6的服务器上面安装了Windows Server 2008 R2,系统一到晚上凌晨就出现蓝屏.重启现象,并且在 C:\Windows\Minidump 目 ...
- springboot#filter
_ Filter不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对HttpServletResponse 进行后处理,是个典型的处理链.完 ...
- 深度解析Critical Thinking的四个阶段
关于批判性思维我们一直都在讨论学习,但是小编相信没有几个留学生敢说自己有Critical Thinking,但它又是essay写作中必须存在的.那么批判性思维需要怎么培养呢?今天小编就给同学们分析一下 ...
- Bulma CSS - 模块化
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma框架 ...
- 第二十篇ORM查询与SQL语句
ORM查询与SQL语句 多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情 ...
- HDU - 3068 最长回文（manacher算法）
题意:给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 分析: manacher算法: 1.将字符串中每个字符的两边都插入一个特殊字符.(此操作的目的是,将字符串 ...
- python 的第一个界面程序(PyQt5)
这里用到了python的一个第三qt库PyQt5,API与qt几乎完全一样(科学严谨下...) from PyQt5.QtWidgets import QApplication, QMainWindo ...
- DevOps专题|Lua引擎打造超轻量级客户端
Lua 作为一门轻量级脚本语言,源码使用标准C语言发布,语法简洁,非常适合嵌入式.客户端.游戏等场景. Lua引擎语言特点 轻量级 源码简单,以lua最新版5.3.5为例,加上lua自身提供的lib库 ...
- docker修改存储路径（转载）
系统盘只有40G,有时docker镜像会占据大量的存储空间,于是想把docker的默认存储位置改成挂载的数据盘.docker的默认存储位置未为:/var/lib/docker 更改docker的默认存 ...