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

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有三种模式。命令模式、输入模式、尾行模式&#xff0c;简单的关系如下&#xff1a; i -- 切换到输入模式&#xff0c;在光标当前位置开始输入文本。&a…...

【Spring实战项目】SpringBoot3整合WebSocket+拦截器实现登录验证!从原理到实战

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…...

第二证券|政策利好不断,工业母机概念爆发,华东数控等涨停

工业母机概念10日盘中大幅走高&#xff0c;截至发稿&#xff0c;恒进感应、宏德股份、华东重机、华东数控等涨停&#xff0c;凯腾精工涨超20%&#xff0c;创世纪涨逾11%&#xff0c;华辰配备、盘古智能涨超9%&#xff0c;博亚精工涨逾8%。 音讯面上&#xff0c;工业和信息化部…...

Thinkphp5萤火商城B2C小程序源码

源码介绍 Thinkphp5萤火商城B2C小程序源码&#xff0c;是一款开源的电商系统&#xff0c;为中小企业提供最佳的新零售解决方案。采用稳定的MVC框架开发&#xff0c;执行效率、扩展性、稳定性值得信赖。 环境要求 Nginx/Apache/IIS PHP5.4 MySQL5.1 建议使用环境&#xff…...

PostgreSQL介绍

PostgreSQL是一个高度先进的对象关系型数据库管理系&#xff08;ORDBMS&#xff09;&#xff0c;其起源可以追溯到1986年&#xff0c;最初是加州大学伯克利分校计算机系的一个项目&#xff0c;名为POSTGRES。它是从Ingres项目演变而来的&#xff0c;目的是克服当时关系数据库系…...

简析数据安全保护策略中的十个核心要素

数据显示&#xff0c;全球企业组织每年在数据安全防护上投入的资金已经超过千亿美元&#xff0c;但数据安全威胁态势依然严峻&#xff0c;其原因在于企业将更多资源投入到数据安全能力建设时&#xff0c;却忽视了这些工作本身的科学性与合理性。因此&#xff0c;企业在实施数据…...

Python+Django+Html河道垃圾识别网页系统

程序示例精选 PythonDjangoHtml河道垃圾识别网页系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoHtml河道垃圾识别网页系统》编写代码&#xff0c;代码整洁&#xff0c;规…...

BUUCTF:BUU UPLOAD COURSE 1[WriteUP]

构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的&#xff0c;只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传&#xff0c;那就用MaxHacKBar来执行 …...

从零开始学习:如何使用Selenium和Python进行自动化测试?

安装selenium 打开命令控制符输入&#xff1a;pip install -U selenium 火狐浏览器安装firebug&#xff1a;www.firebug.com&#xff0c;调试所有网站语言&#xff0c;调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件&#xff0c;实现简单的浏览器操 作的录制与回…...

【linux基础】bash脚本的学习:定义变量及引用变量、统计目标目录下所有文件行数、列数

假设目的&#xff1a;统计并输出指定文件夹下所有文件行数 单个文件可以用 wc -l &#xff1b;多个文件&#xff0c;可以用通配符 / 借助bash脚本 1.定义变量名&#xff0c;使用引号 a"bestqc.com.map" b"Anno.variant_function" c"enrichment/GOe…...

算法四十天-删除排序链表中的重复元素

删除排序链表中的重复元素 题目要求 解题思路 一次遍历 由于给定的链表是排好序的&#xff0c;因此重复的元素在链表中的出现的位置是连续的&#xff0c;因此我们只需要对链表进行一次遍历&#xff0c;就可以删除重复的元素。 具体地&#xff0c;我们从指针cur指向链表的头节…...

Linux-等待子进程

参考资料&#xff1a;《Linux环境编程&#xff1a;从应用到内核》 僵尸进程 进程退出时会进行内核清理&#xff0c;基本就是释放进程所有的资源&#xff0c;这些资源包括内存资源、文件资源、信号量资源、共享内存资源&#xff0c;或者引用计数减一&#xff0c;或者彻底释放。…...

【LeetCode热题100】【二叉树】二叉树的最大深度

题目链接&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 最大深度等于左子树的最大深度和右子树的最大深度中的较大者加一 class Solution { public:int maxDepth(TreeNode *root) {if (!root)return 0;return max(maxDepth(root->left), max…...

想做产品经理,应该选择什么专业?

产品经理作为互联网公司的核心职位&#xff0c;一直以来备受关注。随着互联网的不断发展&#xff0c;产品经理的需求也越来越高&#xff0c;很多人都想要了解哪些专业适合做产品经理。本文将为大家介绍几个适合做产品经理的专业。 1、心理学相关专业 C端产品工作的本源&#x…...

[机器学习Day 1~3

[机器学习]Day 1~3 数据预处理第1步&#xff1a;导入库第2步&#xff1a;导入数据集第3步&#xff1a;处理丢失数据第4步&#xff1a;解析分类数据创建虚拟变量 第5步&#xff1a;拆分数据集为训练集合和测试集合第6步&#xff1a;特征量化 简单线性回归模型第一步&#xff1a;…...

Day106:代码审计-PHP原生开发篇文件安全上传监控功能定位关键搜索1day挖掘

目录 emlog-文件上传&文件删除 emlog-模板文件上传 emlog-插件文件上传 emlog-任意文件删除 通达OA-文件上传&文件包含 知识点&#xff1a; PHP审计-原生开发-文件上传&文件删除-Emlog PHP审计-原生开发-文件上传&文件包含-通达OA emlog-文件上传&文件…...

数码视讯Q7盒子刷armbian遇到的坑之二

继续&#xff0c;nand的q7 搜遍全网&#xff0c;这个盒子能用的安卓映像有两个&#xff0c;一个本站付费下载的那个&#xff0c;另一个是20191218-Q7-nand-4.4.2-root-twrp-Milton这个映像&#xff08;具体地址自己搜索吧&#xff09;。第一个需要license&#xff0c;需要自己…...

vue2 使用vue-org-tree demo

1.安装 npm i vue2-org-tree npm install -D less-loader less安装 less-loader出错解决办法&#xff0c;直接在package.json》devDependencies下面加入less和less-loader版本&#xff0c;然后执行npm i &#xff0c;我用的nodejs版本是 16.18.0&#xff0c;“webpack”: “^4…...

【数据结构】考研真题攻克与重点知识点剖析 - 第 7 篇:查找

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...