当前位置: 首页 > news >正文

漏刻有时数据可视化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进行集成&#xff0c;使用Echarts的API进行绘制。使用方法如下&#xff1a; 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)(二)】

列存储&#xff08;autoanalyze&#xff09;&#xff08;二&#xff09; 概述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 (广告拦截插件) ☆ 拦截…...

机器学习中常见的监督学习方法和非监督学习方法有哪些。

问题描述&#xff1a;最近面试某些公司算法岗&#xff0c;看到一道简答题&#xff0c;让你举例熟悉的监督学习方法和非监督学习方法。 问题解答&#xff1a; 监督学习方法常见的比较多&#xff1a; 线性回归&#xff08;Linear Regression&#xff09;&#xff1a; 用于回归问…...

UEFI基础——测试用例Hello Word

Hello 测试用例 硬件环境&#xff1a;龙芯ls3a6000平台 软件环境&#xff1a;龙芯uefi固件 GUID获取网址&#xff1a;https://guidgen.com 一、创建工程 mkdir TextPkg/三个文件 Hello.c 、 Hello.inf 、HelloPkg.dsc 1.1 Hello.c /** fileThe application to print hello …...

【tomcat、java】

java&#xff1a;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-获取推荐商品列表 请求参数 请求参数&#xff1a;type 参数说明&#xff1a;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 个最佳免费录屏软件

您是否想使用网络摄像头录制优酷视频、抖音直播或在线课程等项目&#xff0c;但完全不知道如何开始&#xff1f; 不用担心。有很多软件选项可以帮助您。虽然每一款都有不同的功能&#xff0c;但它们都能够录制网络摄像头并输出精美的高质量视频。 以下是我们精选的最佳作品。…...

vscode 调试使用 make 编译的项目

1、首先点击运行 --> 启动调试&#xff1a; 2、选择g或gcc生成和调试活动文件&#xff1a; 3、出现下面提示是正常的&#xff0c;点击仍要调试&#xff1a; 点击打开“launch.json”&#xff1a; 4、此时会在项目工作目录下生成tsak.josn和launch.json文件&#xff1a; 如…...

Docker修改阿里源

在一次安装rtmp推流服务时&#xff0c;总是无法下载源&#xff0c;估计是国外资源下载超时照成的&#xff0c;于是想到修改为国内源。 docker pull alfg/nginx-rtmp Using default tag: latest latest: Pulling from alfg/nginx-rtmp 530afca65e2e: Retrying in 7 seconds c20…...

有必要买一台内衣裤专洗机吗?家用小洗衣机推荐

随着内衣洗衣机的流行&#xff0c;很多小伙伴在纠结该不该入手一款内衣洗衣机&#xff0c;专门来洗一些贴身衣物&#xff0c;答案是非常有必要的&#xff0c;因为我们现在市面上的大型洗衣机只能做清洁&#xff0c;无法对我们的贴身衣物进行一个高强度的清洁&#xff0c;而小小…...

高精度与高精度的乘法---基础算法

看到一个博主写得不错&#xff0c;我也照猫画虎&#xff1a;&#xff09; 原因 在计算两个非负整数时&#xff0c;如果位数很大&#xff0c;连 long long 类型都存储不了&#xff0c;就要使用到高精度的乘法 原理 原理依旧是模拟人计算两个数的积&#xff0c;早在小学我们已…...

护眼灯有效果吗?科普护眼灯的作用与推荐

现在我们很多家长对自己孩子的视力十分关心&#xff0c;生怕自己的孩子是近视、远视、弱视等等。对于父母而言&#xff0c;在孩子读书压力大课业重的关键时期&#xff0c;为孩子选择合适的桌椅&#xff0c;保护灯具从而保护孩子的眼睛是非常重要的事情!那么买给孩子读书做功课的…...

