echarts 地图点位图标为动图,且可以多个不同图标

news2025/2/24 15:25:59

根据项目需求,echarts地图点位图标要是动图,且可以设置不同图标,经过多方查找,找到解决方案,可以用svg使gif动起来

请添加图片描述

      let myChartChina = echarts.init(document.getElementById("myChartChina"), "transparent", {
        renderer: "svg"
      });

其中transparent是地图背景色,可设置其他颜色

也可以设置多个不同图标

     series: [
          {
            name: "数据",
            type: "map",
            mapType: "chinaJson",
            roam: false, //可缩放、拖动
            zoom: 1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            // aspectScale: 0.8, // 拉伸地图 值为0-1
            label: {
              normal: {
                show: false //省份名称
              },
              emphasis: {
                show: true,
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#272235",
                borderColor: "#043C6A",
                fontWeightL: 700,
                borderWidth: 1
              }
            },
            emphasis: {
              show: true,
              itemStyle: {
                areaColor: "#457efa" // 鼠标hover省份颜色
              }
            },
            data: regionsData //数据
          },
          {
            type: "scatter", //类型:散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img1,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: yiji,
            zlevel: 1
          },
          {
            type: "scatter", //类型:散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img2,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: erji,
            zlevel: 1
          },
          {
            type: "scatter", //类型:散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img3,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: sanji,
            zlevel: 1
          }
        ]

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

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

相关文章

[当人工智能遇上安全] 10.威胁情报实体识别 (1)基于BiLSTM-CRF的实体识别万字详解

您或许知道,作者后续分享网络安全的文章会越来越少。但如果您想学习人工智能和安全结合的应用,您就有福利了,作者将重新打造一个《当人工智能遇上安全》系列博客,详细介绍人工智能与安全相关的论文、实践,并分享各种案…

vue请求代理查看真实地址

查看真实地址方式: 通过配置vue.config.js文件,直接在请求头输出完整地址: /api/: { changeOrigin: true, target: process.env.VUE_APP_PLATFORM_URL, logLevel: debug, // 在终端输出 onProxyRes(proxyR…

【Proteus仿真】【51单片机】拔河游戏设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器,使用按键、LED、动态数码管模块等。 主要功能: 系统运行后,指示灯处于中间位置,数码管显示得分0,当按下…

C#中.NET Framework4.8 Windows窗体应用通过EF访问数据库并对数据库追加、删除记录

目录 一、应用程序设计 二、应用程序源码 三、生成效果 前文作者发布了在.NET Framework4.8 控制台应用中通过EF访问已有数据库,事实上在.NET Framework4.8 Windows窗体应用中通过EF访问已有数据库也是一样的。操作方法基本一样,数据库EF模型和上下文…

简易电路特性测试仪的设计(论文+源码)

1. 系统设计 系统主要由 STM32 单片机、DDS 模块、调理模块、特定放大器模块和电源模块 等组成。 DDS 模块使用低价格的 AD9833 芯片设计,产生调理模块需要的正弦信号。调理模块主要包 括特定放大器电路前端调理和后端调理:因为特定放大器进行性能…

2.3.5 交换机的VRRP技术

实验2.3.5 交换机的VRRP技术 一、任务描述二、任务分析三、具体要求四、实验拓扑五、任务实施1.交换机的基本配置 六、任务验收七、任务小结 一、任务描述 某公司的网络核心层原来采用一台三层交换机,随着网络应用的日益增多,对网络的可靠性也提出了越来…

使用vue2实现todolist待办事项

个人名片: 😊作者简介:一名大二在校生 🤡 个人主页:坠入暮云间x 🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。 🎅**学习目标: 坚持每一次的学习打卡 文章…

图论15-有向图-环检测+度数+欧拉回路

文章目录 1. 有向图设计1.1 私有变量标记是否有向1.2 添加边的处理,双向变单向1.3 删除边的处理,双向变单向1.4 有向图的出度和入度 2 有向图的环检测2.1 普通的算法实现换检测2.2 拓扑排序中的环检测 3 欧拉回路 1. 有向图设计 1.1 私有变量标记是否有…

Linux文件系统之inode

文章目录 1. 磁盘1.1 认识磁盘1.2 磁盘物理构造1.3 磁盘逻辑结构 2. 文件系统3. 如何理解目录 1. 磁盘 1.1 认识磁盘 文件 内容 属性,而文件是存储在磁盘上,那么可以理解为磁盘上存储的文件 存储的文件内容 存储的文件属性。 文件的内容采用的是块式…

深度学习 机器视觉 车位识别车道线检测 - python opencv 计算机竞赛

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) …

