首發於：http://www.meibug.net/web/128.html
使用EChats創建區縣地圖
最近需要做一個大數據展示平台，需求中要用到地圖展示，地圖可選由百度地圖，高德地圖，EChats
沒錯，我們可以使用圖表工具EChats也可以創建一個比較漂亮的地圖，甚至某些情況下比普通地圖更好用
前期准備
具體代碼
最簡配置
使用最少的配置實現一個地圖
index.html(html代碼)
<!DOCTYPE html>
<html lang="en" style="font-size: 24px;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>智慧平台</title>
<style>
body {
margin: 0;
padding: 0;
}
/* 地圖 */
.map {
height: 100vh;
display: flex;
flex-direction: column;
}
.map .chart {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 地圖 -->
<div class="map">
<div class="chart">
<div class="geo"></div>
</div>
</div>
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/echarts-4-7-all.js"></script>
<script src="./static/data/geojson-hn-xy.js"></script>
<script src="./static/js/index-min.js"></script>
</body>
</html>
注意下方導入的js，其中
<script src="./static/data/geojson-hn-xy.js"></script>是地圖數據，<script src="./static/js/index-min.js"></script>是echarts初始化及地圖配置
index-min.js：
var mapCharts = echarts.init($('.map .geo')[0])
echarts.registerMap('xinyang', xydata);
var series = [
{
type: 'map', // 固定為map
map: 'xinyang', // 地圖類型
},
]
var option = {
series: series
};
mapCharts.setOption(option);
預覽
特別注意：echart容器必須要有高度，如下方的
.map定義了height: 100vh特別注意：echart容器必須要有高度，如下方的
.map定義了height: 100vh特別注意：echart容器必須要有高度，如下方的
.map定義了height: 100vh
添加其他配置
新建index.js(echarts配置代碼)
var mapCharts = echarts.init($('.map .geo')[0]) // 初始化echarts
echarts.registerMap('xinyang', xydata); // 注冊數據，此數據在geojson-hn-xy.js中定義
// 地圖各個區縣需要展現的數據，需要和geojson-hn-xy.js中數據項對於
var areaData = [
{name: '浉河區', value: 200},
{name: '平橋區', value: 154},
{name: '羅山縣', value: 116},
{name: '息縣', value: 199},
{name: '光山縣', value: 140},
{name: '新縣', value: 106},
{name: '潢川縣', value: 176},
{name: '淮濱縣', value: 151},
{name: '商城縣', value: 152},
{name: '固始縣', value: 119}
]
// 參考資料https://www.echartsjs.com/zh/option.html#series-map
var series = [
{
name: 'xinyang',
type: 'map', // 固定為map
map: 'xinyang', // 地圖類型，這里的xinyang是自定義類型，需要和echarts.registerMap('xinyang', xydata)中一樣
zoom: 1, // 當前視角的縮放比例
roam: true, // 是否可移動縮放
scaleLimit: { // 縮放最大，最小值
max: 8,
min: 0.8
},
aspectScale: 1, // 長寬比，默認0.75
layoutCenter: ['50%', '50%'], // 地圖中心在屏幕中的位置
// layoutSize: 500, //地圖的大小
label: { // 圖形上的文本標簽
normal: {
show: true,
color: '#0692a4'
},
emphasis: {
color: '#0692a4'
}
},
itemStyle: { // 地圖區域的多邊形圖形樣式
normal: { // 地圖多邊形的樣式
areaColor: '#142957', // 地圖內充填顏色
borderColor: '#0692a4' // 地圖邊框顏色
},
emphasis: { // 鼠標移動到地圖上之后的樣式
areaColor: '#0b1c2d'
}
},
data: areaData // 上方定義的數據
},
]
var option = {
backgroundColor: '#080a20', // echarts的背景顏色
tooltip: { // 鼠標移入地圖后的提示框，參考(https://www.echartsjs.com/zh/option.html#tooltip)
trigger: 'item',
formatter: '{b}<br/>{c}',
},
series: series
};
mapCharts.setOption(option); // 注冊到echarts配置中
將html中代碼
<script src="./static/js/index-min.js"></script>
替換為
<script src="./static/js/index.js"></script>
預覽
代碼已上傳到gitee倉庫：
https://gitee.com/rick233/echarts-demo/tree/master/%E5%8C%BA%E5%8E%BF%E5%9C%B0%E5%9B%BE