Echarts地圖實例詳解(地圖樣式、合并地圖、增加地圖)
更新時間：2022年06月30日 10:19:03 作者：氵易風灬
ECharts是一個使用JavaScript實現(xiàn)的開源可視化庫,涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于Echarts地圖的相關(guān)資料,包括地圖樣式、合并地圖、增加地圖,需要的朋友可以參考下
概述
地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見的一種展示手段，不僅美觀而且很大氣。尤其是在大屏展示中更是扮演著必不可缺的角色。
地圖實現(xiàn)
下面我們就來實現(xiàn)一個基本的地圖，并為之添加一些好看的樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地圖</title>
<script src="js/echarts.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px;height: 800px"></div>
<script type="text/javascript">
var dt = [
{name:'芙蓉區(qū)', value: 40000.34,text:'貸款筆數(shù)：54412<br/>貸款金額：468452.35萬',selected:true},
{name:'岳麓區(qū)', value: 38000,text:'繳存人數(shù)：32412'},
{name:'開福區(qū)', value: 18000,text:'繳存人數(shù)：22412'},
{name:'天心區(qū)', value: 15092,text:'繳存人數(shù)：42412'},
{name:'雨花區(qū)', value: 28000,text:'繳存人數(shù)：52412'},
{name:'望城區(qū)', value: 12000,text:'繳存人數(shù)：72412'},
{name:'長沙縣', value: 32000,text:'繳存人數(shù)：82412'},
{name:'寧鄉(xiāng)縣', value: 5100,text:'繳存人數(shù)：6412'},
{name:'瀏陽市', value: 2200,text:'繳存人數(shù)：3412'},
{name:'分中心', value: 4918,text:'繳存人數(shù)：66412'}
];
var option = {
title : {
text: '長沙市',
subtext: '各區(qū)縣',
x:'center'
},
tooltip : {
trigger: 'item',
type:'cross',
/* backgroundColor:"#ff7f50",//提示標簽背景顏色
textStyle:{color:"#fff"}, //提示標簽字體顏色
formatter:function(param){
return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
} */
alwaysShowContent: false,
bordeRadius: 4,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
backgroundColor: 'rgba(255,255,255,0.9)',
padding: 0,
// position: "top",
textStyle: {
fontSize: 12,
color: '#333'
},
formatter: function(params) {
var color = "#FFB84D";
var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt[params.dataIndex].name + "</div>";
var num = Math.ceil(params.data.name[1].length / 10);
a += "<div style='padding:3px;'>";
for (var i = 0; i < num; i++) {
a += dt[params.dataIndex].text + "<br>";
}
a += "</div>";
return a;
}
},
visualMap: {
min: 800,
max: 50000,
text:['High','Low'],
x:'left',
y:'center',
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
toolbox:{
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
borderColor: '#FFF', // 工具箱邊框顏色
borderWidth: 0, // 工具箱邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 工具箱內(nèi)邊距，單位px，默認各方向內(nèi)邊距為5，
showTitle: false,
feature : {
saveAsImage: { show : true,
title : '保存為圖片',
type : 'jpeg'
},
restore: {show: true},
}
},
series: [{
name: '長沙',
type: 'map',
map:'cs',
// symbol:'../images/shine.jpg',
// symbolSize: 41,
roam:true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
layoutCenter: ['50%', '50%'], //屬性定義地圖中心在屏幕中的位置，一般結(jié)合layoutSize 定義地圖的大小
// layoutSize: 11200,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:dt
}]
};
$.get('json/cs.json', function (csJson) {
echarts.registerMap('cs', csJson);
var chart = echarts.init(document.getElementById('map'));
chart.setOption(option);
});
</script>
</body>
</html>示意圖如下：
一個基本的地圖就出來了。
提出問題
熟悉長沙的人就會知道，在上面這個地圖中，多了一塊區(qū)域“分中心”，在長沙的地圖板塊中是沒有這個區(qū)域的，那么我是怎樣將他改變成這樣的呢。
這其實是當初用戶提出的一個需求，因為他們中是有一個分中心的，而長沙地區(qū)是沒有這個地圖區(qū)域的，所以最后決定是添加一塊湖南縮略圖樣式的區(qū)域來代表這個分中心。
當初也是找了很多資料，沒有找到合適的辦法，然后決定用兩個地圖來表示，然后給用戶看了樣式，用戶也覺得很滿意，但是在真正開發(fā)過程中確遇到了很多問題，數(shù)據(jù)不好一起展示和聯(lián)動。后來也是找了很久才找到一個網(wǎng)站
自定義地圖
下面來講解這個網(wǎng)站如何使用：
打開網(wǎng)址我們可以看到這個網(wǎng)站的樣子
網(wǎng)頁的左上角是菜單欄，在open選項中打開我們需要編輯的json文件
open----->file
編輯完成之后在第二個save菜單中保存我們編輯的內(nèi)容即可
save------>GeoJSON
在網(wǎng)頁的中部有一塊區(qū)域就是我們需要重點掌握的畫圖工具
第一個
就是根據(jù)點來繪圖，繪制的都是線條形狀的圖形
第二個
就是多邊形，可以快速的繪制一個多邊形區(qū)域或者是比較復雜的地圖區(qū)域。
第三個
就是矩形，能夠快速的繪制一個簡單的矩形區(qū)域。
當我們在地圖上新增了一塊區(qū)域之后還要為這塊區(qū)域命名：
如圖：點擊這塊新增的區(qū)域，會出現(xiàn)一個該區(qū)域的屬性框，點擊Add按鈕，新增一個name屬性值為分中心。這樣就完成了地圖區(qū)域的增加。
上面這個圖的左上角就是我自己繪制的，長沙的地圖原本是只有下面這塊區(qū)域的。
有了地圖的增加，那么必然會有地圖的合并。
以長沙為例，假如由于行政區(qū)域的劃分，開福區(qū)和芙蓉區(qū)合并為一個區(qū)，那么我們就需要在地圖上將這兩個區(qū)進行合并。
首先將這兩個區(qū)刪除:點擊芙蓉區(qū)和開福區(qū)然后把他們兩個刪除掉
刪除后的樣子是這樣
可以看到中間空了一塊區(qū)域，然后再利用我們的點畫圖工具再地圖上的那塊空白區(qū)域進行繪制即可，利用多邊形畫圖工具
將空白區(qū)域的點鏈接起來即可，在繪制過程中利用鼠標滾輪盡量把地圖擴大這樣方便繪制并且繪制的更加精密，最后將它的名字修改成合并后的名字即可。
最后將繪制完成的保存到本地即可。
地圖的東西大概就是這么多，有問題的可以留言一起討論。
最后送上一個3D版的地圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/echarts.js"></script>
<script src="../js/echarts-gl.js"></script>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="mp" style="height: 700px;width: 100%;margin:0px;padding: 0px;"></div>
<script>
var dt = [
{name:'芙蓉區(qū)', value: 1,height:2.5},
{name:'岳麓區(qū)', value: 2,height:3.5},
{name:'開福區(qū)', value: 3,height:4.5},
{name:'天心區(qū)', value: 4,height:1.5},
{name:'雨花區(qū)', value: 5,height:5.5},
{name:'望城區(qū)', value: 6,height:3.5},
{name:'長沙縣', value: 7,height:2.5},
{name:'寧鄉(xiāng)縣', value: 8,height:4.5},
{name:'瀏陽市', value: 9,height:5.5}
];
var option = {
// backgroundColor: "#333",
geo3D:[{
show:true,
type:'map',
map:'cs',
symbolSize: 1300,
// environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0, color: '#00aaff' // 天空顏色
// }, {
// offset: 0.7, color: '#998866' // 地面顏色
// }, {
// offset: 1, color: '#998866' // 地面顏色
// }], false),
environment:'../images/shine.jpg',
groundPlane: {
show: false,
color: "#0080FF"
},
shading: 'realistic',
// backgroundColor:'red',
itemStyle: {
areaColor: '#fff',
opacity:1,
borderColor: "rgba(100,149,237,1)",
borderWidth: 2
},
label: {
show:true,
textStyle: {
color: '#ff0000'
}
},
emphasis:{
label:{
show:true,
distance: 2
//formatter: ''
},
itemStyle:{
color:'#EF7E10',
opacity:1
}
},
instancing: false,
width: "100%",
height: "100%",
boxWidth: 160,
boxHeight: 2,
regions: dt
}],
series:[{
bevelSmoothness: 50,
type: "bar3D",
coordinateSystem: "geo3D",
backgroundcolor:'blcak',
data:[{
name:'芙蓉區(qū)',value:[112.988094,28.193106,2.5],itemStyle: {
color: "#dd6b66"
}},
{name:'岳麓區(qū)',value:[112.911591,28.213044,2.5],itemStyle: {
color: "#759aa0"
}},
{name:'開福區(qū)',value:[112.985525,28.201336,2.5],itemStyle: {
color: "#e69d87"
}},
{name:'天心區(qū)',value:[112.97307,28.192375,2.5],itemStyle: {
color: "#8dc1a9"
}},
{name:'雨花區(qū)',value:[113.016337,28.109937,2.5],itemStyle: {
color: "#ea7e53"
}},
{name:'望城區(qū)',value:[112.819549,28.347458,2.5],itemStyle: {
color: "#eedd78"
}},
{name:'長沙縣',value:[113.080098,28.237888,2.5],itemStyle: {
color: "#73a373"
}},
{name:'寧鄉(xiāng)縣',value:[112.553182,28.253928,2.5],itemStyle: {
color: "#73b9bc"
}},
{name:'瀏陽市',value:[113.633301,28.141112,2.5],itemStyle: {
color: "#7289ab"
}
}],
maxHeight: 20,
minHeight:0,
barSize: 4
}]
};
$.get('../json/cs.json', function (chinaJson) {
echarts.registerMap('cs', chinaJson);
var chart = echarts.init(document.getElementById('mp'));
chart.setOption(option);
})
</script>
</body>
</html>效果圖：
總結(jié)
到此這篇關(guān)于Echarts地圖實例詳解的文章就介紹到這了,更多相關(guān)Echarts地圖詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
原生JS實現(xiàn)輪播效果+學前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)輪播效果+學前端的感受(防止走火入魔)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript原型式繼承實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
Fixie.js 自動填充內(nèi)容的插件，需要的朋友可以參考下2012-06-06
這篇文章主要介紹了JavaScript輸入郵箱自動提示實例代碼，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了javascript事件冒泡原因、顯示效果及阻止冒泡的方法,需要的朋友可以參考下2016-06-06
javascript權(quán)威指南 學習筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》，變量作用域這一章，看得真的有點累。不過，收獲還是多多。2011-09-09
這篇文章主要介紹了用json方式實現(xiàn)在javascript / js 中建立一個map,需要的朋友可以參考下2014-05-05
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。本文給大家介紹BootStrap制作導航條實例代碼，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了JS實現(xiàn)css hover操作的方法,涉及javascript事件響應及頁面元素css屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04
關(guān)于document.cookie的使用javascript
構(gòu)造通用的cookie處理函數(shù) cookie的處理過程比較復雜，并具有一定的相似性。因此可以定義幾個函數(shù)來完成cookie的通用操作，從而實現(xiàn)代碼的復用。2010-10-10