echerts地图区域划分不明问题示例:
无缺损中国地图完整代码点击链接下载(主要用于获取文章中使用的china.js):
https://download.csdn.net/download/leng0920/44917933
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>2021年度VR/AR企业图谱 </title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 335px;
height: 475px;
margin:100px auto 0 auto;
}
#container canvas {
top: auto;
bottom: 0 !important;
}
#container div {
border: 1px solid #48EFFF !important;
}
#mapDialogbox {
display: none;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#mapDialogCont {
width: 315px;
height: 203px;
background: #01257E;
border-radius: 12px;
border: 1px solid rgba(72, 239, 255, 0.8);
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
}
#mapDialogTitle {
display: block;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
letter-spacing: 1px;
padding: 33px 0 20px 0;
}
#mapDialogCont .vrar-enterprise-atlas {
font-size:16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 25px;
letter-spacing:1px;
text-align: center;
}
#mapDialogCont .view-directory-btn {
width: 165px;
height: 40px;
background: #01257E;
border-radius: 4px;
border: 1px solid #48EFFF;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #48EFFF;
margin: 30px auto 0 auto;
}
.flex-center-center{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<!-- 地图 -->
<div id="container">
</div>
<!-- 弹出框 -->
<div id="mapDialogbox">
<div id="mapDialogCont">
<div id="mapDialogTitle"></div>
<div class="vrar-enterprise-atlas">VR/AR企业图谱</div>
<div class="view-directory-btn flex-center-center" onclick="selectDetail()">查看名录</div>
</div>
</div>
</div>
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script type="text/javascript">
// 全国省份列表
var dataMap = [{
name: '北京',
selected: false
},
{
name: '天津',
selected: false
},
{
name: '上海',
selected: false
},
{
name: '重庆',
selected: false
},
{
name: '河北',
selected: false
},
{
name: '河南',
selected: false
},
{
name: '云南',
selected: false
},
{
name: '辽宁',
selected: false
},
{
name: '黑龙江',
selected: false
},
{
name: '湖南',
selected: false
},
{
name: '安徽',
selected: false
},
{
name: '山东',
selected: false
},
{
name: '新疆',
selected: false
},
{
name: '江苏',
selected: false
},
{
name: '浙江',
selected: false
},
{
name: '江西',
selected: false
},
{
name: '湖北',
selected: false
},
{
name: '广西',
selected: false
},
{
name: '甘肃',
selected: false
},
{
name: '山西',
selected: false
},
{
name: '内蒙古',
selected: false
},
{
name: '陕西',
selected: false
},
{
name: '吉林',
selected: false
},
{
name: '福建',
selected: false
},
{
name: '贵州',
selected: false
},
{
name: '广东',
selected: false
},
{
name: '青海',
selected: false
},
{
name: '西藏',
selected: false
},
{
name: '四川',
selected: false
},
{
name: '宁夏',
selected: false
},
{
name: '海南',
selected: false
},
{
name: '台湾',
selected: false
},
{
name: '香港',
selected: false
},
{
name: '澳门',
selected: false
}
]
// 需要在页面上直接标记出来的城市
var specialMap = ['湖北','广东'];//默认选中城市
// 对dataMap进行处理，使其可以直接在页面上展示
for (var i = 0; i < specialMap.length; i++) {
for (var j = 0; j < dataMap.length; j++) {
if (specialMap[i] == dataMap[j].name) {
dataMap[j].selected = true;
break;
}
}
}
// 绘制图表，准备数据
var option = {
series: [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'multiple',
zoom: 5, //默认放大3倍显示
roam: true, //自由缩放(手机版可以通过手指缩放)
left: -100,//控制地图的显示位置
top: 100,//控制地图的显示位置
label: {
normal: {
show: true, //显示省份标签
areaColor: '#01217D',
textStyle: {
color: "#01217D",
fontWeight: "bold"
}, //省份标签字体颜色
},
emphasis: {
show: true, //对应的鼠标悬浮效果
textStyle: {
color: "#48EFFF",
fontWeight: "bold"
}, //省份标签字体颜色
}
},
itemStyle: {
normal: {
borderWidth: 1, //区域边框宽度
borderColor: '#00B2C', //区域边框颜色
areaColor: "#4985DB", //区域颜色
},
emphasis: {
borderWidth: 1,
borderColor: '#48EFFF',
areaColor: "#012696",
}
},
data: dataMap,
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
myChart.on('click', function (params) {
//点击事件
if (params.componentType === 'series') {
var provinceName = params.name;
$('#mapDialogbox').css('display', 'block');
$("#mapDialogTitle").html(provinceName);
}
});
function selectDetail(params) {
$('#mapDialogbox').css('display', 'none');
}
</script>
</body>
</html>效果(echerts湖南的边线存在划分不明的问题,这个没有问题):
类似链接(侵权联系删除):
扫一扫
4356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
