前一段时间因为业务问题需要生成地图数据,所以使用了Echarts来作为生成的工具,以下是相关的一些使用经验:
首先Jsp页面:
<div class="map-box" id="mapdiv"></div>
<script type="text/javascript" src="<%=request.getContextPath()%>/basejs/welcomePage/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/basejs/welcomePage/echarts.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/basejs/welcomePage/guangdong.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/basejs/welcomePage/echarts-gl.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/basejs/welcomePage/mainoption.js"></script>
需要的js文件基本可以从网上找到,需要哪个地区的就找哪个地区的。业务代码在mainoption.js里:
var myChart1;
$(document).ready(function() {
$(window).resize(function() {
myChart1.resize();
});
getMapDatas();
});
获取数据的方法:
function getMapDatas(){
$.ajax({
url : "/*后端地址*/"
type : 'GET',
dataType : "json",
cache : false,
timeout : 10000,
success : function(result) {
if(result.data.success){
if(result.data.dm){
if(result.data.dm.qsjs && result.data.dm.rawData){
Map('mapdiv',result.data.dm.rawData,result.data.dm.qsjs);
}else{
alert("服务出错,获取统计信息失败!");
}
}else{
alert("服务出错,获取统计信息失败!");
}
}else{
alert(result.data.resMsg);
}
return true;
},
error:function(){
alert("系统出错!请联系管理员!");
}
});
}
/**
* 根据传入的数据生成
* @param id //需要生成map的容器地址
* @param cityData //这里是要给每个城市设置的值,不是必选项
* @param _number//额外需要的参数
* @returns
*/
function Map(id,cityData,_number){
// function sortRule(a,b){return a.value-b.value;}
// cityData.sort(sortRule);
// var name=cityData.map(name=>name.name);
myChart1 = echarts.init(document.getElementById(id));
var now =formatDateTime(new Date());
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '截止'+now,
subtext: '全省参训教师'+_number+"人",
x:50,
y:50
},
tooltip : {
trigger: 'item',
type:'cross',
/* backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"}, //提示标签字体颜色
formatter:function(param){
return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
} */
alwaysShowContent: false,
bordeRadius: 4,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
backgroundColor: 'rgba(255,255,255,0.9)',
padding: 0,
// position: "top",
textStyle: {
fontSize: 12,
color: '#333'
},
},
visualMap: {
min: 0,
max: 600,
text:['High','Low'],
x:'left',
y:'center',
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
toolbox:{
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
borderColor: '#FFF', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽,单位px,默认为0(无边框)
padding: 5, // 工具箱内边距,单位px,默认各方向内边距为5,
showTitle: false,
feature : {
saveAsImage: { show : true,
title : '保存为图片',
type : 'jpeg'
},
restore: {show: true},
}
},
series: [{
name: '参训教师人数',
type: 'map',
map:'广东',
// symbol:'../images/shine.jpg',
// symbolSize: 41,
roam:true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
layoutCenter: ['50%', '50%'], //属性定义地图中心在屏幕中的位置,一般结合layoutSize 定义地图的大小
// layoutSize: 450,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:cityData
}]
};
myChart1.setOption(option);
myChart1.on('click',function(params){console.log(params);})
}
需要的格式化时间方法:
function formatDateTime(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
}
后端数据格式:
JSONObject jo=new JSONObject();
JSONObject dm=new JSONObject();
dm.put("qsjs", 1200000);//全省参训教师人数
dm.put("rawData", getRawData());
jo.put("success", true);
jo.put("dm", dm);
return jo;
getRawData方法的代码:
private List<JSONObject> getRawData() throws AppException {
List<JSONObject> mplist=new ArrayList<JSONObject>();
JSONObject zhjson=new JSONObject();
zhjson.put("name", "珠海市");
zhjson.put("value",150);
mplist.add(zhjson);
JSONObject gzjson = new JSONObject();
gzjson.put("name", "广州市");
gzjson.put("value",250);
mplist.add(gzjson);
JSONObject zjjson = new JSONObject();
zjjson.put("name", "湛江市");
zjjson.put("value",520);
mplist.add(zjjson);
JSONObject mmjson = new JSONObject();
mmjson.put("name", "茂名市");
mmjson.put("value", 130);
mplist.add(mmjson);
JSONObject yjjson = new JSONObject();
yjjson.put("name", "阳江市");
yjjson.put("value", 120);
mplist.add(yjjson);
JSONObject yfjson = new JSONObject();
yfjson.put("name", "云浮市");
yfjson.put("value", 120);
mplist.add(yfjson);
JSONObject zqjson = new JSONObject();
zqjson.put("name", "肇庆市");
zqjson.put("value", 100);
mplist.add(zqjson);
JSONObject jmjson = new JSONObject();
jmjson.put("name", "江门市");
jmjson.put("value", 450);
mplist.add(jmjson);
JSONObject zsjson = new JSONObject();
zsjson.put("name", "中山市");
zsjson.put("value", 80);
mplist.add(zsjson);
JSONObject fsjson = new JSONObject();
fsjson.put("name", "佛山市");
fsjson.put("value", 333);
mplist.add(fsjson);
JSONObject qyjson = new JSONObject();
qyjson.put("name", "清远市");
qyjson.put("value", 130);
mplist.add(qyjson);
JSONObject sgjson = new JSONObject();
sgjson.put("name", "韶关市");
sgjson.put("value", 140);
mplist.add(sgjson);
JSONObject hyjson = new JSONObject();
hyjson.put("name", "河源市");
hyjson.put("value", 120);
mplist.add(hyjson);
JSONObject mzjson = new JSONObject();
mzjson.put("name", "梅州市");
mzjson.put("value", 231);
mplist.add(mzjson);
JSONObject czjson = new JSONObject();
czjson.put("name", "潮州市");
czjson.put("value", 124);
mplist.add(czjson);
JSONObject jyjson = new JSONObject();
jyjson.put("name", "揭阳市");
jyjson.put("value", 156);
mplist.add(jyjson);
JSONObject stjson = new JSONObject();
stjson.put("name", "汕头市");
stjson.put("value", 112);
mplist.add(stjson);
JSONObject swjson = new JSONObject();
swjson.put("name", "汕尾市");
swjson.put("value", 128);
mplist.add(swjson);
JSONObject szjson = new JSONObject();
szjson.put("name", "深圳市");
szjson.put("value", 192);
mplist.add(szjson);
JSONObject dgjson = new JSONObject();
dgjson.put("name", "东莞市");
dgjson.put("value", 128);
mplist.add(dgjson);
JSONObject hzjson = new JSONObject();
hzjson.put("name", "惠州市");
hzjson.put("value", 187);
mplist.add(hzjson);
return mplist;
}