echarts地图-单独给香港和澳门画引导线

因为香港特别行政区和澳门特别行政区的名字特别长又需要显示全名
所以显示在地图上会挤在一起,所以根据天地图的坐标来加了两个引导线(echarts5以下!!!)在这里插入图片描述
在这里插入图片描述


var fullName = {北京: '北京市',天津: '天津市',河北: '河北省',山西: '山西省',内蒙古: '内蒙古自治区',辽宁: '辽宁省',吉林: '吉林省',黑龙江: '黑龙江省',江苏: '江苏省',浙江: '浙江省',安徽: '安徽省',福建: '福建省',江西: '江西省',山东: '山东省',河南: '河南省',湖北: '湖北省',湖南: '湖南省',广东: '广东省',广西: '广西壮族自治区',海南: '海南省',四川: '四川省',贵州: '贵州省',云南: '云南省',西藏: '西藏自治区',陕西: '陕西省',甘肃: '甘肃省',青海: '青海省',宁夏: '宁夏回族自治区',新疆: '新疆维吾尔自治区',香港: '香港特别行政区',澳门: '澳门特别行政区',台湾: '台湾省',
};option = {title: {show: false,text: '',subtext: '',left: 'center',textStyle: {color: '#121212',fontSize: 16,fontWeight: 'normal',fontFamily: 'Source Han Sans CN',},subtextStyle: {color: '#121212',fontSize: 13,fontWeight: 'normal',fontFamily: 'Source Han Sans CN',},},tooltip: {show: true,trigger: 'item',formatter: '{b}: {c}家',},toolbox: {show: false,orient: 'vertical',left: 'right',top: 'top',iconStyle: {normal: {color: '#fff',},},feature: {mark: {// '辅助线开关'show: true,},saveAsImage: {//保存为图片。show: true, //是否显示该工具。type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。name: 'pic1', //保存的文件名称,默认使用 title.text 作为名称backgroundColor: '#ffffff', //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色title: '中国地图',pixelRatio: 1, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2},// dataView: {readOnly: false},},},visualMap: {min: 0,max: 100,text: ['高', '低'],realtime: false,calculable: true,inRange: {color: ['#ebdecb', '#8aa87d', '#7d97a8']}},geo: {map: 'china',roam: true,zoom: 1.6,center: [104.46, 35.92],label: {normal: {show: true,formatter: function (param) {var reName = '';if (param.name == '香港' ||param.name == '澳门') {reName = '';} else {if (fullName[param.name]) {reName = fullName[param.name];} else {reName = '';}}return reName;},textStyle: {color: '#000',fontSize: 12,},},emphasis: {show: true,textStyle: {color: '#640000',fontSize: 13,},},},itemStyle: {normal: {// borderColor: 'rgba(147, 235, 248, 1)',borderColor: '#9c978b',borderWidth: 1,areaColor: {type: 'radial',x: 0.2,y: 0.2,r: 0.9,colorStops: [{offset: 0,color: 'rgba(255, 255, 255, 0)', // 0% 处的颜色},{offset: 1,color: 'rgba(255, 255, 255, .1)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},// shadowColor: 'rgba(128, 217, 248, 1)',// shadowColor: '#043563',// shadowOffsetX: -2,// shadowOffsetY: 2,// shadowBlur: 10},emphasis: {areaColor: '#ffdf33',borderWidth: 0,},},},visualMap: {min: 0,max: 150,right: '0',bottom: '2px',text: ['高', '低'],calculable: true,// seriesIndex: [1],inRange: {// color: ['#D2EAFF', '#177FE8']color: ['#ebdecb', '#8aa87d', '#7d97a8'],},show: true,textStyle: {color: ['#DCE5F5'],},},series: [{name: 'china',type: 'map',geoIndex: 0, // 关联到上面的 geo 配置data: [],},{name: '引导线',type: 'lines',zlevel: 3,lineStyle: {normal: {color: 'rgb(36, 36, 36)',width: 1,type: 'solid',},},data: [{coords: [[114.16, 22.28],[116.87, 22.18],], // 香港引导线label: {show: true,position: 'end',formatter: '香港特别行政区',color: '#000',},},{coords: [[113.55, 22.14],[113.27, 21.05],], // 澳门引导线label: {show: true,position: 'end',formatter: '澳门特别行政区',color: '#000',},},],},]
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用深度学习技术来实现街景图像的语义分割(街景图像语义分割)

本项目致力于利用深度学习技术来实现街景图像的语义分割。通过精确地识别和分类图像中的每个像素,该技术能够自动划分出街道、人行道、车辆、行人等各种不同的物体类别。这在智能交通系统、自动驾驶、城市规划等领域有着广泛的应用前景。 技术实现 深度学习模型&am…

从永远到永远-日语学习-て形用法及变形规律

て形用法及变形规律 0.前置知识1.常见用法1.请求某人做某事 「~てください」2.几个连续发生的动作 ~て、~て、~て3.两个动作先后发生「てから」4. 表示许可 「てもいいです」5.表示禁止 「~てはいけません」6.「&#…

IPv4和IPv6的区别是什么?什么是局域网和广域网,公网IP和私有IP?

文章目录 1.基本网络2.局域网3.广域网4.IPv4与NAT5.公网IP和私有IP6.IPv6 1.基本网络 我们都知道计算机的数据都是存在各自硬盘中的,与其他计算机之间没有人任务关系. 假设计算机A需要给计算机B发送数据,可以选择使用U盘这类移动存储数据来拷贝数据来实现数据交互,但是这样一…

Docker 部署 Kafka 可视化 Kafka-UI

前言 本文部署的Kafka-UI 是基于Docker Compose 部署 Kafka的KRaft模式,如有需要可访问下文链接 Docker Compose 部署 Kafka的KRaft模式 不用依赖 Zookeeper 此部署也适用于不是docker部署的kafka集群 1.启动 Kafka-UI 服务 1.1 kafka 来自docker安装 docker r…

swagger,Knife4j和Yapi

目录 swagger swagger的作用 swagger的使用 一.导入依赖 二.创建swagger配置类,交给SpringIoC容器管理 三.使用swagger依赖的注解来给接口层(controller)的各种方法进行注释 Api ApiOperation ApiImplicitParam ApiModel ApiModelProperty 四:…

mac苹果电脑配置Docker最新国内源

如图: 具体配置如下: {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"registry-mirrors": ["https://docker.anyhub.us.kg", &…

ssrf漏洞之php-fpm未授权访问漏洞利用

目录 环境搭建 ​编辑漏洞点寻找 开始攻击 结果 环境搭建 在你的网站目录下创建一个新的php文件&#xff0c;内容如下 <?php highlight_file(__FILE__); $url $_GET[url]; $curl curl_init($url); curl_setopt($curl, CURLOPT_HEADER, 0); $responseText curl_exec…

ES6笔记总结:第四天(ES6完结)

Xmind鸟瞰图&#xff1a; 简单文字总结&#xff1a; node的模块化&#xff1a; 1.CommonJS 规范&#xff1a;Node.js 遵循 CommonJS 模块规范&#xff0c;该规范定义了如何在服务器环境中实现模块化&#xff0c;包括如何定义模块、如何引入和使用模块。 2.模块的定义&…

CISAW信息安全保障人员考试合格分数是多少?

在网络安全领域&#xff0c;众多认证证书中&#xff0c;CISAW信息安全保障人员认证备受瞩目。 随着信息安全专家的需求激增&#xff0c;国内面临着专业人才的短缺&#xff0c;越来越多人投身于CISAW认证考试。 那么&#xff0c;要通过CISAW认证需多少分数呢&#xff1f;答案是…

【知识图谱】2.知识抽取与知识存储

目录 一、知识抽取 1、实体命名识别&#xff08;Name Entity Recognition&#xff09; 2、关系抽取&#xff08;Relation Extraction&#xff09; 3、实体统一&#xff08;Entity Resolution&#xff09; 4、指代消解&#xff08;Coreference Resolution&#xff0…

【面试问题汇总】

面试问题汇总: Math.round函数:基础加0.5,向下取整 MySQL查询执行流程: 当我们执行一条SQL查询语句时,MySQL数据库会按照以下步骤进行处理: 语法解析器会对SQL语句进行解析,检查SQL语法是否正确。元数据查询器会检查查询的表和字段是否存在,以及当前用户是否具有相应…

RFID光触发标签在零售行业的深度应用

零售行业作为现代经济的重要组成部分&#xff0c;面临着诸多挑战和竞争压力&#xff0c;消费者需求的多样化、快速变化的市场趋势以及日益复杂的供应链管理&#xff0c;都对零售商提出了更高的要求&#xff0c;在这样的背景下&#xff0c;寻求创新的技术解决方案以提高运营效率…

Openstack 与 Ceph集群搭建(下): Openstack部署

文章目录 文章参考部署节点准备1. 修改Host文件与hostname名称2. 安装NTP软件3. 网卡配置信息4. 开启Docker共享挂载5. 安装python虚拟环境6. 安装kolla-ansible7. 加载Ansible galaxy requirements Openstack 安装前预配置1. 配置密码2. 配置multinode文件3. 修改全局配置文件…

在Windows上用Visual Studio编译Tesseract

Tesseract是著名的OCR&#xff08;文字识别&#xff09;开源项目。我想自己编译它的源代码。然而总体而言&#xff0c;大型开源项目在Windows上编译多少都会有些磕磕绊绊&#xff0c;如果有幸最后成功了&#xff0c;都值得写一篇文章来纪念一下。这便是本文的由来。 编译环境&…

客户端可以访问ntp时钟源,时间却一直不同步的问题

ntp时钟源通常是通过开放123 的udp端口对外提供ntp服务的&#xff0c;udp端口的访问可以通过nc -uvz xx.xx.xx.xx 123 端口进行验证&#xff0c;验证发现ntp时钟服务的123端口是开放的&#xff0c;也没有防火墙拦截123端口&#xff0c;但为什么客户端不同步ntp时钟源呢&#xf…

OpenCV杂项图像变换(1)自适应阈值处理函数adaptiveThreshold()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 函数对数组应用自适应阈值。 该函数根据以下公式将灰度图像转换为二值图像&#xff1a; 对于 THRESH_BINARY: t e x t d s t ( x , y ) { maxV…

OpenCV几何图像变换(10)透视变换函数warpPerspective()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 warpPerspective 函数使用指定的矩阵对源图像进行透视变换&#xff1a; dst ( x , y ) src ( M 11 x M 12 y M 13 M 31 x M 32 y M 33 , M…

C++笔记10•容器适配器:stackqueue priority_queue•

从C中看stack&queue&priority_queue 1.stack的介绍 官方stack实现&#xff1a; 本质是一个数组 1. stack 是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack 是作为容器适…

系统之家游戏专用版Win10系统:游戏玩家首选!

今天系统之家小编给大家带来最新的Win10游戏专用版&#xff0c;该版本系统是专为游戏玩家打造的操作系统&#xff0c;针对大型游戏做了专业优化&#xff0c;性能更优秀&#xff0c;玩家玩游戏体验感更好&#xff0c;还有出色的兼容性支持&#xff0c;能完美兼容各种类型的游戏&…

【与C++的邂逅】--- 模板初阶

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客我们将了解C中泛型编程体现的一大利器 --- 模板&#xff0c;有了模板可以帮我们用户省力。 &#x1f3e0; 泛型编程 如何实现一个通…