ECHARTS-MAP的使用: 中国地图及省份边界的查看

地图引入方式及demo详解:

官方说明：http://ecomfe.github.io/echarts-map-tool/
ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

我这次的demo用的就是第一种方式，第二种方式出现的跨域问题可用jsonp来解决。实现的效果是页面初始化时，直接渲染中国地图，未被鼠标选中时默认#CECECE，鼠标悬浮或者选中时显示#C8A5DF。
如图所示：

当点击某个省份后，进入该省份的边界地图查看各区：同样未被鼠标选中时默认#CECECE，鼠标悬浮或者选中时显示#C8A5DF。
如图所示：

---

代码讲解

一：中国地图的初始化:
加载2个必要脚本
1、echarts.js：引入echarts库，echarts3的引入方式很简单，以script形式引入即可
2、china.js：china.js已经注册了地图的名字为china及其中国地图的数据。

 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

页面需要定义一个装载地图容器的div

  //container 为div的id 
  var dom = document.getElementById("container");
  //得到echarts的实例对象
  var myChart = echarts.init(dom); 
  //关键是配置项
   var option ={

        series : [
        {
            name: '网点个数',
            //series[i]-map:系列列表。每个系列通过 type 决定自己的图表类型,此处是地图类型
            type: 'map', 
            //这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'
            mapType: pName,
            //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
            itemStyle: {
            //normal 是图形在默认状态下的样式；
                normal: {
                    show: true,
                    areaColor:"#CECECE",
                    borderColor:"#FCFCFC",
                    borderWidth:"1"
                },
                //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                emphasis: {
                    show: true,
                    areaColor:"#C8A5DF",
                }
            },
            //图形上的文本标签，可用于说明图形的一些数据信息
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },

        }],
        title : {
        text: pName,
        left: 'center'
       } 
       };
        //使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);

---

二：各省份地图的展示:
为echarts实例注册点击事件：ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 dispatchAction 后触发的事件。
这里是点击图形触发。得到的param 既是各身份的名称，我们可以实现定义2个数组。方便动态加载存放本地省份数据的js。代码如下：

 //定义全国省份的数组
 var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
 var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

  myChart.on('click', function (param) {

              // alert(param.name);
              //遍历取到provincesText 中的下标  去拿到对应的省js
              for(var  i= 0 ;i<provincesText.length;i++){

                   if(param.name == provincesText[i]){
                       //显示对应省份的方法
                        showProvince(provinces[i]) ;

                        break ;
                   }

              }         
         });


 //展示对应的省
       function  showProvince(pName){

       //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。 
       loadBdScript('$'+pName+'JS','province/'+pName+'.js',function(){

             //初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
              initEcharts(pName) ; 

        });
       }

//加载对应的JS
       function loadBdScript(scriptId, url, callback) {
         var script = document.createElement("script")  
            script.type = "text/javascript";  
            if (script.readyState){  //IE  
                script.onreadystatechange = function(){  
                    if (script.readyState == "loaded" || script.readyState == "complete"){  
                        script.onreadystatechange = null;  
                        callback();  
                    }  
                };  
            } else {  //Others  
                script.onload = function(){  
                    callback();  
                };  
            }  
            script.src = url; 
            script.id = scriptId;
            document.getElementsByTagName("head")[0].appendChild(script); 
        };