echart地图配置
生活随笔
收集整理的這篇文章主要介紹了
echart地图配置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
一、找到地市的json數據
可以在CSDN上下載全國地市的geoJson數據包，也可以在http://geojson.io中畫好地圖，然后復制里面的json格式代碼到命名好的json文件中。
修改name可以修改顯示的城市，添加id可以使多塊不連在一起的地圖塊產生聯系。
<%@page pageEncoding="utf-8"%> <%@include file="/common/taglibs.jsp"%> <html:base target="_self" /> <head> <%@include file="/common/header.jsp"%><script src="js/echarts-all.js"type="text/javascript"></script><script src="js/jquery-1.9.1.min.js"type="text/javascript"></script><style type="text/css">table.gridtable {width: 800px;height: 500px;border-collapse: collapse;}table.gridtable td {font-size:40px;border-width: 4px;height:50px;line-height:50px;padding: 2px;text-align: center;text-align: left;font-weight: bold;}table.gridtable td .tdNumBlue {font-size: 50px;color: #006DBD;margin-left: 30px;font-weight: bold;}table.gridtable td .tdNumRed {font-size: 50px;color: #B31629;margin-left: 30px;font-weight: bold;}</style> </head> <body style="background:transparent; width: 5600px;height: 2100px;"><html:form action="/mbmp/display/bigScreen/maintainDispatch" method="post"styleId="mbmp_display_bigScreen_maintainDispatchForm"onsubmit="return validateForm(this)"><div id="div1" style="height: 100%; width: 100%"><div style=" width: 2900px;height: 99px;float: left;"><div style=" background-image: url('images/titleImg2.png');width: 997px;height: 99px;float: left;"></div><div style=" background-image: url('images/photo.png');width: 109px;height: 89px;float: right; cursor: pointer;"></div><div style=" background-image: url('images/edit.png');width: 109px;height: 89px;float: right; cursor: pointer;" onclick="changeMon();"></div></div><div style="width: 2900px;height: 1600px; float: left; margin-top: 60px; margin-left:60px"><div id="main" style=" height: 1600px; width: 1800px;float: left "></div></div></div> </html:form> </body> <%@include file="/common/footer.jsp"%> <script>function changeMon(){window.parent.document.getElementById("monNote").src = "<%=request.getContextPath() %>/mbmp/display/bigScreen/maintainDispatch.do?action=initNote";}var myChart = echarts.init(document.getElementById("main"));$("#main").css("background-color","#ffffff");var cityMap = {"廣州市": "440100"};var a=0;var curIndx = 0;var mapType = [];var ecConfig = echarts.config;var zrEvent = zrender.tool.event;var mapGeoData = echarts.util.mapData.params;for (var city in cityMap) {mapType.push(city);// 自定義擴展圖表類型mapGeoData.params[city] = {getGeoJson: (function (c) {var geoJsonName = cityMap[c];return function (callback) {//加載json文件$.getJSON('js/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);}})(city)}}var option = {title: {text : '廣州地圖',show : false},series : [{name: '廣州地圖',type: 'map',mapType: '廣州市',selectedMode : 'single',itemStyle:{normal:{ borderWidth: 1,borderColor: 'black',label:{show:true,textStyle: {color : '#272822',fontSize:'34'}},color:'#A2FDAD'},emphasis: {label: {show: true,position: 'center',textStyle: {fontSize: '58',fontWeight: 'bold'}}}},data:[]}]};myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){ //單擊 彈出單位評價信息展示var mapOrgName= param.target;});// 為echarts對象加載數據$("#main").css("background-color","#ffffff");myChart.setOption(option,true); </script>js目錄結構如下
效果圖如下：
?
轉載于:https://my.oschina.net/u/3080158/blog/1501625
總結
以上是生活随笔為你收集整理的echart地图配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建原生JS insertafter()
- 下一篇： IntelliJ IDEA的几种常见的