【DataV/echarts】vue中使用,修改地图和鼠标点击部分的背景色

引入:使用 DataV 引入地图的教程是参考别人的,主要介绍修改地图相关的样式;
引入地图
是参考别人的,这里自己再整理一遍,注意需要安装 5 版本以上的 echarts
DataV 网址:https://datav.aliyun.com/portal/school/atlas/area_selector
选中你需要的地图区域,点复制:
在这里插入图片描述
在这里插入图片描述
然后再组件中:

<template><div class="hello"><div style="width: 800px;height: 600px;" ref="aaa"></div></div>
</template><script>
import * as echarts from "echarts"
import getShanXiMap from '../api/getShanXiMap'export default {name: 'HelloWorld',mounted() {// 初始化统计图对象var myChart = echarts.init(this.$refs["aaa"]);// 获取移入的每一个省份的配置信息myChart.on('mouseover', function (params) {console.log(params);})// 显示 loading 动画myChart.showLoading();// 再得到数据的基础上,进行地图绘制getShanXiMap.then(res => {// 得到结果后,关闭动画myChart.hideLoading();// 注册地图,数据放在axios返回对象的data中echarts.registerMap('SX', res.data);var option = {series: [{name: '陕西地图',type: 'map',map: 'SX', // 这是上面注册时的名字label: {show: true,// 地图上显示的文字颜色color: '#0A4788'},// 重点,更改地图的颜色和当前激活部分的颜色itemStyle: {// 正常预览的状态下,更改背景色和边框线颜色normal: {areaColor: '#D9EBFE',borderColor: '#FFFFFF',},// 选中的状态下,更改背景色emphasis: {areaColor: '#75B6F6',label: {show: true,color: '#fff'}},},// 鼠标点击后select: {// 标签文本的样式设置label: {show: true,color: "#fff"},// 地图区域的样式设置itemStyle: {// 被点击后的背景颜色areaColor: "#75B6F6",},},}]};myChart.setOption(option);})}}
</script><style scoped lang="less">
.hello {width: 800px;height: 2000px;background-color: skyblue;
}
</style>

更改样式的主要是这一部分,要注意写的位置,是在series里面:

// 重点,更改地图的颜色和当前移入部分的颜色
itemStyle: {// 正常预览的状态下normal: {// 更改背景色和边框线颜色areaColor: '#D9EBFE',borderColor: '#FFFFFF'},// 悬浮区域emphasis: {// 更改背景颜色areaColor: '#75B6F6'}
},// 鼠标点击后
select: {// 标签文本的样式设置label: {show: true,color: "#fff"},// 地图区域的样式设置itemStyle: {// 被点击后的背景颜色areaColor: "#75B6F6",},
},

预览效果:
在这里插入图片描述

补充:
在这里插入图片描述

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

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

相关文章

浅谈Http协议、TCP协议(转载)

TCP标志位,有6种标示&#xff1a;SYN(synchronous建立联机) &#xff0c;ACK(acknowledgement 确认) &#xff0c;PSH(push传送)&#xff0c;FIN(finish结束) &#xff0c;RST(reset重置)&#xff0c; URG(urgent紧急) Sequence number(顺序号码) &#xff0c;Acknowledge num…

《向量数据库指南》——向量数据库Milvus Cloud 2.3的可运维性:从理论到实践

一、引言 在数据科学的大家庭中,向量数据库扮演着重要角色。它们通过独特的向量运算机制,为复杂的机器学习任务提供了高效的数据处理能力。然而,如何让这些数据库在生产环境中稳定运行,成为了运维团队的重要挑战。本文将深入探讨向量数据库的可运维性,并分享一些有趣的案…

新风机未来什么样?

新风机在未来将会有许多令人期待的发展和改进&#xff0c;让我们一起来看一看吧&#xff01;以下是新风机未来的一些可能性&#xff1a; 智能化和智能家居&#xff1a;新风机将更多地与智能家居系统整合&#xff0c;通过物联网和人工智能技术&#xff0c;实现智能控制和智能调节…

Anaconda下 Prophet的安装,pystan和fbprophet的版本问题

一、安装pystan conda install pystan2.19.1.1 二、安装fbprophet conda install fbprophet0.7.1 -c conda-forge Prophet有prophet和fbprophet两个包可以安装&#xff0c;我这里用的是fbprophet 三 import fbprophet 后会提示&#xff1a; ERROR:fbprophet:Importing p…

Go语言高阶:Reflection反射与Files操作 详细示例教程

目录标题 一、Reflection反射1. What is reflection? 什么是反射2. Inspect a variable and find its type 检查变量并找到它的类型3. Reflect.Type and reflect.Value 反射类型和值4. Reflect.Kind 查看底层种类5. NumField() and Field() methods 字段数量和索引值方法6. In…

听觉刺激期间的神经血管耦合:ERPs和fNIRS血流动力学

导读 强度依赖性振幅变化(IDAP)已在事件相关电位(ERPs)中进行了广泛的研究&#xff0c;并与多种精神疾病相关联。本研究旨在探讨功能近红外光谱(fNIRS)在IDAP范式中的应用&#xff0c;该范式与ERPs相关&#xff0c;可以指示神经血管耦合的存在。两个实验分别有33和31名参与者。…

JS的深拷贝和浅拷贝

‍本文作者是360奇舞团开发工程师 数据类型的数据存储 在讨论深拷贝和浅拷贝之前&#xff0c;先来了解下Js基本数据和引用数据类型的存储问题 基本数据类型&#xff1a;Number String Boolean Undefined Symbol Null引用类型 &#xff1a;Object,function,Array等 基本数据类型…

ChatGPT:深度学习和机器学习的知识桥梁

目录 ChatGPT简介 ChatGPT的特点 ChatGPT的应用领域 ChatGPT的工作原理 与ChatGPT的交互 ChatGPT的优势 ChatGPT在机器学习中的应用 ChatGPT在深度学习中的应用 总结 近年来&#xff0c;随着深度学习技术的不断发展&#xff0c;自然语言处理技术也取得了显著的进步。其…

lnmp环境搭建

文章目录 一、环境信息二、LNMP环境搭建2.1 准备编译环境2.2 nginx安装2.3 mysql安装2.4 php安装2.5 nginx配置2.6 mysql配置2.7 配置php 三、常见问题3.1 安装其它版本的nginx服务3.2 php版本过低 一、环境信息 操作系统&#xff1a;公共镜像CentOS 7.8 64位 本文的部署配置…

Bean 的生命周期总结

目录 一、Bean生命周期的五个阶段 Bean的初始化 二、PostConstruct 和 PreDestroy 各自的效果 三、 实例化和初始化的区别 四、为什么要先设置属性在进⾏初始化呢&#xff1f; 一、Bean生命周期的五个阶段 Java 中的公共类称之为 Bean 或 Java Bean&#xff0c;而 Spring 中的…

golang中给数据库datetime格式赋值

type A struct {CreateTime *time.Time gorm:"create_time" } 1、定义数据库表映射结构体如上&#xff0c;create_time字段在表里面是datetime格式。 2、如果CreateTime不给值&#xff0c;在存库时&#xff0c;create_time字段的值为NULL。 3、赋值时&#xff0c;…

STM32F4X RNG随机数发生器

STM32F4X RNG随机数发生器 随机数的作用STM32F4X 随机数发生器RNG控制寄存器RNG状态寄存器RNG数据寄存器RNG数据步骤RNG例程 随机数的作用 随机数顾名思义就是随机产生的数字&#xff0c;这种数字最大的特点就是其不确定性&#xff0c;你不知道它下一次产生的数字是什么。随机…

计算机网络-谢希任第八版学习笔记总结

一.计算机网络概述 21世纪三个特点 数字化 信息化 智能化&#xff0c;其中主要是围绕智能化。 网络的常见分类&#xff1a; 电话网络 有线电视网络 计算机网络 互联网&#xff1a;Internet 由数量极大的计算机网络相连接 特点&#xff1a; 共享性 连通性 互联网&…

2023年数模国赛时间分配

2023年数模国赛时间分配 写在前面赛前准备第一天&#xff08;9.7 18:00发布题目&#xff09;第二天&#xff08;9.8&#xff09;第三天&#xff08;9.9&#xff09;第四天&#xff08;9.10 20:00提交&#xff09;总结 写在前面 国赛马上就要开始啦 今年的比赛时间是9月7日&…

网络安全-子域名收集

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 子域名 子域名指二级域名,二级域名是顶级域名(一级域名)的下一级比如mail.heetian.com和bbs.heetian.com…

【深度学习】基于卷积神经网络的铁路信号灯识别方法

基于卷积神经网络的铁路信号灯识别方法 摘 要&#xff1a;1 引言2 卷积神经网络模型2.1 卷积神经网络结构2.2.1 卷积层2.2.2 池化层2.2.3 全连接层 3 卷积神经网络算法实现3.1 数据集制作3.2 卷积神经网络的训练过程3.2.1 前向传播过程 4 实验5 结语 摘 要&#xff1a; 目前中…

系统架构设计师(第二版)学习笔记----系统架构设计师概述

【原文链接】系统架构设计师&#xff08;第二版&#xff09;学习笔记----系统架构设计师概述 文章目录 一、架构设计师的定义、职责和任务1.1 架构设计师的定义1.2 架构设计师的任务 二、架构设计师应具备的专业素质2.1 架构设计师应具备的专业知识2.2 架构设计师的知识结构2.3…

Android 集成onenet物联网平台

一&#xff0c;在Android应用程序中集成OneNet物联网平台&#xff0c;您可以按照以下步骤进行操作&#xff1a; 注册OneNet账户&#xff1a;首先&#xff0c;您需要在OneNet官方网站上注册一个账户。访问OneNet网站&#xff08;https://open.iot.10086.cn/ ↗&#xff09;&…

Unity UGUI(一)基础组件

文章目录 1.Text&#xff1a;文本框2.Image&#xff1a;精灵图3.RawImage&#xff1a;生图4.Button&#xff1a;按钮5.InputField&#xff1a;输入框6.Tooggle&#xff1a;选择框7.Slider&#xff1a;滑动条8.Dropdown&#xff1a;下拉菜单9.Scrollbar&#xff1a;滚动条10.Scr…

网络威胁防御+资产测绘系统-Golang开发

NIPS-Plus 网络威胁防御资产测绘系统-Golang开发 项目地址&#xff1a;https://github.com/jumppppp/NIPS-Plus NIPS-Plus 是一款使用golang语言开发的网络威胁防御系统&#xff08;内置资产测绘系统&#xff09; 网络威胁流量视图网络威胁详细信息浏览列表网络威胁反制探测攻…