echarmap使用教程

1. 导入地图显示所需要的js包。
<script src="tool/echarts.js"></script>
<script src="map/js/china.js"></script>
<script src="map/js/福建.js"></script>
<script src="map/js/fujian.js"></script>
<script src="map/js/quanzhou.js"></script>

<script src="map/js/map.js"></script>

2.  更改js中的注册map。如下图显示

注册的名字是索引的关键

3  设置对应的DIV作为显示

  <div id="map-wrap" style="height:500px;width:50%">

        <!-- 这里以后是地图 -->

</div>

4.引入以下的js

//获取所在div

varmapChart = echarts.init(document.getElementById('map-wrap'));

//假数据，name与js中对应

varmyData = [

               {name: '北京',selected:false,value:1},

               {name: '天津',selected:false,value:2},

               {name: '上海',selected:false,value:3},

               {name: '重庆',selected:false,value:4},

               {name: '河北',selected:false,value:5},

               {name: '河南',selected:false,value:6},

               {name: '云南',selected:false,value:7},

               {name: '辽宁',selected:false,value:8},

               {name: '黑龙江',selected:false,value:9},

               {name: '湖南', selected:false,value:10},

               {name: '安徽',selected:false,value:11},

               {name: '山东',selected:false,value:12},

               {name: '新疆',selected:false,value:13},

               {name: '江苏',selected:false,value:14},

               {name: '浙江',selected:false,value:15},

               {name: '江西',selected:false,value:16},

               {name: '湖北',selected:false,value:17},

               {name: '广西',selected:false,value:18},

               {name: '甘肃',selected:false,value:19},

              {name: '山西', selected:false,value:20},

 

               {name: '香港',selected:false,value:33},

               {name: '澳门',selected:false,value:34},

                       {name: '南海诸岛',selected:false,value:34},

                        {name: '泉州市',selected:false,value:134},

                              {name: '安溪县',selected:false,value:84}

           ]//各省地图颜色数据依赖value;

 

//地图的相关设置

varoption = {

 

  //设置散点

  series: [

       {

           name: '随机数据',

           type: 'map',

           mapType: 'china',

           selectedMode : 'single',

             

           itemStyle:{

               normal:{

label:{show:true},

borderWidth:1,//省份的边框宽度

                   borderColor:'#f60',//省份的边框颜色

           color:'#ece2df'//地图背景颜色

//areaStyle:{color:'#f60'}//设置地图颜色

},

               emphasis:{label:{show:true}}

           },

           data:myData

       }

   ],

  //右边显示的色差表

 visualMap: {

        type: 'continuous', // 连续型

        min: 0,               // 值域最小值，必须参数

        max: 200,            // 值域最大值，必须参数

        calculable: true,    // 是否启用值域漫游

        inRange: {

                 color:['#50a3ba','#eac736','#d94e5d']

                             // 指定数值从低到高时的颜色变化

          }

      

         }

};

//加载设置

mapChart.setOption(option);

 

//设置点击事件

mapChart.on("click",chartClick);

 

 function chartClick(param){

  mapChart.setOption(option, false);

 

//获取省份的名字

 var selectedPro = param.name;

 alert(selectedPro);

 

//对原地图进行更新

 option.series[0] = {

        name: selectedPro,

        type: 'map',

        mapType: selectedPro,

            selectedMode : 'single',

        itemStyle:{

              normal:{

label:{show:true},

borderWidth:1,//省份的边框宽度

                   borderColor:'#f60',//省份的边框颜色

           color:'#ece2df'//地图背景颜色

//areaStyle:{color:'#f60'}//设置地图颜色

},

               emphasis:{label:{show:true}}

        },

        mapLocation: {

            x: '35%'

        },

        roam: true,

      data:myData,

 

         visualMap: {

        type: 'continuous', // 连续型

        min: 0,               // 值域最小值，必须参数

        max: 200,            // 值域最大值，必须参数

        calculable: true,    // 是否启用值域漫游

        inRange: {

                 color:['#50a3ba','#eac736','#d94e5d']

                             // 指定数值从低到高时的颜色变化

          }

            }

 

    };

    mapChart.setOption(option, true);

 }

</script>