海南小地圖(echart)
阿新 • • 發佈：2018-07-31
arrow detail png cli 點擊事件 ebp ref rev json
先看效果
這個是海南省地圖：
然後看引入的html：
<body class=""> <div class="container"> <div class="row"> <div class="biaoti">執法人員區域匹配</div> <div class="chartContainer" id="certNumChart" style="padding-left: 10px;"></div> <img src="image/dao.png" class="dao"> </div> </div> <script src="market_map.js"></script> </body>
然後是market_map.js
var certNumChart; $(document).ready(function() { certNumChart = echarts.init(document.getElementById(‘certNumChart‘)); certNumChart.showLoading(); initShowView();//設置點擊事件 certNumChart.on(‘click‘, function (params) { var city = params.name; var code = params.data.code; var url = G3.webPath + "jsp/marketcheck/map_detail.jsp?code="+code; G3.showModalDialog("執法人員區域匹配", url, { width : 1000, height :560 }, function(e, ret) { if (ret == "1") { grid.reload(); } }); }); }); var geoCoordMap; var planePath = ‘arrow‘; var provinceMap = proCantName; var certNumOption = { tooltip : { trigger: ‘item‘, formatter: ‘{b}:<br/> {c}‘ }, legend: { orient: ‘horizontal‘, x:‘top‘, data:["隨機數據"] }, grid:{ top:0, bottom:0 }, geo : { map : provinceMap, top : ‘10%‘, roam : false, zoom:1.2, silent : true, itemStyle : { normal : { areaColor : ‘#1673c5‘, borderColor : ‘#36a0fd‘ }, emphasis : { areaColor : ‘#2a333d‘ } } }, dataRange: { show:true, min: 0, max: 10, x:"right", color:[‘#0080FF‘,‘#D2E9FF‘], text:[‘高‘,‘低‘], // 文本，默認為數值文本 calculable : true }, series : [ { name: ‘檢查數據量‘, type: ‘map‘, mapType: proCantName, zoom:1.2, selectedMode : ‘single‘, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[] } ] }; function initShowView() { $.ajax({ async : true, url : G3.webPath + "command/dispatcher/com.inspur.dtdcommon.casemanage.cmd.DtdChecManDispatcherCmd/queryList", type : "POST", data : { checkYearDate : checkYearDate, checkEndYearDate : checkEndYearDate }, success : function(data) { certNumOption.legend.data = data.catalog; certNumOption.series[0].data = data.data; certNumChart.hideLoading(); $.get(G3.webPath + ‘skins/echars/dataGeo/geometryProvince/‘+proCantCode+‘.json‘, function (geoJson) { echarts.registerMap(proCantName, geoJson); certNumChart.setOption(certNumOption); }); } }); } function iconRefresh() { $(document).on( "click", ".icon-refresh", function() { var $container = $(this).parents(".chart-container").find( ".chartContainer"); if ($container.css("display") == "none") { $container.css("display", "block"); $container.prev().css("display", "none"); } }); }
註意：
initShowView方法中的參數：
proCantCode = "460000"
geoJson:
certNumOption.series[0].data數據格式如下：
[ { "code":"460100", "name":"海口市", "value":"363" }, { "code":"460200", "name":"三亞市", "value":"177" }, { "code":"469001", "name":"五指山市", "value":"64" }, { "code":"469002", "name":"瓊海市", "value":"114" }, { "code":"460400", "name":"儋州市", "value":"153" }, { "code":"469005", "name":"文昌市", "value":"97" }, { "code":"469006", "name":"萬寧市", "value":"117" }, { "code":"469007", "name":"東方市", "value":"80" }, { "code":"469021", "name":"定安縣", "value":"61" }, { "code":"469022", "name":"屯昌縣", "value":"65" }, { "code":"469023", "name":"澄邁縣", "value":"95" }, { "code":"469024", "name":"臨高縣", "value":"73" }, { "code":"469025", "name":"白沙縣", "value":"61" }, { "code":"469026", "name":"昌江縣", "value":"59" }, { "code":"469027", "name":"樂東縣", "value":"92" }, { "code":"469028", "name":"陵水縣", "value":"71" }, { "code":"469029", "name":"保亭縣", "value":"56" }, { "code":"469030", "name":"瓊中縣", "value":"58" }, { "code":"460500", "name":"洋浦開發區", "value":"19" }, { "code":"460300", "name":"三沙市", "value":"0" } ]
然後初始化數據地圖
海南小地圖(echart)