牛骨文教育服务平台(让学习变的简单)
博文笔记

Echarts 点击地图区域弹出框

创建时间:2017-10-27 投稿人: 浏览次数:2757

点击地图里面的区域,弹出信息

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);

            }
});

效果图:
这里写图片描述
这里写图片描述

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。