echarts map地图添加背景图

给map地图添加了一个阴影3d的效果,添加一张背景图,给人感觉有3d的效果

具体配置如下:
html代码模块:

 <div class="echart_img" style="position: fixed; visibility: hidden;"></div><div id="map"></div>

在mounted方法里面给地图添加背景图

 mounted() {let mg = require("../../../../images/jsc/map.png")this.domImg = document.createElement('img')this.domImg.style.height = this.domImg.height = this.domImg.width = this.domImg.style.width = '7000px'this.domImg.src = mgdocument.querySelector('.main-map .echart_img').appendChild(this.domImg)setTimeout(() => {this.initMap();}, 500)},

echarts options配置如下:

var chart = this.echarts.init(document.getElementById("map"));var option = {grid: {top: '-20%',left: '0%'},geo: [{map: 'GD',aspectScale: 0.75,zoom: 0.65, // 比例调整layoutCenter: ['50%', '52%'],layoutSize: '100%',silent: true,roam: false,itemStyle: {normal: {areaColor: 'rgb(37, 104, 188)',borderColor: 'rgb(33, 91, 167)',borderWidth: 1},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green',label: {show: false}}},}],series: [{type: "map",map: "GD",roam: false, //是否开启鼠标缩放和平移漫游animationDurationUpdate: 0,zoom: 0.8,layoutSize: "100",label: {normal: {show: true,fontSize: 14,color: "#fff",},emphasis: {color: "#fff",},},itemStyle: {normal: {areaColor: {image: this.domImg,repeat: "repeat-x"},borderColor: "#678BBB", //省份边框颜色borderWidth: 2, // 省份边框宽度shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 0},emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(45, 124, 200, 1)' // 渐变起始颜色}, {offset: 1, color: 'rgba(75, 175, 247, 1)' // 渐变结束颜色}]},borderColor: "#fff", //省份边框颜色borderWidth: 1, // 高亮时的边框宽度},},select: {label: {show: true,color: "#fff",},itemStyle: {areaColor: "#123972", // 高亮时候地图显示的颜色borderWidth: 0, // 高亮时的边框宽度},},},],};// 使用刚指定的配置项和数据显示图表chart.setOption(option);

具体效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/12104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Autoware内容学习与初步探索(一)

0. 简介 之前作者主要是基于ROS2&#xff0c;CyberRT还有AutoSar等中间件完成搭建的。有一说一&#xff0c;这种从头开发当然有从头开发的好处&#xff0c;但是如果说绝大多数的公司还是基于现成的Apollo以及Autoware来完成的。这些现成的框架中也有很多非常好的方法。目前作者…

【Java的抽象类和接口】

1. 抽象类 1.1 抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果 一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 以上代码中…

Leaflet系列——【一】初识Leaflet与Leaflet视图操作

初识Leaflet&#xff08;vue3 &#xff09; 前言&#xff1a;当你熟悉了openlayer、mapbox、cesium等一些GIS框架之后&#xff0c;对于我们开发来说其实他们的本质就是往瓦片上面叠加图层、【点、线、面、瓦片、geoJson、热力图、图片、svg等等】都是一层层的Layer图层&#xf…

Ceph集群扩容及数据再均衡原理分析

用户文件在Ceph RADOS中存储、定位过程大概包括&#xff1a;用户文件切割成对象、对象映射到PG、PG分组PGP、PG映射到OSD。这些过程中&#xff0c;可能涉及了大量概念和变量&#xff0c;而其实它们大部分是通过HASH、CRUSH等算法计算出来的&#xff0c;初始参数可能也就只有这么…

sql实践

1.从excel导入数据 在excel导入数据时要先在数据库中创建对应的数据库表 CREATE TABLE your_table_name (crawl_datetime DATE,url CHAR(255),company_name CHAR(255),company_size CHAR(255),company_type CHAR(255),job_type CHAR(255),job_name CHAR(255),edu CHAR(255),e…

暗区突围TWITCH掉宝关联帐号不了 无法关联帐号 关联不上

Twitch&#xff0c;作为全球知名的游戏直播平台&#xff0c;常常携手热门游戏如《暗区突围》举办互动活动&#xff0c;为玩家带来独特的参与体验。在这个过程中&#xff0c;“绑定关联”成为了连接直播观众与游戏世界的桥梁。简单来说&#xff0c;Twitch绑定关联《暗区突围》指…

leetcode——链表的中间节点

876. 链表的中间结点 - 力扣&#xff08;LeetCode&#xff09; 链表的中间节点是一个简单的链表OJ。我们要返回中间节点有两种情况&#xff1a;节点数为奇数和节点数是偶数。如果是奇数则直接返回中间节点&#xff0c;如果是偶数则返回第二个中间节点。 这道题的解题思路是&a…

OpenAI 发布了免费的 GPT-4o,国内大模型还有哪些机会?

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 这是今天在某乎看到一个问题&#xff1a;OpenAI 发完 GPT-4o&…

关闭 Visual Studio Code 项目中 的eslint的语法校验 lintOnSave: false;; 项目运行起来之后 自动打开浏览器 端口

1、在 vue.config.js 配置 一个属性 lintOnSave: false 2、配置两个属性 open: true, // 自动打开浏览器 port: 3000 // 端口 port 端口号根据自己的项目实际开发来 配置

Lumina-T2X 一个使用 DiT 架构的内容生成模型,可通过文本生成图像、视频、多视角 3D 对象和音频剪辑。

Lumina-T2X 是一个新的内容生成系列模型&#xff0c;统一使用 DiT 架构。通过文本生成图像、视频、多视角 3D 对象和音频剪辑。 可以在大幅提高生成质量的前提下大幅减少训练成本&#xff0c;而且同一个架构支持不同的内容生成。图像质量相当不错。 由 50 亿参数的 Flag-DiT …

structured concurrency

1. 基于 c executions的异步实现 - 从理论到实践 - 知乎 (zhihu.com)

VitePress变成可视化了

VitePressSimple 非技术人员搭建博客的门槛又降低了&#xff0c;这个开源项目把VitePress变成可视化了。 要搭建博客、教程网站&#xff0c;VitePress是门槛最低的方案之一&#xff0c;唯一和技术有关的就是会用到编辑器来操作。 现在好了&#xff0c;VitePressSimple直接把Vit…

【软件测试】自动化测试 Selenium 篇(一)

一、什么是自动化测试 1、自动化测试介绍 自动化测试指软件测试的自动化&#xff0c;在预设状态下运行应用程序或者系统&#xff0c;预设条件包括正常和异常&#xff0c;最后评估运行结果。将人为驱动的测试行为转化为机器执行的过程。 自动化就相当于将人工测试手段进行转换…

【激活函数--下】非线性函数与ReLU函数

文章目录 一、非线性函数在神经网络中的重要性二、ReLU函数介绍及其实现2.1 ReLU函数概述2.2 ReLU函数的Python实现及可视化 一、非线性函数在神经网络中的重要性 在神经网络中&#xff0c;激活函数的选择对于网络的性能和能力至关重要。阶跃函数和Sigmoid函数除了是激活函数的…

stable-diffusion-webui配置

源码地址 https://github.com/AUTOMATIC1111/stable-diffusion-webui.git报错Fresh install fail to load AttributeError: NoneType object has no attribute _id pydantic降级 pip uninstall pydantic pip install pydantic1.10.11记得要把clip-vit-large-patch14放在opena…

业务逻辑攻击是什么,如何有效进行防护

想象一下&#xff1a;您的开发团队刚推出了一款令人惊叹的全新应用程序&#xff0c;它具有顶级的API安全性&#xff0c;通过客户端保护对其进行了强化&#xff0c;甚至还设置了针对机器人攻击的防御措施。你感到这款产品很有安全保障&#xff0c;自己的团队出色地完成了工作。 …

服务器通的远程桌面连接不上,关于服务器通畅但远程桌面连接不上问题的专业分析

在日常的企业IT管理中&#xff0c;服务器远程桌面连接是一个重要的操作功能。然而&#xff0c;有时会出现服务器网络通畅&#xff0c;但远程桌面无法连接的情况。 问题分析 1. 防火墙或安全组设置问题&#xff1a;服务器的防火墙或安全组可能阻止了远程桌面连接的端口&#xf…

adobe安装“Error:SyntaxError:JSON Parse error:Unexpec

mac电脑安装Adobe时&#xff0c;会提示错误“Error:SyntaxError:JSON Parse error:Unexpected EOF”&#xff0c;这是怎么回事儿的&#xff0c;不管您是安装AI、PS、PR还是LR&#xff0c;如果也遇到相同的问题&#xff0c;可以参考一下方法解决&#xff1a; 「adobe安装提示错误…

Java RMI反序列化总结篇-01

1.java rmi反序列化 RMI 允许一个应用程序访问另外一个服务器或虚拟机上的对象&#xff0c;方法和服务&#xff0c;它使远程方法调用就像在本地调用一样简单。它为用户屏蔽了底层的网络传输细节&#xff0c;使用的时候只需适当处理异常即可。所以 RMI 是非常容易使用的&#x…

哪款骨传导耳机最值得入手?精选5款顶尖配置的骨传导耳机,闭眼入也不踩雷!

作为一名有着多年工作经验的数码博主&#xff0c;我见证了无数因盲目追求新颖而引发的听力问题。在此&#xff0c;我必须郑重提醒大家&#xff0c;虽然市面上充斥着众多声称能提供卓越音质和佩戴舒适度的骨传导耳机品牌&#xff0c;但它们之间存在大量劣质产品&#xff0c;这类…