首发于：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
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
