echarts map地图添加背景图

news2024/11/16 9:54:51

给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 = mg
    document.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.coloradmin.cn/o/1678214.html

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

相关文章

ARM机密计算架构

安全之安全(security)博客目录导读 目录 机密计算:Arm架构下一个新的信任模型 Arm CCA组件 领域管理扩展的访问控制 安全地运行所有应用程序 领域如何在受保护的内存空间中执行 重新评估信任关系 我们对Arm机密计算架构&#xff08;CCA&#xff09;的愿景是保护计算发生…

【Web后端】MVC模式

1、简介 MVC模式&#xff0c;全称Model-View-Controller&#xff08;模型-视图-控制器&#xff09;模式&#xff0c;是一种软件设计典范&#xff0c;它将应用程序的用户界面&#xff08;视图&#xff09;和业务逻辑&#xff08;模型&#xff09;分离&#xff0c;同时提供了一个…

Springboot+Vue项目-基于Java+MySQL的民族婚纱预定系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

Stable Diffusion入门使用技巧及个人实例分享--大模型及lora篇

大家好&#xff0c;近期使用Stable Diffusion比较多&#xff0c;积累整理了一些内容&#xff0c;得空分享给大家。如果你近期正好在关注AI绘画领域&#xff0c;可以看看哦。 本文比较适合已经解决了安装问题&#xff0c;&#xff08;没有安装的在文末领取&#xff09; 在寻找合…

线性/非线性最小二乘 与 牛顿/高斯牛顿/LM 原理及算法

最小二乘分为线性最小二乘和非线性最小二乘 最小二乘目标函数都是min ||f(x)||2 若f(x) ax b&#xff0c;就是线性最小二乘&#xff1b;若f(x) ax2 b / ax2 bx 之类的&#xff0c;就是非线性最小二乘&#xff1b; 1. 求解线性最小二乘 【参考】 2. 求解非线性最小二乘…

nn.BatchNorm中affine参数的作用

在PyTorch的nn.BatchNorm2d中&#xff0c;affine参数决定是否在批归一化&#xff08;Batch Normalization&#xff09;过程中引入可学习的缩放和平移参数。 BN层的公式如下&#xff0c; affine参数决定是否在批归一化之后应用一个可学习的线性变换&#xff0c;即缩放和平移。具…

阿里云域名备案流程

阿里云域名备案流程大致可以分为以下几个步骤&#xff0c;这些信息综合了不同来源的最新流程说明&#xff0c;确保了流程的时效性和准确性&#xff1a; UP贴心的附带了链接&#xff1a; 首次备案流程&#xff1a;ICP首次备案_备案(ICP Filing)-阿里云帮助中心 (aliyun.com) …

现实投资者怎么摆脱伦敦银波动影响?

有伦敦银投资经验的朋友会发现&#xff0c;即便自己找到了伦敦银市场的趋势&#xff0c;但是总是没办法坚守自己的仓位&#xff0c;因为没办法摆脱伦敦银波动的影响&#xff0c;比方说在上升趋势中买入后&#xff0c;投资者总是是觉得伦敦银价格会反转下跌&#xff0c;所以他就…

Java(二)——方法与数组

文章目录 方法与数组方法方法的定义方法的执行实参与形参方法重载方法签名 数组创建与初始化数组的类型数组应用转字符串排序查找&#xff08;二分&#xff09;填充拷贝判等 二维数组创建及初始化遍历本质和内存分布不规则二维数组 方法与数组 方法 什么是方法&#xff1f; …

Kubernetes二进制(单master)部署

文章目录 Kubernetes二进制&#xff08;单master&#xff09;部署一、常见的K8S部署方式1. Minikube2. Kubeadmin3. 二进制安装部署4. 小结 二、K8S单&#xff08;Master&#xff09;节点二进制部署1. 环境准备1.1 服务器配置1.2 关闭防火墙1.3 修改主机名1.4 关闭swap1.5 在/e…

