Echarts地图之——如何给省份名称添加背景图片背景色

news2024/9/22 5:28:26

上次添加的背景是给整张地图添加的,如果想要给省份名称设置背景图,我们就要在label配置里面去添加设置。

series: [
{
        type: 'map',
        map: 'china',
        aspectScale: 0.85,
        zoom: 1.2,
        top: '9%',
        left: '11%',
        roam: false,
        selectedMode: 'multiple',
        label: {
            show: true,
            color: '#FFF',
            fontSize: 25,
            formatter:  function (value) {
                //不显示南海渚岛文字
                if (value.name == '南海诸岛') {
                    return ' '
                }
                //*****************默认省份名称样式
                return '{a|' + value.name + '}'
            },
            rich: {
                //**********************设置的默认样式
                a: {
                    color: '#FFF',
                    fontSize: 25,
                    fontStyle: 'italic',
                    align: 'center',
                    // width: 90,
                    height: 40,//************宽高根据背景图片来定
                    padding: [10, 15, 10, 15],
                    backgroundColor: {
                        image: 'data:image/png;base64,*****这里放默认的背景图的base64******'
                    },
                },
                //********************特殊显示的样式
                b: {
                    color: '#2e5685',
                    fontSize: 30,
                    fontWeight: 'bold',
                    fontStyle: 'italic',
                    align: 'center',
                    width: 140,
                    height: 70,
                    padding: [0, 10, 0, 10],
                    backgroundColor: {
                        image: 'data:image/png;base64,*****这里放默认的背景图的base64********'
                    },
                }
            }
        },
        itemStyle: {
        	//还是上次的配置,背景透明
            borderColor: '#4f83b3',
            borderWidth: 2,
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'transparent' // 0% 处的颜色
                    // color: '#fff' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                    // color: '#fff' // 100% 处的颜色
                }],
                global: true, // 缺省为 false
                // image: ''
            },
        },
        emphasis: {
            //悬浮高亮的配置
        },
        select: {
            //选中的配置
        },
        zlevel: 2,
        data: []
    },
]

这样就默认给了所有的省份设置了rich为a的样式,要设置的背景图就放到backgroundColor的image里面就行。
在这里插入图片描述
如果我们需要根据后端返回数据给对应的省份设置rich为b的样式,则只需要对label的formatter重新设置即可。

let proArr = [];
this.data.forEach(item => {
	//根据需求的条件给proarr添加省份的名称,可自行添加判断条件
    proArr.push(item.PROVINCE_NAME)
    baseOption.series[1].data.push({
        name: item.PROVINCE_NAME,
        value: item.数据,
    })
})
//baseOption是给option设置的变量名称
baseOption.series[1].label.formatter = function (value) {
    //隐藏南海渚岛文字
    if (value.name == '南海诸岛') {
        return ' '
    }
    //如果是proarr所包含的省份,设置rich为b的样式
    if (proArr.includes(value.name)) {
        return '{b|' + value.name + '}'
    }
    //其他默认仍然是a
    return '{a|' + value.name + '}'
}
this.cncharts.clear()
this.cncharts.setOption(baseOption);

同样,如果要根据省份的数据来给省份添加背景色,则通过visualMap来设置

visualMap: {
    show: false,//是否显示visualmap的图例
    type: "piecewise",
    pieces: [//根据数据条件来设置
        {gte: 20, label: '大于等于20'},
        {gt: 0, lt: 20, label: '0 到 20'},
        {lte: 0, label: '小于等于0'},
    ],
    inRange: {//很遗憾,这里只能设置统一颜色的rgba,不能像series里面一样设置从某一方向到另一方向的渐变
        color: ["rgba(1, 255, 230, .5)", "rgba(95, 250, 110, .5)", "rgba(36, 105, 195, .5)"],
    }
},

最后我们看到的配置了对应条件的省份就会是下面这样的
在这里插入图片描述

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

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

相关文章

基于springboot的服装商城系统(含源文件)

(源码附文章底部) 摘 要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,时装购物系统当然也不能排除在外。时装购物系统是以实际运用为开发背景&#…

C++关键字:const

文章目录 一、const的四大作用1.修饰 变量、数组2.修饰 函数的形参、修饰 引用 (最常用)3.修饰 指针:常量指针、指针常量 、只读指针4.修饰 类的成员函数、修饰 类的对象 一、const的四大作用 1.修饰 变量、数组 1.const修饰变量: 被const修…

牛客周赛 Round 37 E.魔法之森的蘑菇

广搜板子&#xff0c;加个方向就好了 注意多测清空问题 #include<bits/stdc.h> using namespace std; using ll long long; #define int long long const int N 1e510; const int inf 0x3f3f3f3f; const int mod 1e97;int n,m; char g[1010][1010]; bool vis[1010][1…

思科网络中DHCP协议的配置

一、什么是DHCP&#xff1f;DHCP有什么作用&#xff1f; &#xff08;1&#xff09;DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络协议&#xff0c;用于在局域网中自动分配IP地址和其他网络配置信息给计算机设备。我们电脑连接WiFi的时一般就是…

CCF-CSP认证考试 202305-3 解压缩 100分题解

更多 CSP 认证考试题目题解可以前往&#xff1a;CSP-CCF 认证考试真题题解 原题链接&#xff1a; 202305-3 解压缩 时间限制&#xff1a; 5.0s 内存限制&#xff1a; 512.0MB 题目背景 西西艾弗岛运营公司是一家负责维护和运营岛上基础设施的大型企业。在公司内&#xff0c;…

