Echarts 点击地图区域弹出框
点击地图里面的区域,弹出信息
html
准备两个容器,一个装地图,一个装弹出框
<!-- 地图 -->
<div id="map" style="height: 600px;width: 600px;"></div>
<!-- 弹出框 -->
<div id="box" >
<span id="box-title"></span>
</div>
css
#box{
display:none;
background-color: goldenrod;
width: 180px;
height: 30px;
}
#box-title{
display:block;
}
引入文件
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/chongqing.js" type="text/javascript" charset="utf-8"></script>
<script src="js/map.js" type="text/javascript" charset="utf-8"></script>
地图(重庆地图chongqing.js)需要去官网下,不过最近好像下不了了。
map.js
var myChart = echarts.init(document.getElementById("map"));
var option = {
title: {
text : "重庆市脱贫地区分布总览",
subtext : "当前区域信息",
top:"20",
textStyle: {
fontSize: 18,
color: "#333" // 主标题文字颜色
}
},
series: [
{
name: "数据名称",
type: "map",
mapType: "重庆",
top:"65",
zoom:1.1,
selectedMode : "single",
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fbfdfe"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: "#0550c3",//区域边框颜色
areaColor:"#4ea397",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: "#4b0082",
areaColor:"#ece39e",
}
},
}]
};
myChart.setOption(option);
myChart.on("click", function (params) {//点击事件
if (params.componentType === "series") {
var provinceName =params.name;
$("#box").css("display","block");
$("#box-title").html(provinceName);
}
});
效果图:
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: ECharts使用心得
- 下一篇: echarts图例颜色与地图底色