You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
246 lines
9.2 KiB
246 lines
9.2 KiB
1 month ago
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||
|
|
<%@ page import="org.wdk.WDKConstant"%>
|
||
|
|
<%@ page import="org.wdk.WDKCore"%>
|
||
|
|
<%@ page import="org.wdk.WDK"%>
|
||
|
|
<%@ page import="com.noblelift.imp.platform.module.portal.source.SessionUser"%>
|
||
|
|
<%
|
||
|
|
String path = request.getContextPath();
|
||
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
||
|
|
String WDK_ROOT = WDKCore.WDK_ROOT;
|
||
|
|
SessionUser su = (SessionUser)WDK.getSessionUser(request, response);
|
||
|
|
WDK.writeSessionUser(out, su);
|
||
|
|
%>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
|
||
|
|
|
||
|
|
<base href="<%=basePath%>" target="_self">
|
||
|
|
<title>浙江省地图</title>
|
||
|
|
<script type="text/javascript" src="<%=WDK_ROOT%>/theme/je/core/js/wdk.js"></script>
|
||
|
|
<script type="text/javascript" src="<%=WDK_ROOT%>/theme/je/core/js/lib/echarts.3.1.10/echarts.min.js"></script>
|
||
|
|
<script type="text/javascript" src="platform/report/js/zhejiang.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
<% if(null==su){%>
|
||
|
|
$.timeout();
|
||
|
|
<%}%>
|
||
|
|
//echarts.registerMap('zhejiang', henanJson);//hennanJson名称取自zhejiang.js里的var henanJson变量名
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//页面初始化
|
||
|
|
$(function() {
|
||
|
|
var chart = echarts.init(document.getElementById('map'));
|
||
|
|
//常见参数手册：http://blog.csdn.net/xieweikun7/article/details/52766676
|
||
|
|
chart.setOption({
|
||
|
|
//chart图的背景色
|
||
|
|
backgroundColor:'#16182C',
|
||
|
|
title: {
|
||
|
|
// 是否显示
|
||
|
|
show: true,
|
||
|
|
text: '浙江11地市人口密度 （2017）',
|
||
|
|
link: 'http://www.baidu.com',
|
||
|
|
target: 'blank',//self
|
||
|
|
subtext: '人口密度数据来自Wikipedia',
|
||
|
|
sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12',
|
||
|
|
subtarget: 'blank',
|
||
|
|
// 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
|
|
x: 'center',
|
||
|
|
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
|
||
|
|
y: 'bottom',
|
||
|
|
itemGap: 20,
|
||
|
|
// 主标题文本样式
|
||
|
|
textStyle: {
|
||
|
|
// 颜色
|
||
|
|
color: '#0066FF',
|
||
|
|
// 水平对齐方式，可选为：'left' | 'right' | 'center'
|
||
|
|
align: 'left',
|
||
|
|
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
|
||
|
|
baseline: 'bottom',
|
||
|
|
// 字体系列
|
||
|
|
fontFamily: 'Arial, 宋体, sans-serif',
|
||
|
|
// 字号 ，单位px
|
||
|
|
fontSize: 20,
|
||
|
|
// 样式，可选为：'normal' | 'italic' | 'oblique'
|
||
|
|
fontStyle: 'italic',
|
||
|
|
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
|
||
|
|
fontWeight: 'normal'
|
||
|
|
},
|
||
|
|
// 副标题文本样式
|
||
|
|
subtextStyle: {
|
||
|
|
// 颜色
|
||
|
|
color: '#FF7F50',
|
||
|
|
// 水平对齐方式，可选为：'left' | 'right' | 'center'
|
||
|
|
align: 'left',
|
||
|
|
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
|
||
|
|
baseline: 'bottom',
|
||
|
|
// 字体系列
|
||
|
|
fontFamily: 'Arial, 宋体, sans-serif',
|
||
|
|
// 字号 ，单位px
|
||
|
|
fontSize: 15,
|
||
|
|
// 样式，可选为：'normal' | 'italic' | 'oblique'
|
||
|
|
fontStyle: 'italic',
|
||
|
|
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
|
||
|
|
fontWeight: 'normal'
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b}<br/>{c} (p / km2)'
|
||
|
|
},
|
||
|
|
visualMap: {
|
||
|
|
min: 800,
|
||
|
|
max: 50000,
|
||
|
|
text:['High','Low'],
|
||
|
|
realtime: false,
|
||
|
|
calculable: true,
|
||
|
|
inRange: {
|
||
|
|
color: ['#6A97A8','#46627A', '#2E3A56','#16182C']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '香港11区人口密度',
|
||
|
|
type: 'map',
|
||
|
|
map: 'zhejiang',
|
||
|
|
roam:true,//是否开启鼠标缩放和平移漫游
|
||
|
|
//地图上的形状
|
||
|
|
itemStyle:{
|
||
|
|
normal:{label:{show:true,textStyle:{
|
||
|
|
color:"#FFF"
|
||
|
|
}},
|
||
|
|
//borderWidth:1,//省份的边框宽度
|
||
|
|
//borderColor:'#f60'//省份的边框颜色
|
||
|
|
//,color:'#ece2df'//地图背景颜色
|
||
|
|
|
||
|
|
},//普通状态下
|
||
|
|
emphasis:{label:{show:true,textStyle:{
|
||
|
|
color:"#FFF"
|
||
|
|
}},
|
||
|
|
areaColor:'#eee',
|
||
|
|
shadowColor: '#1F2B4F',
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX:-20,
|
||
|
|
shadowOffsetY:-20,
|
||
|
|
opacity:0.8
|
||
|
|
|
||
|
|
}//高亮状态下
|
||
|
|
},
|
||
|
|
//地图上的文本标签
|
||
|
|
label:{
|
||
|
|
normal:{label:{show:true,textStyle:{
|
||
|
|
color:"#FFF"
|
||
|
|
}}},//普通状态下
|
||
|
|
emphasis:{label:{show:true,textStyle:{
|
||
|
|
color:"#FFF",
|
||
|
|
areaColor:'#46627A',
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
|
|
shadowBlur: 10
|
||
|
|
}}}//高亮状态下
|
||
|
|
},
|
||
|
|
data:[
|
||
|
|
{name: '杭州市', value: 20057.34},
|
||
|
|
{name: '绍兴市', value: 15477.48},
|
||
|
|
{name: '温州市', value: 31686.1},
|
||
|
|
{name: '台州市', value: 6992.6},
|
||
|
|
{name: '嘉兴市', value: 44045.49},
|
||
|
|
{name: '丽水市', value: 40689.64},
|
||
|
|
{name: '宁波市', value: 37659.78},
|
||
|
|
{name: '湖州市', value: 45180.97},
|
||
|
|
{name: '舟山市', value: 55204.26},
|
||
|
|
{name: '衢州市', value: 55204.26},
|
||
|
|
{name: '金华市', value: 55204.26}
|
||
|
|
],
|
||
|
|
|
||
|
|
|
||
|
|
}],
|
||
|
|
//工具盒
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
orient: 'vertical',
|
||
|
|
left: 'right',
|
||
|
|
top: 'center',
|
||
|
|
feature: {
|
||
|
|
// 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性
|
||
|
|
mark : {
|
||
|
|
show : true,
|
||
|
|
title : {
|
||
|
|
mark : '辅助线开关',
|
||
|
|
markUndo : '删除辅助线',
|
||
|
|
markClear : '清空辅助线'
|
||
|
|
},
|
||
|
|
lineStyle : {
|
||
|
|
width : 2,
|
||
|
|
color : '#1e90ff',
|
||
|
|
type : 'dashed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
|
||
|
|
dataZoom : {
|
||
|
|
show : true,
|
||
|
|
title : {
|
||
|
|
dataZoom : '区域缩放',
|
||
|
|
dataZoomReset : '区域缩放后退'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 数据视图，上图icon左数6，打开数据视图，可设置更多属性
|
||
|
|
dataView : {
|
||
|
|
show : true,
|
||
|
|
title : '数据视图',
|
||
|
|
readOnly: false,
|
||
|
|
lang: ['数据视图', '关闭', '刷新']
|
||
|
|
},
|
||
|
|
// 动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
|
||
|
|
magicType: {
|
||
|
|
show : true,
|
||
|
|
title : {
|
||
|
|
line : '折线图切换',
|
||
|
|
bar : '柱形图切换',
|
||
|
|
stack : '堆积',
|
||
|
|
tiled : '平铺',
|
||
|
|
force: '力导向布局图切换',
|
||
|
|
chord: '和弦图切换',
|
||
|
|
pie: '饼图切换',
|
||
|
|
funnel: '漏斗图切换'
|
||
|
|
},
|
||
|
|
option: {
|
||
|
|
// line: {...},
|
||
|
|
// bar: {...},
|
||
|
|
// stack: {...},
|
||
|
|
// tiled: {...},
|
||
|
|
// force: {...},
|
||
|
|
// chord: {...},
|
||
|
|
// pie: {...},
|
||
|
|
// funnel: {...}
|
||
|
|
},
|
||
|
|
type : []
|
||
|
|
},
|
||
|
|
restore: {},
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
.map-container{
|
||
|
|
background-color: #16182C;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="map" class="map-container" style="height: 700px;width: 800px;overflow:auto;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|