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…

MySQL中的多表设计

由于业务之间的相互关联&#xff0c;所以各个表结构之间也存在着各种联系 基本分为三种&#xff1a; 一对多 多对多 一对一 外键语法 create table 表名&#xff08; 字段名 数据类型&#xff0c; ... [constraint] 外键名称 foreign key &#xff08;外键字段名&#…

银川项目外包找邦芒 助力企业减压增效

银川邦芒人力项目外包&#xff0c;是指企业将原本由自身承担的具有基础性、共性、非核心的IT业务和基于IT的业务流程&#xff0c;委托给专业的外部服务提供商来执行的一种经济活动。这种全方位的企业用工解决方案&#xff0c;旨在帮助企业优化资源配置、降低成本、提升效率&…

相同的随机种子CPU和GPU上torch.nn.init.xavier_normal_结果并不一致

相同的随机种子CPU和GPU上torch.nn.init.xavier_normal_结果并不一致 一.测试代码二.输出 在训练pytorch模型时,相同的随机种子,不同的服务器上loss并不一样,通过调试发现这二个平台的权值也不一样.单独测试torch.nn.init.xavier_normal_,发现也不一样.如果都放在CPU上则二台服…

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)

kubeadm部署k8s v1.30

k8s 1.30主要新功能 kubelet 重启后稳健的 VolumeManager 重建&#xff08;SIG Storage&#xff09; 防止在卷还原过程中未经授权的卷模式转换&#xff08;SIG Storage&#xff09; Pod 调度可用性&#xff08;SIG Scheduling&#xff09; PodTopologySpread 中的最小域数&a…

VitePress变成可视化了

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

Java 枚举的使用与反射应用

文章目录 一、定义方式1.1 简单定义1.2 带参数定义 二、反射应用1. 反射获取枚举常量2. 反射获取枚举属性3. 动态调用枚举方法4. 动态设置枚举属性5. 判断枚举类型6. 反射获取枚举信息 单例模式&#xff1a;枚举类型是一种有限实例的类&#xff0c;枚举常量在定义时就被限定为一…

解决在云服务器上无法使用QQ邮箱发送邮件的问题

最近在做测试demo的时候发现&#xff0c;在本地可以使用qq邮箱的服务来进行邮件的发送&#xff0c;但是把项目部署到云服务器上就没办法发送邮件&#xff0c;并且报错是连接超时&#xff1a; 向xxxxxqq.com用户发送绑定邮箱验证码异常&#xff1a;Mail server connection fail…

leetcode234-Palindrome Linked List

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true 分析 可以用快慢指针的方式找到链表的…

自用代码生成器代码

代码生成器 pom.xml文件中 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.ap…