漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用

1.定义SVG文件
var svg = ``;
2.注册地图函数
Echarts.registerMap是Echarts图表库中用于注册地图的函数。它可以将第三方地图或自定义地图数据与Echarts进行集成,使用Echarts的API进行绘制。使用方法如下:
echarts.registerMap(mapName, geoJson) 参数mapName是地图的名称,geoJson是地图的数据。注册后可以使用这个地图名称在Echarts中使用这个地图。如有需要,建议咨询Echarts官方网站或者查询专业书籍。
echarts.registerMap("organ_diagram", { svg: svg });
3.核心代码
const datas = {from: [300, 400],to: [{name: "永嘉",value: 2,coord: [600, 100],},{name: "乐清",value: 5,coord: [700, 150],},{name: "瑞安",value: 8,coord: [400, 300],},{name: "瓯海",value: 10,coord: [550, 300],},],
};option = {backgroundColor: "#040b1c",title: {text: "Visit Route",left: "center",bottom: 10,},tooltip: {trigger: "item",backgroundColor: "rgba(166, 200, 76, 0.82)",borderColor: "#FFFFCC",showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: "z-index:100",formatter: function (params, ticket, callback) {console.log(params);//根据业务自己拓展要显示的内容var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1] || params.value;res = "<span style='color:#fff;'>" + name + "</span><br/>数据:" + value;return res;},},visualMap: {//图例值控制min: 0,max: 10,calculable: true,show: false,color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],textStyle: {color: "#fff",},},geo: {left: 10,right: 10,map: "organ_diagram",itemStyle: {borderWidth: 0,},emphasis: {focus: "none",itemStyle: {areaColor: "#ff0000",},label: {show: false,},},regions: [{name: "map12",itemStyle: {areaColor: "red",color: "red",},},],},series: [],
};myChart.setOption(option);myChart.on("click", function (event) {console.log(event);myChart.dispatchAction({type: "highlight",geoIndex: 0,name: event.name,});
});
参见: makeAPie
@漏刻有时
相关文章:
漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用
1.定义SVG文件 var svg ;2.注册地图函数 Echarts.registerMap是Echarts图表库中用于注册地图的函数。它可以将第三方地图或自定义地图数据与Echarts进行集成,使用Echarts的API进行绘制。使用方法如下: echarts.registerMap(mapName, geoJson) 参数map…...
firefox的主题文件位置在哪?记录以防遗忘
这篇文章写点轻松的 最近找到了一个自己喜欢的firefox主题,很想把主题的背景图片找到,所以找了下主题文件所在位置 我的firefox版本:版本: 118.0.1 (64 位)主题名称: Sora Kawai 我的位置在 C:\Users\mizuhokaga\AppData\Roaming\Mozilla\Firefox\Profiles\w0e4e24v.default…...
Vuex获取、修改参数值及异步数据处理
14天阅读挑战赛 学不可以已... 目录 一、Vuex简介 1.1 vuex介绍 1.2 vuex核心 二、Vuex使用 2.1 Vuex安装 2.2 创建store模块 2.3 创建vuex的store实例并注册上面引入的各大模块 三、使用Vuex获取、修改值案例 3.1 创建两个菜单组件 3.2 配置路由 3.3 模拟菜单数据 …...
【 OpenGauss源码学习 —— 列存储(autoanalyze)(二)】
列存储(autoanalyze)(二) 概述PgStat_StatTabEntry 结构体pgstat_count_heap_insert 与 pgstat_count_cu_insert 函数CStoreInsert::BatchInsertCommon 函数pgstat_count_cu_update 函数pgstat_count_cu_delete 函数pgstat_count_…...
使用postman 调用 Webservice 接口
1. 先在浏览器地址栏 访问你的webService地址 地址格式: http://127.0.0.1:8092/xxxx/ws(这个自己的决定)/xxxxXccv?wsdl 2. post man POST 访问wwebService接口 地址格式: http://127.0.0.1:8092/xxxx/ws(这个自己的决定)/xxxxXccv <soapenv:Envelope xmlns:soapenv…...
程序员Google插件推荐
文章目录 AdBlock (广告拦截插件)SuperCopy 超级复制Octotree (github增强工具)GitZip for github (github增强工具)JSON-handleSimpleExtManager(管理谷歌插件)OneTab (标签页合并)PostWoman(接口调试)篡改猴 (Tampermonkey)FeHelper(前端助手) AdBlock (广告拦截插件) ☆ 拦截…...
机器学习中常见的监督学习方法和非监督学习方法有哪些。
问题描述:最近面试某些公司算法岗,看到一道简答题,让你举例熟悉的监督学习方法和非监督学习方法。 问题解答: 监督学习方法常见的比较多: 线性回归(Linear Regression): 用于回归问…...
UEFI基础——测试用例Hello Word
Hello 测试用例 硬件环境:龙芯ls3a6000平台 软件环境:龙芯uefi固件 GUID获取网址:https://guidgen.com 一、创建工程 mkdir TextPkg/三个文件 Hello.c 、 Hello.inf 、HelloPkg.dsc 1.1 Hello.c /** fileThe application to print hello …...
【tomcat、java】
java:maven配置 1.安装插件 <build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.1</version><configuration><port&…...
京东获取推荐商品列表 API
item_recommend-获取推荐商品列表 请求参数 请求参数:type 参数说明:type:推荐类型 进入API测试页 响应参数 Version: Date: 名称类型必须示例值描述 items items[]0获取推荐商品列表 num_iid Bigint010021415166448宝贝ID detail_url String0http…...
rust cfg的使用
前提是一个crate倒入另一个crate。 先看结构 test_lib目录结构 这与另一个crate处于同一个目录,所以另一crate倒入的时候在Cargo.toml中使用如下语句。 test_lib = {path = "../test_lib" }先在test_lib/src/abc/abc.rs中添加没有cfg的两个函数做测试。 pub fn…...
电脑屏幕怎么录制?5 个最佳免费录屏软件
您是否想使用网络摄像头录制优酷视频、抖音直播或在线课程等项目,但完全不知道如何开始? 不用担心。有很多软件选项可以帮助您。虽然每一款都有不同的功能,但它们都能够录制网络摄像头并输出精美的高质量视频。 以下是我们精选的最佳作品。…...
vscode 调试使用 make 编译的项目
1、首先点击运行 --> 启动调试: 2、选择g或gcc生成和调试活动文件: 3、出现下面提示是正常的,点击仍要调试: 点击打开“launch.json”: 4、此时会在项目工作目录下生成tsak.josn和launch.json文件: 如…...
Docker修改阿里源
在一次安装rtmp推流服务时,总是无法下载源,估计是国外资源下载超时照成的,于是想到修改为国内源。 docker pull alfg/nginx-rtmp Using default tag: latest latest: Pulling from alfg/nginx-rtmp 530afca65e2e: Retrying in 7 seconds c20…...
有必要买一台内衣裤专洗机吗?家用小洗衣机推荐
随着内衣洗衣机的流行,很多小伙伴在纠结该不该入手一款内衣洗衣机,专门来洗一些贴身衣物,答案是非常有必要的,因为我们现在市面上的大型洗衣机只能做清洁,无法对我们的贴身衣物进行一个高强度的清洁,而小小…...
高精度与高精度的乘法---基础算法
看到一个博主写得不错,我也照猫画虎:) 原因 在计算两个非负整数时,如果位数很大,连 long long 类型都存储不了,就要使用到高精度的乘法 原理 原理依旧是模拟人计算两个数的积,早在小学我们已…...
护眼灯有效果吗?科普护眼灯的作用与推荐
现在我们很多家长对自己孩子的视力十分关心,生怕自己的孩子是近视、远视、弱视等等。对于父母而言,在孩子读书压力大课业重的关键时期,为孩子选择合适的桌椅,保护灯具从而保护孩子的眼睛是非常重要的事情!那么买给孩子读书做功课的…...
【办公自动化】在Excel中按条件筛选数据并存入新的表2.0(文末送书)
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...
HDLbits: Lfsr5
我的错误写法,半成品,完全错误: module top_module(input clk,input reset, // Active-high synchronous reset to 5h1output [4:0] q ); dff dff_1(clk, 0 ^ q[0],q[4]);dff dff_2(clk, q[4] ,q[3]);dff dff_3(clk, q[3] ^ q[0] ,q[2]);…...
Visual Studio 错误CS0006:未能找到元数据文件踩坑记录
前言 在写项目的时候,添加了个新的Nuget包,突然就不行,然后就是报错,找不到文件、 出现的原因是因为项目之间互相引用出现了问题,比如如下情况 先版本回退 如果有Git仓库 第一时间去看Git 文件比较,找到…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