建造者模式(创建型)

目录 一、前言 二、建造者模式 三、链式编程实现建造者模式 四、总结 一、前言 当我们开发一个软件应用时,我们通常需要创建各种对象。有些对象是简单的,可以直接实例化,但有些对象则比较复杂,需要多个步骤才能创建完成。这时…

PP-ChatOCRv2、PP-TSv2、大模型半监督学习工具...PaddleX新特性等你来pick!

小A是一名刚刚毕业的算法工程师,有一天,他被老板安排了一个活,要对一批合同扫描件进行自动化信息抽取,输出结构化的分析报表。OCR问题不大,但是怎么进行批量的结构化信息抽取呢?小A陷入了苦苦思索… 小B是…

【每日一题】K 个元素的最大和

文章目录 Tag题目来源解题思路方法一:贪心 其他语言Cpython3 写在最后 Tag 【贪心】【脑筋急转弯】【数组】【2023-11-15】 题目来源 2656. K 个元素的最大和 解题思路 方法一:贪心 从第一次操作开始每次选择数组中的最大值,由于最大值在…

原论文一比一复现 | 更换 RT-DETR 主干网络为 【ResNet-50】【ResNet-101】【ResNet-152】| 对比实验必备

本专栏内容均为博主独家全网首发,未经授权,任何形式的复制、转载、洗稿或传播行为均属违法侵权行为,一经发现将采取法律手段维护合法权益。我们对所有未经授权传播行为保留追究责任的权利。请尊重原创,支持创作者的努力,共同维护网络知识产权。 更深层的神经网络更难训练。…

一文讲清生产质量场景的数据分析思路及案例实战

今天,顺着制造业数据分析这个大主题,我们来讲讲质量管理数据分析。   说起质量管理,就是对所生产的产品质量进行管理,其最终目的就是保证客户收到的产品质量,提高客户满意度,减少退货和维修的数量。质量管…

IP-guard flexpaper远程命令执行漏洞复现 [附POC]

文章目录 IP-guard flexpaper RCE漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 IP-guard flexpaper RCE漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相关技术从事非法测…

首发!动手学大模型应用开发教程来了

大模型正逐步成为信息世界的新革命力量,其通过强大的自然语言理解、自然语言生成能力,为开发者提供了新的、更强大的应用开发选择。随着国内外井喷式的大模型 API 服务开放,如何基于大模型 API 快速、便捷地开发具备更强能力、集成大模型的应…

Windows10下Docker安装Mysql5.7

文章目录 Windows10下Docker安装Mysql5.7环境说明打开命令工具搜索镜像拉取镜像查看所有镜像启动镜像查看容器查看所有容器查看运行中容器 进入容器进入容器命令输入账号命令输入密码 添加mysql的远程账号创建一个数据库 Windows10下Docker安装Mysql5.7 环境说明 docker&…

【VBA】基于EXCEL生成Insert语句工具

工具介绍 基于Excel生成INSERT语句工具是一个辅助工具,用于帮助用户根据Excel数据生成INSERT语句。通常,在数据库中插入大量数据时,手动编写INSERT语句会非常繁琐和耗时。而使用这个工具,可以通过Excel中的数据自动生成相应的INS…

【模板】单源最短路径(弱化版)P3371

【模板】单源最短路径(弱化版) 题目背景 本题测试数据为随机数据,在考试中可能会出现构造数据让SPFA不通过,如有需要请移步 P4779。 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路…