關於echarts3地圖下鑽省市
最近關於echarts3弄了個地圖下鑽，也許是由於運氣很差，開始上來須要傳遞到的城市是成都，結果成都地圖（js）加載下來老是擠到了一塊兒，好尷尬，各方實驗查找後發現原來是js文件中，成都市地圖有個縣市並無畫出來，致使比例不正常。。。。要是有作成都的，須要注意下。。下面直接鋪上三連跳下鑽地圖吧。。javascript
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts 地圖展現</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<body>
<!--定義頁面圖表容器-->
<!-- 必須制定容器的大小（height、width） -->
<div id="maps" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsProvice" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsCity" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="mapjs/china.js"></script>
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var myChartMap = echarts.init(document.getElementById('maps'));
var option = {
title: {
text: '全國態勢圖',
subtext: '進入省市可詳細查看',
x: 'center',
textStyle: {
color: '#404a59'
}
},
legend: {
orient: 'vertical',
x: 'left',
data: ['安全狀態']
},
dataRange: {
orient: 'vertical',
x: 'left',
min: 0,
max: 1000,
color: ['orange', 'yellow'],
text: ['高', '低'], // 文本，默認爲數值文本
},
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全態勢',
type: 'map',
mapType: 'china',
x: '5%',
y: 'center',
roam: false,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: [{
name: '北京',
selected: true,
value: 100
}, {
name: '天津',
selected: false
}, {
name: '上海',
selected: false
}, {
name: '重慶',
selected: true,
value: 100
}, {
name: '河北',
selected: false
}, {
name: '河南',
selected: false
}, {
name: '雲南',
selected: false
}, {
name: '遼寧',
selected: true,
value: 100
}, {
name: '黑龍江',
selected: false
}, {
name: '湖南',
selected: true,
value: 1000
}, {
name: '安徽',
selected: false
},
]
}],
animation: false
};
myChartMap.setOption(option, true); //顯示國家地圖
var myChartProvice = echarts.init(document.getElementById('mapsProvice'));
var myChartCity = echarts.init(document.getElementById('mapsCity'));
if (selectProvice = "undefined") {
selectProvice = "四川";
selectCity = "成都市";
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOpt();
setOptCity();
}
myChartMap.on('mapselectchanged', function(param) { //單擊省份事件
selectProvice = param.batch[0].name;
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
setOpt();
})
myChartProvice.on('mapselectchanged', function(param) {
selectCity = param.batch[0].name;
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOptCity();
});
function setOpt() {
var option = {
title: {
text: selectProvice + '地區詳情',
x: 'center',
textStyle: {
color: 'black'
}
},
dataRange: {
x: '-3000px',
y: 'bottom',
splitList: [{
start: 41,
color: 'rgba(182,132,220,0.8)'
}, {
start: 21,
end: 40,
color: 'rgba(255,108,96,0.8)'
}, {
start: 11,
end: 20,
color: 'rgba(252,179,34,0.8)'
}, {
start: 5,
end: 10,
color: 'rgba(89,172,226,0.8)'
}, {
start: 0,
end: 4,
label: '<4',
color: "rgba(120,205,81,0.8)"
},
],
//
textStyle: {
color: 'white',
},
},
roam: true,
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全態勢',
type: 'map',
mapType: selectProvice,
x: 'center',
y: 'center',
// roam: true,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: ""
}],
animation: false,
}
myChartProvice.setOption(option, true);
}
function setOptCity() {
var option = {
title: {
text: selectCity + '地區詳情',
x: 'center',
textStyle: {
color: 'black'
}
},
roam: true,
dataRange: {
x: '-3000px',
y: 'bottom',
splitList: [{
start: 41,
color: 'rgba(182,132,220,0.8)'
}, {
start: 21,
end: 40,
color: 'rgba(255,108,96,0.8)'
}, {
start: 11,
end: 20,
color: 'rgba(252,179,34,0.8)'
}, {
start: 5,
end: 10,
color: 'rgba(89,172,226,0.8)'
}, {
start: 0,
end: 4,
label: '<4',
color: "rgba(120,205,81,0.8)"
}, ],
textStyle: {
color: 'white',
},
},
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全態勢',
type: 'map',
mapType: selectCity,
x: 'center',
y: 'center',
// roam: true,
itemStyle: {
normal: {
label: {
show: true
},
},
emphasis: {
label: {
show: true
}
}
},
selectedMode: 'single',
data: ""
}],
animation: false,
}
myChartCity.setOption(option, true);
}
</script>
</body>
</html>
地圖js代碼如今已經不支持下載了，要結合百度地圖使用，若是有須要的同窗，請重視中國領土完整，部分市縣數據缺失，請注意！css
展現效果請狂戳： https://wanglaowuplus.github.io/echarts-maps/html
下載請走這裏：（https://github.com/wanglaowuPlus/echarts-maps）！java
若是此文章對你有幫助，請在github 上點亮你的小星星！！jquery
相關文章
- 1. 關於echart3地圖下鑽省市區縣
- 2. 關於echarts地圖下鑽。
- 3. 基於高德地圖爲底圖實現全國、省、地級市下鑽
- 4. Echarts 切換地圖下鑽各省份地市
- 5. Echarts的省市區多級地圖下鑽和返回
- 6. 詳解vue中使用echarts地圖實現上鑽下鑽的可視化 三級下鑽 省＞市＞縣
- 7. echarts 實現省市區下鑽
- 8. echarts 地圖下鑽
- 9. 如何製做省市級別上鑽下取的在線疫情地圖
- 10. 省市地圖查詢
- 更多相關文章...
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • R 繪圖 - 餅圖 - R 語言教程
- • NewSQL-TiDB相關
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
