基于echarts插件的多省份展示

最新推荐文章于 2024-08-05 05:00:00 发布

程序员爱美食

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.9k

点赞数

分类专栏： echarts插件文章标签： echarts 多省份展示

本文链接：https://blog.csdn.net/yeh201111/article/details/87181034

版权

本文介绍如何利用Echarts插件动态展示多个省份的仪器在线数，特别是广东和海南。通过重写js文件，合并省份坐标信息并注册为'citymap'，在Echarts中仅显示这两个省份。同时，调整geo.center和geo.zoom属性以优化展示效果，并启用geo.roam以支持地图缩放。

摘要由CSDN通过智能技术生成

最近拿到了一个新需求，动态的展示指定城市的仪器在线数（之前已部署仪器监控设备）并做一个动态的展示。因为之前做过基于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'
           },
           emphas