echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
2024-06-05 20:38:42
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
- 一、图片效果
- 二、 代码
一、图片效果
由于本地图片上传失败，无法展示完整的，不过是在此图的基础上加了轮播和底纹
二、 代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 此处js文件是本地引入，也可通过cdn方式引入 --><!-- 自行查找 ，链接在这： https://www.bootcdn.cn/ --><script type="text/javascript" src="./echarts/echarts-4.9.0/echarts.min.js"></script><script type="text/javascript" src="./echarts/echarts-gl.min.js"></script><script type="text/javascript" src="./other/jquery-1.8.3.min.js"></script></head><body><div id="main" style="overflow: hidden;height: 100vh;width: 100%;"></div><img class="img" style="display: none;"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd00.paixin.com%2Fthumbs%2F1711618%2F12817405%2Fstaff_1024.jpg&refer=http%3A%2F%2Fd00.paixin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668149863&t=ae2c0cbdb0017b607bc941a15374d6ae"alt="" srcset=""></body><style>* {margin: 0;padding: 0;}</style><script type="text/javascript">// 在此处将所需要的地图数据导入即可// 获取json数据下载地址(两处都可下载，阿里云服务最近好像在升级)：// http://datav.aliyun.com/tools/atlas/#&lat=26.942316376557397&lng=106.598937&zoom=7// https://hxkj.vip/demo/echartsMapvar uploadedDataURL = "./echarts/hangzhou.json";var myChart = echarts.init(document.getElementById('main'));var img = document.querySelector('.img')$.getJSON(uploadedDataURL, function(geoJson) {console.log('geoJson', geoJson)echarts.registerMap('hanzhou', geoJson);myChart.hideLoading();var mapDate = [{name: '滨江区',value: [120.185306, 30.18046, 29999]},{name: '拱墅区',value: [120.160939, 30.328885, 29999]},{name: '钱塘区',value: [120.493972, 30.322904, 29999]},{name: '上城区',value: [120.219068, 30.288987, 29999]},{name: '西湖区',value: [120.08362, 30.200766, 29999]}];option = {backgroundColor: '#020933',title: {top: 20,text: '“困难人数” - 杭州市',subtext: '',x: 'center',textStyle: {color: '#ccc'}},tooltip: {trigger: 'item',formatter: function(params) {// console.log(params)//由于下方的data数据拿错了导致这里显示undefine，在此重新修改了一下 return params.data.name + ' : ' + params.data.value[2];}},visualMap: {min: 0,max: 1000000,right: 100,seriesIndex: 1,type: 'piecewise',bottom: 100,textStyle: {color: '#FFFF'},splitList: [{gt: 50000,color: '#F5222D',label: '困难人数大于5万人'}, //大于5万人{gte: 30000,lte: 50000,color: '#FA541C ',label: '困难人数3-5万人'}, //3-5万人{gte: 10000,lte: 30000,color: '#FA8C16',label: '困难人数1-3万人'}, //1-3万人{lte: 10000,color: '#fbe1d6',label: '困难人数小于1万人'}]},geo: {map: 'hanzhou',aspectScale: 0.75, //长宽比zoom: 1.1,roam: false,itemStyle: {normal: {areaColor: '#013C62',shadowColor: '#182f68',shadowOffsetX: 0,shadowOffsetY: 25},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green',label: {show: false}}}},series: [{type: 'map',roam: true,label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#2ab8ff',borderWidth: 1.5,// areaColor: '#12235c'// 此处修改地图的底纹// 注：官方指定支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串// 在上方元素添加img图片然后将获取到ref赋值写在此处即可areaColor: {image: img,repeat: 'repeat'}},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green'}},zoom: 1.1,roam: false,map: 'hanzhou', //使用data: mapDate // 此处应为轮播地图显示的数据},{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',rippleEffect: {period: 15,scale: 4,brushType: 'fill'},hoverAnimation: true,itemStyle: {normal: {color: '#ffff',shadowBlur: 10,shadowColor: '#333'}},data: mapDate //此处为鼠标悬浮上去之后展示的数据}]};// 可以使用阿里云提供的地图数据/**此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。http://echarts.baidu.com/option.html#series-map.geoIndex并且加了pin气泡图标以示数值大小*/// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";// myChart.showLoading();let index = -1;var timer = setInterval(function() {// 隐藏提示框myChart.dispatchAction({type: 'hideTip',seriesIndex: 0,dataIndex: index});// 显示提示框myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: index + 1});// 取消高亮指定的数据图形myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index});// 高亮指定的数据图形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: index + 1});index++;if (index > 13) {index = -1;}}, 2000);myChart.on('mousemove', function(e) {clearInterval(timer);myChart.dispatchAction({type: 'downplay',seriesIndex: 0});myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: e.dataIndex});}); //---------------------------------------------鼠标移入静止播放myChart.on('mouseout', function(e) {clearInterval(timer);myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: e.dataIndex}); //鼠标移出后先把上次的高亮取消timer = setInterval(function() {// 隐藏提示框myChart.dispatchAction({type: 'hideTip',seriesIndex: 0,dataIndex: index});// 显示提示框myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: index + 1});// 取消高亮指定的数据图形myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index});// 高亮指定的数据图形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: index + 1});index++;if (index > 13) {index = -1;}}, 2000);});myChart.setOption(option);});window.addEventListener('resize', function() {myChart.resize()})</script>
</html>原文链接： https://www.makeapie.cn/echarts_content/xr1Ilwr5PO.html
代码中间部分加了注释可以看一下
新手上路，还请多多指教！
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！相关推荐
- 用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
- android 原生开发 3d地图 下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖 学生DW网页设计作业源码 web课程设计网页规划与设计 大学生个人网站作业模板
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
- 原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录 功能简介 项目准备 项目说明 方案一:源代码 CSS样式 HTML结构 JS逻辑 方案二:源代码 CSS样式 HTML结构 JS逻辑 功能简介 页面展示 该项目功能实现: 无限滚动轮播图 j ...
- HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖 学生DW网页设计作业源码 web课程设计网页规划与设计 大学生个人网站作业模板...
HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
- echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
- c语言 feof_C语言 实现简单功能的12306火车售票系统【附源码】
本文福利在文末! 学习迷茫遇到问题了吗?现在关注微信公众号:C程序编程 免费获取进阶指导,资料工具以及源码 程序设计要求用C语言写一个简单的火车售票系统,主要实现的功能为: 录入班次信息 浏览班次信息 ...
- 使用高德地图微信小程序SDK开发案例-输入提示（附源码）
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例. 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标. 当然 ...
- 6个绚丽时尚的Web前端3D效果展示（附源码）
作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大 ...
最新文章
- Fastadmin 写关联命名时，最好前后台用同一个model，方便管理（会出现命名空间问题）...
- leetcode 3.无重复字符的最长子串（中等）
- “主要的编程范型”及其语言特性关系（多图）
- 点对点信道互连以太网实验_以太网防雷器通讯参数测试（二）——防雷器对高速链路影响的参数...
- JAVA操作HDFS API(hadoop)
- linux-basic(10)vim程序编辑器
- mysql originator_MySQL数据库事件调度(Event)
- 【玩转Golang】 自定义json序列化对象时，非法字符错误原因
- oracle not aviable,ORA-01034: ORACLE not available
- 网页游戏为什么容易赚钱？(From:07073)
- 2017CCPC哈尔滨 A：Palindrome（manacher+树状数组）
- 【Linux】监视CPU、GPU使用情况
- 惠普541笔记本更换内存条_惠普541笔记本如何样啊?有什么缺点和优点?, 真心不会...
- 使用minizip解压缩多个文件（基于zlib）
- 如何准备测试数据？用 DbUnit 和 Anthill 控制测试环境
- 百货商城销售管理系统
- 《惢客创业日记》2019.03.24（周日）《惢客》011 目前的市场现状是什么样的？(二)
- windbg wt命令
- 查看自己电脑是否有GPU查看电脑GPU型号
- 新玺配资：金融之后地产也来凑热闹 风格转向蓝筹