Echarts实现区级地图
生活随笔
收集整理的這篇文章主要介紹了
Echarts实现区级地图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.尋找需要的地圖
獲取geojson地圖：
Echarts 官方Geojson 數(shù)據(jù)已被禁止, 補充geojson數(shù)據(jù)獲取:
[http://datav.aliyun.com/tools/atlas/]
如果需要繪制自定義區(qū)域可以只用這個網(wǎng)站
http://geojson.io/#map=4/35.64/103.54
推薦先用 Open-> File 打開一個需要補充區(qū)域的json 然后用 方形工具 描繪需要的區(qū)域;
獲取js地圖：
Echarts官網(wǎng)已關閉下載，可以取github下載地圖：
[https://github.com/apache/incubator-echarts]
2.Echarts導入地圖
引入jquery.js和echarts.js文件到頁面
<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src = "/js/echarts.min.js"></script>ECharts 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標簽引入的 js 文件，引入后會自動注冊地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊。
下面是兩種類型的使用示例：
JavaScript 引入示例
JSON 引入示例
$.get('map/json/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]}); });本例是采用第二種方式
2.完整實例代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>揚州市產業(yè)地圖</title> <script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src = "/js/echarts.min.js"></script> </head> <body> <div id="map" style="width: 1200px;height:900px;"></div> <script type="text/javascript"> //container 為div的id var dom = document.getElementById("map"); //得到echarts的實例對象 var myChart = echarts.init(dom);var optionMap = {tooltip : {trigger : 'item',formatter : function(a) {return "";},show:true,alwaysShowContent: true,enterable: true,backgroundColor:'rgba(255,255,255,0.7)',borderColor: '#019ADD',borderWidth: 2,padding: [5,10],textStyle: {color: '#000',}},//地圖坐標系必備的配置，具體的含義可以參考apigeo : {roam : false,//是否開啟縮放和平移map : '360000',//地圖名稱zoom : 1.2,//當前視角縮放比例selectedMode : 'single',//選中模式label : {normal : {show : true,textStyle : {color : '#fff'}},emphasis : {show : true}},itemStyle : {//地圖區(qū)域的多邊形 圖形樣式hoverAnimation : false,normal : {color : '#0065CF',borderColor : '#FFF'},emphasis : {areaColor : '#A6C5BD',borderColor : '#FFF',opacity : 1}}},series : [ {type : 'effectScatter',//帶有漣漪特效動畫的散點（氣泡）圖coordinateSystem : 'geo',data : [{name:'1',value:[119.53,33.23,457]},{name:'2',value:[119.58,32.86,135]},{name:'3',value:[119.71,32.55,234]},{name:'4',value:[119.54,32.32,89]},{name:'5',value:[119.40,32.49,333]},{name:'6',value:[119.18,32.38,298]}],symbol:'circle',symbolSize : 5,showEffectOn : 'render',rippleEffect : {scale : 10,brushType : 'stroke'},hoverAnimation : true,label : {normal : {formatter : function(a){return "";},show : true,position:'inside',offset : [0 , 20],textStyle:{color:'#fff'}}},itemStyle : {normal : {color : '#f4e925',shadowBlur : 10,shadowColor : '#333'}},zlevel : 1},{type : 'scatter',coordinateSystem : 'geo',data : [{name:'1',value:[119.53,33.23,457]},{name:'2',value:[119.58,32.86,135]},{name:'3',value:[119.71,32.55,234]},{name:'4',value:[119.54,32.32,89]},{name:'5',value:[119.40,32.49,333]},{name:'6',value:[119.18,32.38,298]}],symbol:'pin',symbolSize : function(a){return a[2]==1?0:40;},rippleEffect : {scale : 10,brushType : 'stroke'},hoverAnimation : true,label : {normal : {formatter : function(a){return a.value[2];},show : true,position: 'inside',textStyle:{color:'#fff'}}},itemStyle : {normal : {color : '#00DEFF',shadowBlur : 10,shadowColor : '#333'}},zlevel : 2},]};$.get('/js/yangzhou.json', function (myJson){echarts.registerMap('yangzhou', myJson) //注冊optionMap.geo.map = 'yangzhou';myChart.setOption(optionMap);});</script> </body> </html>效果如下：
- 上一篇： adlds文件服务器,window_Wi
- 下一篇： 煮熟的鸡蛋这么用竟可治病