戳-考察C++基础的两道小题

昨天分享了一天本来是考察unique_ptr禁止拷贝行为的&#xff0c;但是粘贴的时候贴成正确代码了&#xff0c;于是&#xff0c;今天继续找两道小题来练练手。 今天这两道小题&#xff0c;你能回答上来不&#xff0c;题目1有至少6处错误&#xff0c;你能找到几个&#xff1f;题目2…

旅游小程序开发的费用及功能

随着科技的发展和智能手机的普及&#xff0c;越来越多的行业开始利用小程序来进行线上服务。旅游业作为一个重要的服务业&#xff0c;也纷纷推出了自己的旅游小程序&#xff0c;以方便游客在线预订、查询景点信息等。那么&#xff0c;旅游小程序开发的费用是多少&#xff1f;功…

Flask项目中使用蓝湖实现启动项配置——多个controller项

项目结构 # controller1-__init__.py from flask import Blueprintcont2_sale_blueprint Blueprint(cont2_sale_blueprint, __name__) cont2_user_blueprint Blueprint(cont2_user_blueprint, __name__) from . import user_controller from . import sale_controller# contr…

哨兵位及用哨兵位实现链表的链接

哨兵位&#xff1a; 通俗的话讲就是额外开辟一块空间&#xff0c;指向链表的头部。 合并两个有序链表 已解答 简单 相关标签 相关企业 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#…

思腾合力受邀出席文化和旅游虚拟现实应用推广交流活动并作主题演讲

3月21日&#xff0c;由文化和旅游部产业发展司主办&#xff0c;中国信息通信研究院、北京市石景山区文化和旅游局、中国动漫集团有限公司承办的“数字赋能文旅场景建设行动——文化和旅游虚拟现实应用推广交流活动”在北京首钢一高炉SoReal科幻乐园成功举办。 思腾合力CMO徐莉受…

北斗卫星在公路养护中的应用

北斗卫星在公路养护中的应用 北斗卫星是我国自主研发的一款卫星导航系统&#xff0c;它为公路养护工作提供了新的解决方案。通过使用北斗卫星技术&#xff0c;公路养护部门可以实时获取道路状况&#xff0c;提高工作效率&#xff0c;为交通安全保驾护航。 首先&#xff0c;北斗…

海边游艇港口迈入智能新纪元:数字孪生系统引领未来趋势

在浩瀚的海洋边&#xff0c;游艇港口不仅是停泊游艇的港湾&#xff0c;更是展现城市风貌与智慧科技的窗口。如今&#xff0c;随着数字化技术的飞速发展&#xff0c;海边游艇港口也迎来了前所未有的变革——数字孪生系统的应用&#xff0c;正悄然改变着传统游艇港口的运营模式&a…

【书生·浦语大模型实战营】学习笔记2

Lagent&#xff1a;智能体框架&#xff0c;实现将一个大语言模型转化为多种类型的智能体&#xff0c;更好地发挥InternLM的性能 浦语灵笔&#xff1a;视觉语言大模型 InternLM-Chat-7B智能对话Demo 环境准备 使用复制的internlm-demo环境 # 执行该脚本文件来安装项目实验环境…

GPT-5可能会在今年夏天作为对ChatGPT的“实质性改进”而到来

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

明明有这个字段但是又一直说不存在,完美解决 Unknown column ‘xxx ‘ in ‘where clause‘

一、情景再现 二、排查错因&#xff1a;仔细看多了空格&#xff0c;映射的时候就有问题 三、去看映射&#xff0c;果然多了空格&#xff0c;去掉空格&#xff0c;重启 四、完美解决

PyTorch深度学习:遥感影像地物分类的高效工具

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…

《数字集成电路物理设计》学习笔记(持续更新中)

参考书籍&#xff1a; 《数字集成电路物理设计》pdf下载百度云链接&#xff1a; 链接: https://pan.baidu.com/s/1jOD54q_f9KLhfX6InabTRA?pwd8888 提取码: 8888 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v8的分享 目录 第1章 集…

Swift 中的 Sequence 是什么 ?

在 Swift 中&#xff0c;Sequence 是一个协议&#xff0c;它表示一个可以遍历其元素的集合类型。任何遵循 Sequence 协议的类型都必须提供一个迭代器&#xff0c;用于按顺序访问其元素。迭代器是通过 makeIterator() 方法获取的&#xff0c;该方法返回一个遵循 IteratorProtoco…

进程控制 | 认识fork函数 | 进程终止 | 进程等待

进程创建 初始fork函数 fork函数是为了创建子进程而生的&#xff0c;通过fork函数之后&#xff0c;我们的父进程的代码和数据是共享的&#xff0c;我们这里是可以通过man手册进行查询的&#xff0c;查询之后是可以发现fork函数是会返回两个值的至于为什么会返回两个值&#x…

备考ICA----Istio实验1---Istio部署和Bookinfo

备考ICA----Istio实验1—Istio部署和Bookinfo 打算2024年4月份考Istio的ICA认证,系统的再把Istio相关功能的实验再摸排一遍 本套实验环境如下 序号软件版本1UbuntuUbuntu 20.04.6 LTS2Kubernetesv1.29.23kubeadmv1.29.24Istio1.20.35Envoy1.20.3 candidatemaster:~$ kubectl…