Echarts 地图总结
来源：互联网 发布：锐捷 mac过滤 编辑：程序博客网 时间：2024/06/02 01:56
<%@ 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的内容放入代码中即可。
阅读全文
1 0
- Echarts 地图总结
- echarts 简单地图的引用 说明总结
- Echarts使用心得总结——地图
- echarts地图
- echarts总结
- echarts 总结
- ECharts 浙江地图实践
- Echarts地图实例
- ECharts地图使用
- echarts 地图 热点 统计图
- Echarts地图合并提取
- ECharts之地图
- echarts地图生成
- ECharts地图详解
- 百度echarts中地图
- ECharts地图详解
- 用echarts绘制地图
- ECharts地图应用定位
- openfire4.1.5服务器部署及其异常处理
- Web应用程序
- Linux 常用命令
- webservice的应用--java+maven项目
- 基于Python的阿里云API签名算法及邮件推送服务
- Echarts 地图总结
- 批量修改喜马拉雅下载节目的文件名
- Linux I2C framework(3)_I2C consumer
- vue环境搭建（一）webpack和vue-cli安装
- C++ STL之 map\set\multimap\multiset
- python 读取 modis hdf文件
- 【3】《计算机网络：自顶向下方法》
- js中怎么判断undefined
- 第一天
