<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="UTF-8">
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<h2>Hello World!</h2> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1600px;height:1400px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); function setTimeDraw(execTiemes)
{
$.ajax({
type: "POST",
url: "/chinaMapdata",
data:{type:},
dataType: "json",
success: function(mapdata){
console.log(mapdata)
var option1 = myChart.getOption()
option1.series[].data=mapdata
myChart.setOption(option1)
},
error:function (err) {
console.log(err)
}
});
if(execTiemes>)
{
console.log(execTiemes);
execTiemes--;
setTime = setTimeout('setTimeDraw('+ execTiemes +')', ); }
else
{
clearTimeout(setTime);
} } function randomValue() {
return Math.round(Math.random()*);
} var option = {
tooltip: {},
visualMap: {
min: ,
max: ,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [],
inRange: {
color: ['#e0ffff', '#006edd']
},
calculable : true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: ,
shadowOffsetY: ,
shadowBlur: ,
borderWidth: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: ,
symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate: ,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
},
{
name: 'IP访问量',
type: 'map',
geoIndex: ,
// tooltip: {show: false},
data:[
{name: '北京', value: },
{name: '天津', value: },
{name: '上海', value: randomValue()},
{name: '重庆', value: randomValue()},
{name: '河北', value: randomValue()},
{name: '河南', value: randomValue()},
{name: '云南', value: randomValue()},
{name: '辽宁', value: randomValue()},
{name: '黑龙江', value: randomValue()},
{name: '湖南', value: randomValue()},
{name: '安徽', value: randomValue()},
{name: '山东', value: randomValue()},
{name: '新疆', value: randomValue()},
{name: '江苏', value: randomValue()},
{name: '浙江', value: randomValue()},
{name: '江西', value: randomValue()},
{name: '湖北', value: randomValue()},
{name: '广西', value: randomValue()},
{name: '甘肃', value: randomValue()},
{name: '山西', value: randomValue()},
{name: '内蒙古', value: randomValue()},
{name: '陕西', value: randomValue()},
{name: '吉林', value: randomValue()},
{name: '福建', value: randomValue()},
{name: '贵州', value: randomValue()},
{name: '广东', value: randomValue()},
{name: '青海', value: randomValue()},
{name: '西藏', value: randomValue()},
{name: '四川', value: randomValue()},
{name: '宁夏', value: randomValue()},
{name: '海南', value: randomValue()},
{name: '台湾', value: randomValue()},
{name: '香港', value: randomValue()},
{name: '澳门', value: randomValue()}
]
}
]
}; myChart.setOption(option); $(function () {
//查询5次
setTimeDraw();
})
</script>
</body>
</html>