世界地图 echarjs

立即下载用AI写一个

发布时间：2021-05-07

16人 | 浏览：3441次 | 收藏 |

技术：echarjs

运行环境：浏览器，IE9、10、11，Chrome，fireworld

概述

世界地图，JQ+echarjs，实现世界地图，鼠标悬浮，显示国家范围及鼠标hover颜色，显示国家名称及需要渲染的数据，点击指定的国际，可以弹窗（弹窗目前是中国，可自行添加其他国家），弹窗后他业务逻辑可以自行拓展

详细

###效果图：
![](/contentImages/image/20210430/aj7FP4mp5LgY7tougq7.png)

###项目目录结构：
![](/contentImages/image/20210430/dHSxKfHyNW3YPSpwyNp.png)

### 第一步：引入JS
`<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>  `
`<script src="js/world.js"></script> `
`<script src="js/index.js"></script>`

### 第二步：CSS样式
`
/*最外层m-wrold GO*/
body{ background: radial-gradient(circle,#047192 0,#000 100%); }
.m-world{ position: relative; }
.m-world .main{ width: 100%; height:100vh; overflow:hidden;}
.window li{ color: red; }
.window a{ color: #ffffff; }
.m-world .info{  display: none;
background: radial-gradient(circle,#05d9dd 0,#03253e 100%); 
    position: fixed; top: 50px; right: 50px; z-index: 99; border: 1px solid #03ebef; width: 250px; height: 300px; overflow-x:hidden; padding: 20px; }
.m-world .info.show{  display: block;}
.m-world .window{ margin:1px;width: 248px;  } 
.m-world .window li{ color: #fff; list-style: none; } 
.m-world .window em{ font-style: normal; } 
/*滚动条样式 GO*/
    ::-webkit-scrollbar {
        width:9px;
        height:9px;
    }
    ::-webkit-scrollbar-track {
        width: 6px;
        background-color:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
    ::-webkit-scrollbar-thumb {
        background-color:#606d71;
        background-clip:padding-box;
        min-height:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
    ::-webkit-scrollbar-thumb:hover {
         background-color:#fff;
    }
`

样式如下图：

![](/contentImages/image/20210430/ZKRR2fZuIacyCrqRPAi.png)

### 第三步：HTML

`<div class="m-world">`
  `      <div class=" info " id="J-info"></div>`
  `    <div id="main" class="main"></div> `
` </div>`

HTML如下图：

![](/contentImages/image/20210430/GOiFZ94oE5I1yROEZas.png)

### 最后：随便使用↓
运行index.html

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

世界地图 echarjs

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子