mapbox 工作问题暂时记录
mapbox 工作问题暂时记录
- mapbox样式修改
- 1.
- 2.
- 3.
- 4.
mapbox样式修改
1.
mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式
2.
map.value.getStyle().layers
这行代码可以获取页面中所有图层,可以判断图层id来做相应操作
3.
map.value.setLayoutProperty(layer.id, 'visibility', 'visible')//图层显示
map.value.setLayoutProperty(layer.id, 'visibility', 'none');//图层隐藏
layer.id为map.value.addlayer里的id
4.
vue3 echarts 报错 TypeError: this.dom.getContext is not a function
<div class="boxConten" v-for="item in listData" :key="item"><ul class="point-information-box" v-if="item.ranking == '1'"></ul><div class="barchart-box" v-else-if="item.ranking == '2'"><!-- 方法一: --><!-- <div ref="EchartsRef" :ref="pushBtnList" style="width: 150px; height: 140px"></div> --><!-- 方法二: --><div :ref="pushBtnList" style="width: 150px; height: 140px"></div></div><div class="barchart-box" v-else-if="item.ranking == '3'"></div><div class="barchart-box" v-else></div></div>
const listData = ref([{title: '当年统计详情',ranking: '1',list: [[{ num: 98, unit: '(%)', name: '检测点合格率' },{ num: 100, unit: '(%)', name: '样品合格率' },],[{ num: 356, unit: '(次)', name: '检测总次数' },{ num: 486, unit: '(个)', name: '样品总量' },],[{ num: 25, unit: '(次)', name: '指标异常总次数' },{ num: 4, unit: '(个)', name: '异常指标总数量' },],],},{title: '近12月合格率曲线',ranking: '2',switchoverText: [{ name: '检测点', show: true },{ name: '样品', show: false },],show: true,},{title: '近12月合格率曲线',ranking: '3',switchoverText: [{ name: '指标异常次数', show: true },{ name: '异常指标数量', show: false },],show: true,},{ title: '近12月异常指标占比', ranking: '4' },
]);
const EchartsRef = ref();
const pushBtnList = (el) => {EchartsRef.value = el;
};
onMounted(() => {initChart();
});
const initChart = () => {// 初始化图表let timeArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];let valueArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];initecharts(timeArr, valueArr);
};//加载echarts图
const initecharts = (timeArr: any[], valueArr: any[]) => {//方法一//let myEcharts = echarts.init(EchartsRef.value[0] as unknown as HTMLElement);//方法二let myEcharts = echarts.init(EchartsRef.value as unknown as HTMLElement);let option = {tooltip: {trigger: 'axis',},grid: {right: '3%',left: '5%',},xAxis: {type: 'category',data: timeArr,// gridIndex: index,axisLabel: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 10,color: '#3D3D3D',},axisTick: {show: false,},axisLine: {show: false,},splitLine: {show: true,lineStyle: {color: '#EBF0F5',},},},yAxis: {type: 'value',name: '',nameTextStyle: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 12,color: '#3D3D3D',},axisLabel: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 10,color: '#3D3D3D',},splitLine: {show: true,lineStyle: {color: '#EBF0F5',},},axisLine: {show: false,},axisTick: {show: false,},},dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 0,end: 100,backgroundColor: 'none',fillerColor: 'rgba(168, 177, 188, 0.14);', //选中范围的填充颜色borderColor: '#EBF0F5',},{type: 'inside',xAxisIndex: [0],},],series: [{data: valueArr,type: 'line',smooth: true,},],};myEcharts.setOption(option);// 监听窗口变化,echarts重绘window.addEventListener('resize', function () {myEcharts.resize();});
};
报错总结: v-for 循环会影响到dom的生成, for循环了 会出现多个dom,你ref参数 由原来的 一个 变成了多个
方法一: 在for循环里生成echarts 使用ref绑定, 获取时需要[0]
方法二: 在for循环里生成echarts 使用动态ref绑定, 在pushBtnList里面赋值给 echarts绑定的值,并且不需要下标取值
持续更新…
相关文章:
mapbox 工作问题暂时记录
mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. mapbox样式修改 1. mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式 2. map.value.getStyle().layers这行代码可以获取页面中所有图层,可以判断图层id来做相应操作 3. map.value.setLayoutProperty(layer.id…...
Linux、Docker、Brew、Nginx常用命令
Linux、Docker、Brew、Nginx常用命令 Linuxvi编辑器文件操作文件夹操作磁盘操作 DockerBrewNginx参考 Linux vi编辑器 Vi有三种模式。命令模式、输入模式、尾行模式,简单的关系如下: i -- 切换到输入模式,在光标当前位置开始输入文本。&a…...
【Spring实战项目】SpringBoot3整合WebSocket+拦截器实现登录验证!从原理到实战
🎉🎉欢迎光临,终于等到你啦🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟持续更新的专栏《Spring 狂野之旅:从入门到入魔》 &a…...
第二证券|政策利好不断,工业母机概念爆发,华东数控等涨停
工业母机概念10日盘中大幅走高,截至发稿,恒进感应、宏德股份、华东重机、华东数控等涨停,凯腾精工涨超20%,创世纪涨逾11%,华辰配备、盘古智能涨超9%,博亚精工涨逾8%。 音讯面上,工业和信息化部…...
Thinkphp5萤火商城B2C小程序源码
源码介绍 Thinkphp5萤火商城B2C小程序源码,是一款开源的电商系统,为中小企业提供最佳的新零售解决方案。采用稳定的MVC框架开发,执行效率、扩展性、稳定性值得信赖。 环境要求 Nginx/Apache/IIS PHP5.4 MySQL5.1 建议使用环境ÿ…...
PostgreSQL介绍
PostgreSQL是一个高度先进的对象关系型数据库管理系(ORDBMS),其起源可以追溯到1986年,最初是加州大学伯克利分校计算机系的一个项目,名为POSTGRES。它是从Ingres项目演变而来的,目的是克服当时关系数据库系…...
简析数据安全保护策略中的十个核心要素
数据显示,全球企业组织每年在数据安全防护上投入的资金已经超过千亿美元,但数据安全威胁态势依然严峻,其原因在于企业将更多资源投入到数据安全能力建设时,却忽视了这些工作本身的科学性与合理性。因此,企业在实施数据…...
Python+Django+Html河道垃圾识别网页系统
程序示例精选 PythonDjangoHtml河道垃圾识别网页系统 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《PythonDjangoHtml河道垃圾识别网页系统》编写代码,代码整洁,规…...
BUUCTF:BUU UPLOAD COURSE 1[WriteUP]
构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的,只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传,那就用MaxHacKBar来执行 …...
从零开始学习:如何使用Selenium和Python进行自动化测试?
安装selenium 打开命令控制符输入:pip install -U selenium 火狐浏览器安装firebug:www.firebug.com,调试所有网站语言,调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件,实现简单的浏览器操 作的录制与回…...
【linux基础】bash脚本的学习:定义变量及引用变量、统计目标目录下所有文件行数、列数
假设目的:统计并输出指定文件夹下所有文件行数 单个文件可以用 wc -l ;多个文件,可以用通配符 / 借助bash脚本 1.定义变量名,使用引号 a"bestqc.com.map" b"Anno.variant_function" c"enrichment/GOe…...
算法四十天-删除排序链表中的重复元素
删除排序链表中的重复元素 题目要求 解题思路 一次遍历 由于给定的链表是排好序的,因此重复的元素在链表中的出现的位置是连续的,因此我们只需要对链表进行一次遍历,就可以删除重复的元素。 具体地,我们从指针cur指向链表的头节…...
Linux-等待子进程
参考资料:《Linux环境编程:从应用到内核》 僵尸进程 进程退出时会进行内核清理,基本就是释放进程所有的资源,这些资源包括内存资源、文件资源、信号量资源、共享内存资源,或者引用计数减一,或者彻底释放。…...
【LeetCode热题100】【二叉树】二叉树的最大深度
题目链接:104. 二叉树的最大深度 - 力扣(LeetCode) 最大深度等于左子树的最大深度和右子树的最大深度中的较大者加一 class Solution { public:int maxDepth(TreeNode *root) {if (!root)return 0;return max(maxDepth(root->left), max…...
想做产品经理,应该选择什么专业?
产品经理作为互联网公司的核心职位,一直以来备受关注。随着互联网的不断发展,产品经理的需求也越来越高,很多人都想要了解哪些专业适合做产品经理。本文将为大家介绍几个适合做产品经理的专业。 1、心理学相关专业 C端产品工作的本源&#x…...
[机器学习Day 1~3
[机器学习]Day 1~3 数据预处理第1步:导入库第2步:导入数据集第3步:处理丢失数据第4步:解析分类数据创建虚拟变量 第5步:拆分数据集为训练集合和测试集合第6步:特征量化 简单线性回归模型第一步:…...
Day106:代码审计-PHP原生开发篇文件安全上传监控功能定位关键搜索1day挖掘
目录 emlog-文件上传&文件删除 emlog-模板文件上传 emlog-插件文件上传 emlog-任意文件删除 通达OA-文件上传&文件包含 知识点: PHP审计-原生开发-文件上传&文件删除-Emlog PHP审计-原生开发-文件上传&文件包含-通达OA emlog-文件上传&文件…...
数码视讯Q7盒子刷armbian遇到的坑之二
继续,nand的q7 搜遍全网,这个盒子能用的安卓映像有两个,一个本站付费下载的那个,另一个是20191218-Q7-nand-4.4.2-root-twrp-Milton这个映像(具体地址自己搜索吧)。第一个需要license,需要自己…...
vue2 使用vue-org-tree demo
1.安装 npm i vue2-org-tree npm install -D less-loader less安装 less-loader出错解决办法,直接在package.json》devDependencies下面加入less和less-loader版本,然后执行npm i ,我用的nodejs版本是 16.18.0,“webpack”: “^4…...
【数据结构】考研真题攻克与重点知识点剖析 - 第 7 篇:查找
前言 本文基础知识部分来自于b站:分享笔记的好人儿的思维导图与王道考研课程,感谢大佬的开源精神,习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...
Spring事务传播机制有哪些?
导语: Spring事务传播机制是后端面试中的必考知识点,特别容易出现在“项目细节挖掘”阶段。面试官通过它来判断你是否真正理解事务控制的本质与异常传播机制。本文将从实战与源码角度出发,全面剖析Spring事务传播机制,帮助你答得有…...