【管理咨询宝藏103】麦肯锡咨询顾问逻辑结构内部培训

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏103】麦肯锡咨询顾问逻辑结构内部培训 【格式】PDF版本 【关键词】麦肯锡、咨询顾问、逻辑培训 【核心观点】 - 所谓逻辑性&#xff0c;指的是“…

【数据结构】栈的实现(顺序栈)

文章目录 栈的概念和结构栈的实现1.顺序存储结构栈的定义初始化栈入栈出栈获取栈顶元素获取栈中有效元素个数检测栈是否为空&#xff0c;如果为空返回非零结果&#xff0c;如果不为空返回0销毁栈栈的打印 完整代码&#xff08;包括测试代码&#xff09;Stack.hStack.ctest.c 栈…

控制状态流程图中的消息活动

消息是一个Stateflow对象&#xff0c;用于在本地或图表之间进行数据通信。从发件人图表中&#xff0c;您可以发送或转发邮件。在接收图表中&#xff0c;队列接收消息并将其保存&#xff0c;直到图表能够对其进行评估。 使用Stateflow运算符&#xff0c;您可以访问消息数据&…

更高效的数据交互实现丨 DolphinDB Arrow 插件使用教程

Apache Arrow 是一种跨语言的内存数据交换格式&#xff0c;旨在为用户提供高效的数据结构&#xff0c;以实现在不同的数据处理系统之间共享数据而无需进行复制。它由 Apache 软件基金会开发和维护&#xff0c;目前已经成为许多大型数据处理和分析框架的核心组件之一。在分布式框…

2024年【金属非金属矿山(露天矿山)安全管理人员】模拟考试题库及金属非金属矿山(露天矿山)安全管理人员作业模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员模拟考试题库参考答案及金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员考试试题解析是安全生产模拟考试一点通题库老师及金属非金属矿山&a…

DiskGenius帮你恢复系统无法识别的U盘数据

场景还原 前两天早上U盘复制文件卡死后&#xff0c;强行断开U盘&#xff0c;再次使用直接无法访问&#xff0c;心拔凉拔凉&#xff01;&#xff01; 使用驱动器G:中的光盘之前需要将其格式化 位置不可用-无法访问U盘 常规科普 一、U盘无法识别 1、检查U盘是否插入正确&…

【Pytorch】torch.nn.MaxPool2d

什么是MaxPool2d 是对二维矩阵进行池化层下采样的方法 MaxPool2d的用法 相较于卷积层&#xff0c;多出来的参数为ceil_mode 这个参数代表&#xff0c;如果所剩的部分不够卷积核的大小&#xff0c;要不要进行池化操作 具体代码为 import torch import torchvision from torch …

代购系统搭建,淘宝、1688海外代购系统建设以及部分前端源码展示

客户登录主界面&#xff0c;可以根据个人需求更换。 可支持个人定制模块化&#xff0c;也有一些模块可供选择 系统演示站测试 部分源码展示&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"> <title>会员中心 – 淘…

分布式搜索——ElasticSeach简介

一般都用数据库存储数据&#xff0c;然后对数据库进行查询获取数据&#xff0c;但是当数据量很大时&#xff0c;查询效率就会很慢&#xff08;具体下面会讲到&#xff09;&#xff0c;所以这种情况下就会使用到ElasticSeach ElasticSeach的基本介绍 ElasticSeach是一 款非常强…

RSC6218A LLC谐振电源案例分享-REASUNOS(瑞森半导体)

一、前言 RSC6218A是一款可以满足4项标准的优秀产品&#xff1a;①2024年8月1日要实施的《建筑照明设计标准》GBT0034-2024&#xff1b;②2024年07月01日起实施的《电磁兼容限值 第1部分&#xff1a;谐波电流发射限值&#xff08;设备每相输入电流≤16A&#xff09;》GB17625.…