基于echarts插件的多省份展示

最近拿到了一个新需求，动态的展示指定城市的仪器在线数（之前已部署仪器监控设备）并做一个动态的展示。因为之前做过基于echarts展示全国的数据，所以还是打算用echarts插件来做。先展示效果图如下：只显示了广东和海南两个省份的地图，鼠标悬浮于城市名称，系统会自动展示该城市仪器在线数的明细信息，左下角实时展示仪器上线下线的动态变化。（考虑到相关政策原因，遵守国家《测绘法》规定，界面增加了鼠标滚动放大缩小功能，缩小至正常时可查看下方三沙市及诸岛信息）。

echarts目前配置显示地图类型（全国地图/省份地图/世界地图）的json配置为：

...
geo: {
       map: 'citymap',
       //设置当前视角的中心点，用经纬度表示
       center: [110.73,20.53],
       label: {
         emphasis: {
            show: true
         }
       },
       roam: false,
       zoom: 3,
       itemStyle: {
          normal: {
              areaColor: '#323c48',
              borderColor: '#111'
           },
           emphasis: {
              areaColor: '#2a333d'
           }
        }
},
...

geo中有个map属性，这里可以指定为'china'或者'hainan'或者‘guangdong’等等，当然指定之前需要引入官方的js文件，如china.js, hainan.js, guangdong.js等（echarts官方已不再提供这些js文件的下载，如需要可留言）。js文件中的核心方法是echarts.registerMap('china', '......')，省略号里边是json格式的坐标信息，坐标信息是压缩过的（采用的压缩算法没怎么研究过，整个china.js60k，和json格式大小差不多）。该核心方法实现了向echarts中注册坐标信息的功能，echarts就是根据这些经纬度信息绘制出了china和各个省份的边界、轮廓等。

geo.map的属性指定“一类”地图很方便，直接拿现成的东西用即可。但对于多个省份则无法直接指定，需要绕一下。解决思路如下：重写js文件，在该js文件中合并了广东和海南的坐标信息（guangdong.js和hainan.js）并在核心方法registerMap中注册为'citymap',将该js文件保存为citymap.js并引入项目。

如上述代码段所示，指定geo.map的属性为'citymap'，此时页面中就只显示了广东和海南两个省份的地图。

这里需要注意下，在地图中海南省南边会有很大面积的群岛（南海诸岛是我国领土神圣不可侵犯，包括东沙群岛、西沙群岛、中沙群岛、南沙群岛），如下图所示。

这样看起来数据效果不好。

指定geo.center属性中指定当前视角的中心点，用经纬度表示。

指定geo.zoom：3属性对视角范围内的地图进行放大处理。

指定geo.roam:'scale'支持通过滚动鼠标放大或缩小视角。