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

根据项目需求,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
          }
        ]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

线程池参数该怎么配置?这可能是为数不多的好答案

前言 CPU 密集型 CPU 核数 1 IO 密集型 CPU 核数 * 2 相信这个公式可谓是线程池八股文中老生常谈的万能公式了,但现实却很骨感,我之前有个系统就是按照这个公式算出来的参数去配置的。结果效果并不好,甚至让下游系统直呼受不了。这个东西…

阶段七-Day01-SpringMVC

一、Sping MVC的介绍 1. 使用Front(前端)设计模式改写代码 1.1 目前我们的写法 目前我们所写的项目,持久层、业务层的类都放入到Spring容器之中了。他们之间需要注入非常方便,只需要通过Autowired注解即可。 但是由于Servlet整个生命周期都是被Tomca…

并查集详解(附例题和模板)

一、并查集 (1)处理问题的类型 1.将两个集合合并 2.询问两个元素是否在一个集合当中 询问 1.fa[x]a; 2.if(fa[x]fa[y]) o(1) 在o(1)的复杂度内进行两个操作 (2)基本原理 基本原理:每个集合用一棵树来表示&#…

振南技术干货集:深入浅出的Bootloader(5)

注解目录 1、烧录方式的更新迭代 1.1 古老的烧录方式 (怀旧一下,单片机高压烧录器。) 1.2 ISP 与ICP 烧录方式 (还记得当年我们玩过的 AT89S51?) 1.3 更方便的 ISP 烧录方式 1.3.1串口 ISP (是 STC 单片机成就了我们,还是我们成就了…

破解tomcat密码并上传webshell

tomcat基础认证爆破 暴力破解 进入vulnhub的tomcat8目录,启动环境 由于tomcat密码默认最大尝试错误次数为5次,需要修改server.xml,修改下面字段 failureCount"10000000000" lockOutTime"0"tomcat默认界面,…

一个破单机,也要用远程缓存?

大家好,豆小匠终于开始Coding了,这期来聊聊实战相关的杂谈。 正文开始! 作为编程萌新的时候,总想着把程序做复杂,堆技术栈。 但是程序是为场景服务的,比如,我想提高接口的响应速度&#xff0c…

传输层协议-UDP协议

目录 传输层再谈端口号端口号范围划分认识知名端口号 UDP协议UDP协议格式UDP数据封装UDP数据分用 UDP协议的特点面向数据报 UDP缓冲区UDP使用注意事项基于UDP的应用层协议 传输层 实际上我们应用层的数据并不是直接发给网络的,而是需要先将数据发送给传输层&#xf…

客户下单时如何自动匹配到最近的门店

有些商家有多个门店,当客户下单时,希望能够将客户下的订单分配给最近的门店。下面就具体介绍一下在采云小程中是如何实现的。 首先,为了简便起见,请确定门店高级设置保持着默认设定。因为单独的商品管理模式以及独享的商品信息模…

一篇博客读懂队列——Queue

目录 一、队列的概念和结构 ​二、队列的实现 2.1队列的初始化QueueInit 2.2队列的摧毁QueueDestroy 2.3插入结点QueuePush 2.4删除结点QueuePop 2.5返回队头QueueFront 2.6返回队尾QueueBack 2.7判断队列为空QueueEmpty 2.8统计队列数目QueueSize 一、队列的概念和…

Vue computed 计算属性

1.计算属性的相关知识 概念 :基于现有的数据,计算出来的新属性。依赖数据的变化,自动重新计算。 语法: ① 声明在 computed 配置项 中,一个计算属性对应一个函数 ② 使用起来和普通属性一样使用 {{ 计算属性名 …

Vue3+Element Plus表格多字段组合排序方法

一、问题描述 默认el-table是单个字段排序的,点击表格头排序,老排序字段的排序箭头样式并没有保留,仅仅保留了新点击字段的样式。 二、实现效果 选择多列组合排序时可以高亮多列箭头。 三、解决方法 3.1 如何记录多个字段被选择&#xff…

C++编译器对临时对象的优化

思考:我们在构造运算符重载号重载的时候会构造那些函数呐??? 例子:小dome //该运算重载函数 由 左操作数调用,右操作数当做实参传递给该函数//触发t1t3->t1.operator (t3)Test operator (const Test &a…

js写轮播图,逐步完善

目录 1、自动轮播 2、点击更换 3、自动播放加左右箭头点击切换 4、完整版轮播图 1、自动轮播 用定时器setInterval()来写&#xff0c;可以实现自动播放 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><met…

【开源】基于JAVA的超市商品管理系统

目录 一、摘要1.1 简介1.2 项目详细录屏 二、研究内容2.1 数据中心模块2.2 超市区域模块2.3 超市货架模块2.4 商品类型模块2.5 商品档案模块 三、系统设计3.1 用例图3.2 时序图3.3 类图3.4 E-R图 四、系统实现4.1 登录4.2 注册4.3 主页4.4 超市区域管理4.5 超市货架管理4.6 商品…

http接口测试—自动化测试框架设计

一、测试需求描述 对服务后台一系列的http接口功能测试。 输入&#xff1a;根据接口描述构造不同的参数输入值&#xff08;Json格式&#xff09; 输出&#xff1a;字符串&#xff08;传入的方式传入的字符串&#xff09; http://localhost:8090/lctest/TestServer 二、程序设计…

CTFhub-RCE-命令注入

构造payload :127.0.0.1|ls 127.0.0.1|cat 80203153621323.php F12

成绩发布快捷方式

当一名老师&#xff0c;每到学期中期末&#xff0c;是不是觉得成绩发布就像个老大难&#xff1f;学生急着要知道自己的成绩&#xff0c;家长也频繁私信询问成绩&#xff0c;而传统的成绩发布方式却往往效率低下&#xff0c;费时费力。今天就来聊聊如何通过查询系统、各类代码、…

Python数据容器(集合)

集合 1.集合的定义2.集合中常用操作4.常用功能总结5.集合的特点6.练习 思考&#xff1f; 我们目前接触到了列表、元组、字符串三个数据容器了。基本满足大多数的使用场景。为何要学新的集合类型呢&#xff1f; 通过特性分析 列表可以修改、支持重复元素且有序元组、字符串不可修…

EtherNET转Profibus网关使用 AB PLC的配置方法

兴达易控EtherNET转Profibus网关&#xff08;XD-EPPB20&#xff09;是一款功能强大的通讯设备&#xff0c;具备Profibus从站功能。它的主要作用是将EtherNET/IP设备无缝接入到PROFIBUS网络中。通过连接到Profibus总线&#xff0c;它可以作为从站使用&#xff0c;并且通过连接到…

【C++】一维字符数组 与 二维字符数组

一维字符数组 一维字符数组 可以通过数组名直接进行整体输入和输出&#xff08;注意&#xff1a;当使用一维字符数组存储字符串时&#xff0c;因为元素尾部会有一个空字符\0,所以需要给空字符\0留一个位置&#xff09; char a[5]; cin>>a; cout<<a;二维字符数组 …