<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="${res_url}assets/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${res_url}assets/js/echarts/macarons.js"></script>
<script type="text/javascript" src="${res_url}assets/js/jquery1x.js"></script>
<script type="text/javascript" src="${res_url}assets/js/echarts/china.js"></script>
<script type="text/javascript" src="${res_url}assets/stationCoord/stationCoord2.js"></script>
</head>
<body>
<div style="position: absolute; top: 40%; left: 79%; z-index: 20" class="btn-group btn-group-xs">
<h4>汽车站未来2小时客流统计</h4>
</div>
<div id="main" style="width: 98%;position: absolute; top: 0px; left: 0px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'),'macarons');
window.onresize = function() {
$('#main').height($(document).height() - 25);
myChart.resize();
}
$(window).resize();
var station='太原';
var convertData = function (data,flag) {
var fromCoord;
var toCoord ;
var fromStation;
var toStation;
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
if(flag===0){
fromStation=dataItem.name;
fromCoord= geoCoordMap[dataItem.name];
toStation=station;
toCoord = geoCoordMap[station];
}else if(flag===1){
fromStation=station;
fromCoord = geoCoordMap[station];
toStation=dataItem.name;
toCoord= geoCoordMap[dataItem.name];
}
if (fromCoord && toCoord) {
res.push({
fromName: fromStation,
toName:toStation,
coords: [fromCoord, toCoord],
value:dataItem.value
});
}
}
return res;
};
function yData(ydata){
var yval=[];
ydata.forEach(function(val,index,ydata){
yval.push(ydata[index]["value"]);
});
return yval;
};
function xData(xdata){
var xval=[];
xdata.forEach(function(val,index,xdata){
xval.push(xdata[index]["name"]);
});
return xval;
};
var color = [ '#c0f','#030'];
//var color = ['#a6c84c', '#ddb926' ];
var trainPath= 'path://M463.398584 135.620817c19.766183 0 35.81981-16.022928 35.81981-35.793204 0-19.791765-16.053628-35.82288-35.81981-35.82288-19.769252 0-35.82288 16.031115-35.82288 35.82288C427.57468 119.597889 443.629331 135.620817 463.398584 135.620817zM558.5722 135.620817c19.792788 0 35.796274-16.022928 35.796274-35.793204 0-19.791765-16.004509-35.82288-35.796274-35.82288-19.791765 0-35.845393 16.031115-35.845393 35.82288C522.725784 119.597889 538.780435 135.620817 558.5722 135.620817zM680.147116 775.382643c44.347021-7.15905 88.49245-53.423747 88.49245-109.790522L768.639566 253.480108c0-58.179051-48.957015-111.602797-115.440196-111.602797l-141.693116-0.075725-142.762471 0.075725c-66.532299 0-115.440196 53.42477-115.440196 111.602797L253.303588 665.592121c0 56.344263 44.119847 102.608959 88.493473 109.736287L208.806141 959.397656l76.704986 0 95.124498-124.040061 260.624832 0 95.151104 124.040061 76.726475 0L680.147116 775.382643zM422.638251 180.468235c0-8.000208 10.370185-14.757099 22.310122-14.757099l132.069945 0c11.917424 0 22.286586 6.756891 22.286586 14.757099l0 26.003234c0 8.022721-9.797134 14.954597-22.286586 14.954597L444.948373 221.426065c-12.485359 0-22.310122-6.930853-22.310122-14.954597L422.638251 180.468235zM315.07342 315.806619c0-30.817889 19.944238-57.739029 57.511855-57.739029l276.751115 0c37.59013 0 57.534368 26.921139 57.534368 57.739029l0 74.210166c0.273223 35.671431-25.726941 57.503669-57.534368 57.503669L372.585275 447.520453c-31.785937 0-57.81066-21.832238-57.511855-57.503669L315.07342 315.806619zM370.166179 715.224518c-27.921933 0-50.602492-22.659069-50.602492-50.602492 0-27.945469 22.681582-50.626028 50.602492-50.626028 27.966958 0 50.652634 22.680559 50.652634 50.626028C420.818813 692.565449 398.133138 715.224518 370.166179 715.224518zM600.003821 664.651702c0-27.975145 22.659069-50.633191 50.602492-50.633191 27.971052 0 50.630121 22.659069 50.630121 50.633191 0 27.937283-22.659069 50.603515-50.630121 50.603515C622.661867 715.255217 600.003821 692.565449 600.003821 664.651702z';
var series = [];
option = {
// backgroundColor: ' #323c48',
title : {
text: station+'站未来2小时到达/出发客流示意图',
subtext: '数据为在'+station+'站下车/上车人数',
left: 'center'
},
dataZoom: {
type: 'slider',
// yAxisIndex: 0,
start:20,
end:80,
filterMode: 'empty',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '60%',
handleStyle: {
shadowBlur: 3,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
visualMap: {
type: 'continuous',
min: 0,
max: 2000,
//text:['High','Low'],
realtime: false,
calculable : true,
//seriesIndex:[0],
color: ['orangered','yellow','lightskyblue']
},
grid: {
right:'1%',
top:'50%',
height: '40%',
width: '24%'
},
xAxis : [
{
type : 'category',
data : [],
// data:xDada(),
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
tooltip : {
show:true,
trigger: 'item',
formatter:'{b}'
},
legend: {
left: 'right',
data:['到达', '出发'],
selectedMode: 'single'
},
geo: {
map: 'china',
label: {
normal:{
show:true,
textStyle:{
color:'#999999'
}
},
emphasis: {
show: false
}
},
silent:true,
roam: true,
zoom:1.2,
center: [112.3352,37.9413],
selectedMode: false,
scaleLimit:{
min:0.8,
max:50
},
itemStyle: {
normal: {
show: false,
//areaColor: '#323c48',
borderColor:'rgba(100,149,237,1)',
borderWidth:1,
areaStyle:{
color: '#1b1b1b'
}
},
emphasis: {
show: false,
areaColor: '#323c48'
}
}
},
series:series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.showLoading({
text: '数据正在加载中,请稍等片刻...',
zlevel: 1,
effectOption: { backgroundColor: '#1b1b1b' },
effect: 'whirling'
});
$.ajax({
type:"post",
url:"${context_path}/sys/homePage/getStationData",
success:function(dataJson){
if(dataJson){
[['到达', dataJson.arriveData],['出发',dataJson.sendData]].forEach(function (item, i) {
series.push(
{
name: item[0],
type: 'lines',
symbol: ['none', 'arrow'],
symbolSize: 10,
tooltip:{
show:true,
formatter:function(params, ticket, callback){
return params.data.fromName+'->'+params.data.toName+':'+params.data.value
}
},
effect: {
show: true,
period: 10,
trailLength: 0,
//symbol: 'image://./res/assets/css/images/ic_train.png',
//若为图片则visualMap不能隐藏效果
symbol:trainPath,
symbolSize: 20
},
lineStyle: {
normal: {
color: color[i],
width: 2,
opacity: 0.8,
curveness: 0.1
}
},
data: convertData(item[1],i)
},
{
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke',
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
},
emphasis: {
show: true
}
},
//symbolSize: 12,
symbolSize: function (val) {
return 10+val[2] / 80;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem.name+"站",
value: geoCoordMap[dataItem.name].concat([dataItem.value])
};
})
},
{
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: false,
position: 'top',
formatter: function(params, ticket, callback){
var totalValue=0;
for (var i = 0; i < item[1].length; i++) {
totalValue+=item[1][i].value;
}
return station+'站\n'+item[0]+':'+totalValue
}
},
emphasis: {
show: true
}
},
symbolSize: 12,
itemStyle: {
normal: {
color: '#df1548'
}
},
data: item[1].map(function (dataItem) {
return {
name: station+'站',
value: geoCoordMap[station]
};
})
},{
name:item[0],
type:'bar',
barWidth: '50%',
data:yData(item[1])
}
);
myChart.setOption({
xAxis : [{
data : xData(dataJson.arriveData),
}]
});
}
);
myChart.setOption({
visualMap:{
//在此设置起手柄拉动效果
seriesIndex:[0,1,2,3,4,5,6,7]
},
series:series
});
}
myChart.hideLoading();
myChart.on('legendselectchanged', function(obj) {
var selected = obj.selected;
var legend = obj.name;
if (legend != undefined) {
if (legend === '到达') {
myChart.setOption({
xAxis : [{data : xData(dataJson.arriveData)}]
});
} else {
myChart.setOption({
xAxis : [{ data : xData(dataJson.sendData) }]
});
}
}
});
}
});
</script>
</body>
</html>
注意事项：1、显示地图的省份在geo中设置。
2、在使用 visualMap的时候 紧跟循环添加以下内容否则没有效果：
myChart.setOption({
visualMap:{
seriesIndex:[0,1,2,3,4,5,6,7]
},
series:series
});
3.svg图标的使用：进入阿里巴巴矢量图标库找到所需的图标下载，完成之后用编辑器打开，复制path的内容放入代码中即可。