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或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
