echarts地图json实现
生活随笔
收集整理的這篇文章主要介紹了
echarts地图json实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
echarts3.0以后取消了內置地圖，可以用百度地圖或者json或者js。本文章用的json
首先導入jquery和echarts。 只要輸入每個城市或者省份的json就行。
這個是全國各省市 json資源：https://download.csdn.net/download/weixin_38959210/10543965
因為用到了ajax，所以必須有服務（靜態頁面上看不到地圖的）才能運行。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="https://www.makeapie.com/dep/jquery/jquery.min.js"></script><script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script></head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:500px;"></div></body><script type="text/javascript">$.get('json/wuzhong.json', function (gansuJson){echarts.registerMap('wuzhong', gansuJson);var chart = echarts.init(document.getElementById('main'));var dataMap = [{ name: '利通區' }, { name: '青銅峽市' }, { name: '鹽池縣' },{ name: '紅寺堡區' },{ name: '同心縣' }];option = {title: {x: 'left',y: 'top',text: '2015吳忠市人口數量',subtext:"人口密度數據來自吳忠市統計局年鑒"},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (人)'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 170259,max: 401178,text:['max','min'],realtime: false,calculable: true,inRange: {color: ['lightskyblue','yellow', 'orangered']}},series:[{name:'人口數量',type:'map',map:'wuzhong',mapLocation:{y:100},itemSytle:{normal:{label:{show:true}},emphasis:{label:{show:false}}},label: {normal: {show: true},emphasis: {show: true},},data:[{name:'利通區',value:401178},{name:'青銅峽市',value:281953},{name:'鹽池縣',value:170259},{name:'紅寺堡區',value:171110},{name:'同心縣',value:371027},],}],};chart.setOption(option); });</script> </html>?
http://qushen.top/idea.html
?
總結
以上是生活随笔為你收集整理的echarts地图json实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 凝聚的反义词（凝聚的近义词）
- 下一篇： echarts 地图实现轮播（一）