【办公自动化】在Excel中按条件筛选数据并存入新的表2.0(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

HDLbits: Lfsr5

我的错误写法&#xff0c;半成品&#xff0c;完全错误&#xff1a; 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:未能找到元数据文件踩坑记录

前言 在写项目的时候&#xff0c;添加了个新的Nuget包&#xff0c;突然就不行&#xff0c;然后就是报错&#xff0c;找不到文件、 出现的原因是因为项目之间互相引用出现了问题&#xff0c;比如如下情况 先版本回退 如果有Git仓库 第一时间去看Git 文件比较&#xff0c;找到…...

高分辨率路面缺陷检测数据集:道路健康状态自动监测的关键资源

路面缺陷检测数据集yolo掌握道路健康状态对于维护和规划都至关重要。 本数据集精选6100张高清图像&#xff0c;专门标注了道路表面的四种常见缺陷&#xff0c;包括鳄鱼状裂纹、横向裂纹、纵向裂纹和坑洞&#xff0c;旨在为道路维护和自动化检测提供强有力的数据支持。 图像集已…...

三节点zookeeper集群搭建

1、环境准备 1.1、 设置三台虚拟机主机名# 在node1执行 sudo hostnamectl set-hostname node1 # 在node2执行 sudo hostnamectl set-hostname node2 # 在node3执行 sudo hostnamectl set-hostname node31.2、修改hosts# 使用vim编辑hosts文件 sudo vim /etc/hosts # 添加以下内…...

PCS双向储能变流器Buck - Boost闭环控制仿真复现之旅

PCS双向储能变流器Buck-Boost闭环控制仿真【复现】 复现参考文献&#xff1a;《储能电站变流器设计与仿真研究_尹世界》 三相PWM变流器控制&#xff1a;采用电压外环、电流内环双闭环PI控制&#xff0c;电压环稳定直流测电容电压700V&#xff0c;电网电压和电容电流前馈&#x…...

OpenAI推安全漏洞赏金计划,应对AI潜在风险

OpenAI启动公共安全漏洞赏金计划&#xff0c;剑指AI潜在风险品玩3月26日消息&#xff0c;OpenAI正式推出公共安全漏洞赏金计划&#xff0c;此计划意在识别并修复其产品中潜在的AI滥用与安全风险。该计划是对现有安全漏洞赏金项目的补充&#xff0c;专门接纳那些虽不构成传统技术…...

从IMU初始化到点云去畸变:深入Fast-LIO2的传感器融合核心流程

从IMU初始化到点云去畸变&#xff1a;Fast-LIO2传感器融合全流程解析 在自动驾驶和机器人定位领域&#xff0c;激光雷达与IMU的紧耦合系统正成为高精度状态估计的主流方案。Fast-LIO2作为这一技术路线的代表&#xff0c;其核心创新在于将IMU的动力学特性与激光点云几何特征深度…...

从Word2Vec到BERT:聊聊Embedding技术这十年,我们踩过的‘坑’和收获的‘宝’

从Word2Vec到BERT&#xff1a;Embedding技术的十年演进与实战智慧 记得2013年第一次用Word2Vec处理电商评论时&#xff0c;我们团队对着"iPhone"和"安卓手机"的向量相似度兴奋不已——这两个在传统词袋模型里毫无关联的词&#xff0c;在向量空间中的余弦相…...

别再手动拖拽了!用Mermaid语法+draw.io,5分钟搞定系统设计流程图

从文本到图表&#xff1a;Mermaid与draw.io的高效设计工作流革命 每次系统设计会议后&#xff0c;你是否也经历过这样的场景&#xff1a;白板上密密麻麻的逻辑草图需要转化为电子版&#xff0c;而传统拖拽式绘图工具让你在调整箭头和对齐方框上耗费半小时&#xff1f;作为经历…...

2026年小红书文案降AI工具怎么选?自媒体人亲测这4款最靠谱

开始做小红书内容之前&#xff0c;我以为降AI只是学生的事。后来才发现&#xff0c;品牌方审稿也在查AI率&#xff0c;小红书平台自己也有AI检测机制。 自媒体文案的降AI需求和论文不一样&#xff0c;核心要求是&#xff1a;保留口语化语感&#xff0c;不能变成学术腔。降完还…...

深入解析Golang中的占位符:%w、%v、%s的应用与最佳实践

1. Golang占位符基础入门 刚开始接触Golang时&#xff0c;fmt包里的那些百分号开头的占位符确实让我有点懵。记得第一次看到%s、%v、%w这些符号时&#xff0c;我还以为是什么特殊运算符。后来在实际项目中用多了才发现&#xff0c;这些看似简单的占位符&#xff0c;其实是Gola…...

【算法对抗】打穿查重黑盒!论文降AI太难?8个实测有效策略与高性价比工具

上周匆匆写完论文初稿交给导师&#xff0c;结果被一眼识破&#xff0c;当场打回。还被导师认为不认真不负责态度不端正&#xff01; 为了搞定这件事&#xff0c;我测评了市面上大部分的主流工具、试了无数方法&#xff0c;终于把AI率降到6%。 我们要先端正态度&#xff1a;论文…...