Echarts 点击地图区域弹出框

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

html 
准备两个容器，一个装地图，一个装弹出框

<!-- 地图 -->
        <div id="map" style="height: 600px;width: 600px;"></div>
        <!-- 弹出框 -->
        <div id="box" >
            <span id="box-title"></span>
        </div>

• 1
• 2
• 3
• 4
• 5
• 6

css

#box{
                display:none;
                background-color: goldenrod;
                width: 180px;
                height: 30px;
            }
            #box-title{
                display:block;
            }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

引入文件

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

• 1
• 2
• 3
• 4

地图（重庆地图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);

            }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57

效果图：