![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
浪潮行舟
眼界决定境界,格局决定结局。
舟至中流催帆竞,击楫勇进破浪行。
展开
-
echarts系列:echarts中的legend名称最上面被遮挡一部分
如果问题仍然存在,检查图表的所有配置,确保没有其他布局设置导致重叠。在调整设置时,记得在浏览器中实时查看效果,以便做出适当的调整。被遮挡的原因,通常是因为布局问题,可能涉及到。的位置、尺寸或者是与其他组件的重叠。通过调整上述属性,能够解决大部分。通过排查问题,发现以下一些解决。在 ECharts 中,遇到。的名称在图表中被遮挡。原创 2024-06-05 17:37:26 · 462 阅读 · 0 评论 -
ECharts系列:基本使用及配置项
常常能起到突出该区域的效果。详情参考文章:ECharts系列:series盒须图(箱体图)基本使用与配置大全 这个里面主要是控制图形的数据与图表的类型,如柱形图、饼图、箱体图等,配置项如。出现的位置不同代表的含义不同,但是你会发现即使形式或者位置不同但是它使用起来是一样的,下面我就以color为例演示一下。位置不同:在了解ECharts的配置项时,有的属性可以在option中全局配置,也可以局部配置。可以全局配置,也可以局部配置,详情参考文章:Echart系列:颜色color配置项大全。原创 2024-05-10 14:39:06 · 793 阅读 · 0 评论 -
ECharts系列文章汇总(持续更新中)
ECharts是一款基于JavaScript的数据可视化图表库,提供了直观、生动、可交互、可个性化定制的数据可视化图表。发展历程ECharts最初由百度团队开源,并在2018年初捐赠给Apache基金会,成为ASF孵化级项目。2021年1月26日,Apache基金会官方宣布ECharts项目正式毕业,成为Apache顶级项目。2021年1月28日,ECharts 5线上发布会举行。主要功能与特性。原创 2024-05-10 14:11:04 · 385 阅读 · 0 评论 -
【记录】常见的前端设计系统(Design System)
TDesign 是具有包容性的设计体系,它强调为业务提供产品、服务等过程中,追求以人为本、人人受益的包容性,要求搭建过程中,了解业务底层,理解业务场景的多样性,并在繁杂的业务场景中寻找共性和特性,确保彼此能灵活地在同一个环境并存,既能满足当下需要,也能作用于更广泛的场景,为不同的产品保留定制空间,在保证不同产品能够体现自我特色的同时,TDesign 还可以为更广泛的产品提供适合的服务。这样的工作模式引发的副作用如:“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现,变成一个急待解决的问题。转载 2024-05-09 15:15:17 · 898 阅读 · 0 评论 -
JavaScript:Window 打开新窗口的几种方式 window.location.href、window.open、window.showModalDialog
先将JavaScript中Window 打开新窗口的几种方式(window.location.href、window.open、window.showModalDialog)进行知识小结备份;要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。另外几个属性用在HTA中的,在一般的网页中一般不使用。原创 2024-04-26 09:57:54 · 1871 阅读 · 3 评论 -
JavaScript系列:实用的数组比较方法
但是,由于JavaScript中数组是以引用方式比较,而非值比较,这使得直接使用等号(== 或 ===)比较两个数组通常会返回false。例如:。在JavaScript中,如果两个数组变量指向同一个数组,那么它们是相等的。但如果两个数组包含相同的元素,即便它们是独立创建的,使用===进行比较时也会返回false。例如:。Array.every()方法提供了一种更精确的比较方式,确保数组在长度和所有位置上的元素值都相同。直接使用==或===比较会因为引用差异而失败。原创 2024-04-19 16:12:54 · 377 阅读 · 2 评论 -
CSS系列:伪类选择器小记
组合选择器的使用有助于保持HTML代码的语义化,因为它们允许开发者基于元素之间的自然关系来应用样式,而不是强迫添加额外的类或ID。这种做法增加了样式的可复用性,因为相同的组合选择器样式可以在不同的HTML结构中被复用,只要这些结构符合选择器定义的元素关系。组合选择器在CSS中扮演着至关重要的角色,它们提供了一种强大的机制来选择具有特定关系的元素,从而允许开发者以更精细、更具体的方式应用样式。使用伪元素可以在不增加额外HTML元素的情况下实现复杂的设计,这有助于减少DOM的大小,从而提高网页的性能。原创 2024-04-19 15:58:50 · 852 阅读 · 0 评论 -
【知识点】开发中与时间相关的名词
协调世界时,又称世界统一时间、世界标准时间、国际协调时间。由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC原创 2024-04-12 16:05:22 · 750 阅读 · 1 评论 -
echarts系列:echarts增加loading
可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。最近在大屏项目研发时,存在多个echarts图表,有些接口获取数据较慢,需要加loading样式;可选,加载动画类型,目前只有一种’default’翻阅api,找到showLoading可进行设置。原创 2024-03-21 14:45:39 · 1104 阅读 · 0 评论 -
vue系列:使用vue3、ant-d,a-select下拉的搜索功能
projectFilterOption 匹配事件。大屏项目中,下拉数据过多,想使用下拉搜索功能;输入汉字,匹配对应的项目;a-select控件。原创 2024-03-18 14:53:51 · 646 阅读 · 0 评论 -
html系列:按钮被样式图片挡着了,无法点击怎么办
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target原创 2024-03-14 17:15:41 · 635 阅读 · 0 评论 -
echarts系列:x轴与y轴详细配置说明
最近在做大屏的时候使用了5.2版本的echarts,遇到很多的echarts图表,现将常用的x轴与y轴配置列出来。xAxis与yAxis中有很多配置项,下面我以xAxis进行详解,yAxis参考xAxis即可。上述xAxis与yAxis中的配置项,其中也会含有很多属性,具体使用请参考一下内容。splitArea :坐标轴在 grid 区域中的分隔区域,默认不显示。splitLine: 坐标轴在 grid 区域中的分隔线设置。axisLabel:坐标轴刻度标签的相关设置。原创 2024-03-08 14:21:04 · 3325 阅读 · 0 评论 -
ECharts系列:x轴数据过多时,间隔几个显示,怎么确保最后一个显示
在做一个水文大屏时遇到一个问题,EChart中多个折线图,显示区域小,x轴数据过多时,间隔几个显示,最后一项显示不出来。查阅了官方文档后,加了下面这行代码,显示最后一个标签。x轴第一个、间隔显示实现了,最后一个不显示。对显示的x轴名称又进行了优化,效果如下。原创 2024-03-08 10:22:34 · 824 阅读 · 0 评论 -
【vue+element ui】大屏自适应中el-select下拉内容在低分辨率下显示不全问题解决
通过谷歌浏览器设置Toggle device toolbar为1028px*720px分辨率,下拉显示异常。使用F12对比查看,发现el-select中的el-select-dropdown__item是固定的;最近要把一个1920px*1080px的大屏改成自适应的;最低适配到1028px*720px;解决办法:将el-select-dropdown__wrap改大,让内容全部显示出来;将电脑屏幕改成1028px*720px分辨率后,下拉显示正常。全局设置,代码如下(项目中使用到的是scss)原创 2024-02-28 11:49:20 · 820 阅读 · 0 评论 -
mapbox系列:常见功能使用总结
最近在写一个大屏的时候使用mapbox,将开发过程进行总结如下:使用mapbox时地图上会有mapbox的logo,如下:设置地图全局样式设置此时,logo就不显示了;未完待续原创 2023-12-06 16:08:10 · 643 阅读 · 1 评论 -
Vue系列:页面中图片等静态资源引用(包含vue3在vite下的图片引用)
近期在做项目时遇到一些图片、视频、动态图片等静态资源的使用,在vue页面jsx、tsx中使用的时候遇到些问题;对静态资源的引用使用总结如下。原创 2023-11-30 09:58:33 · 2479 阅读 · 0 评论 -
arco-design:table组件列使用了tsx语法,点击“查看”显示弹窗信息
最近在一个大屏项目中使用到arco-design,版本为2.52.1;使用Vue3、TypeScript,table组件列使用了tsx语法,在使用tsx语法时遇到列无法正常显示查看点击按钮;原创 2023-11-09 14:35:52 · 440 阅读 · 0 评论 -
element ui:常用的组件使用情况记录
将element ui使用过程中一些常用的组件使用情况记录如下。原创 2023-11-09 10:47:21 · 315 阅读 · 0 评论 -
怎么使用jenkins设置web自动打包
置构建步骤:在"Build"阶段中,你可以添加构建步骤。这些步骤将执行你的Web应用程序的构建操作。根据你的项目类型和构建工具,可以选择适当的构建步骤。查看构建结果:在Jenkins任务页面上,你可以看到构建的历史记录和最新的构建结果。如果构建和打包步骤都成功执行,那么你就可以在Jenkins任务页面上看到自动打包的输出结果。触发构建:一旦你配置好了Jenkins任务,你可以手动点击"立即构建"按钮来触发构建操作。配置打包步骤:在"Package"阶段中,你可以添加打包步骤。原创 2023-10-07 14:55:28 · 688 阅读 · 0 评论 -
Openlayer系列:利用GeoServer和Openlayer地图显示区域掩模
对界面地图进行切换,卫星图利用GeoServer,水系等根据geojson文件生成图层,效果如下。利用GeoServer和Openlayer地图显示区域掩模。欢迎交流,知识星球、微信公众号与账号"浪潮行舟"同号。# 利用GeoServer进行图层发布。# Openlayer地图显示区域掩模。原创 2023-09-01 11:29:56 · 234 阅读 · 0 评论 -
Ant-design-vue系列: 树形控件 a-tree 的新增、删除、编辑节点
id="code">在上面的示例中,我们在 a-tree 组件中使用 `@edit` 事件来监听节点编辑事件。在上面的示例中,我们在 a-tree 组件中使用 @remove 事件来监听节点删除事件。在 handleRemove 方法中,我们通过 splice 函数将当前节点的父节点中的子节点列表删除当前节点。在上面的示例中,我们在 a-tree 组件中使用 @create 事件来监听节点创建事件。在 handleCreate 方法中,我们通过 add 函数来将新节点插入到当前节点的子节点列表中。原创 2023-06-27 17:28:24 · 4896 阅读 · 2 评论 -
openlayer系列:怎么在OpenLayers地图上为区域边界添加阴影
此代码将其目标元素设置为具有新CSS类“map-container”的地图容器元素。此时,您应该能够看到地图的边界周围有一个深色阴影。为了在OpenLayers地图上为区域边界添加阴影,您可以使用CSS样式来实现。然后,在OpenLayers代码中,您需要将地图容器元素的类名称设置为新的CSS类名。您可以调整阴影的样式和强度来满足您的需求。例如,您可以更改“box-shadow:”属性中的颜色和/或模糊半径。原创 2023-06-18 13:49:07 · 937 阅读 · 0 评论 -
openlayer系列:openlayer中切换卫星图和普通地图,默认普通地图,点击切换卫星图,并且地图掩模显示部分区域
单击按钮时,代码将检查当前图层是普通地图图层还是卫星图层,并将其替换为另一个图层。openlayer中切换卫星图和普通地图,默认普通地图,点击切换卫星图,并且地图掩模显示部分区域。可以使用OpenLayers的VectorLayer类创建一个掩模图层,并将其添加到地图中。其中,mapLayer 是普通地图图层,satelliteLayer 是卫星地图图层。这将在地图上添加一个黑色的矩形,覆盖住纽约市的区域,从而实现了掩盖的效果。可以为切换按钮添加一个点击事件监听器,以切换地图图层。创建普通地图和卫星图层。原创 2023-06-16 17:20:12 · 986 阅读 · 0 评论 -
Ant Design Vue: 在 Ant Design Vue 中,可以使用 a-table 组件来创建表格,并且可以使用 expand-row 属性来自定义展开/折叠行。为了在表头中添加一个自定义
在上述代码中,我们在表头中定义了两列:姓名和操作。对于“操作”列,我们使用了 scopedSlots 来定义一个名为 operation 的插槽,用于自定义该列的内容。在插槽中,我们根据当前行的展开状态来显示不同的按钮。如果当前行已展开,则显示“Close”按钮。在 Ant Design Vue 中,可以使用 a-table 组件来创建表格,并且可以使用 expand-row 属性来自定义展开/折叠行。为了在表头中添加一个自定义的“+”按钮,可以在表头中使用 slot 插槽来自定义表头的列。原创 2023-06-16 17:13:33 · 607 阅读 · 0 评论 -
Ant Design Vue系列:Options API 与Composition API的区别
3.响应式能力不同:在Options API中,组件的响应式能力是通过Vue.js的响应式系统实现的,而在Composition API中,组件的响应式能力是通过Vue.js 3.x中新增的reactive和computed API实现的。2.组件结构不同:Options API将组件的属性、生命周期和方法都放在一个对象中,而Composition API将组件的逻辑分解成更小的函数,使得代码更加模块化,易于重用。原创 2023-06-02 09:42:07 · 349 阅读 · 0 评论 -
让代码创造童话
1.通过VSCode、Mysql、Node做一个页面程序,设置一些组件,通过组件之间的拼搭实现逻辑,最终达到效果。PS:打算让小朋友接触一下编程,不知道他会不会喜欢。从本日开始,整理需求、数据库,供设计程序使用。祝小朋友们、大朋友们儿童节快乐!原创 2023-06-01 17:58:14 · 63 阅读 · 0 评论 -
Ant Design Vue: a-table 组件来创建表格,在表头中使用 slot 插槽来自定义表头的列
在这个示例代码中,我们在表头中定义了两列:姓名和操作。对于“操作”列,我们使用了 scopedSlots 来定义一个名为 operation 的插槽,用于自定义该列的内容。在插槽中,我们根据当前行的展开状态来显示不同的按钮。如果当前行已展开,则显示“Close”按钮。在 Ant Design Vue 中,可以使用 a-table 组件来创建表格,并且可以使用 expand-row 属性来自定义展开/折叠行。为了在表头中添加一个自定义的“+”按钮,可以在表头中使用 slot 插槽来自定义表头的列。原创 2023-05-31 16:12:35 · 3280 阅读 · 1 评论 -
Vue Err: Invalid prop: custom validator check failed for prop “value“异常解决
在onRangeChange方法中看到createValue的值是[]数组形式。看到data中时间绑定的属性为。这时就看不到红红的报错信息了。原创 2023-05-30 15:12:00 · 869 阅读 · 0 评论 -
Ant Design Vue.js组件中,穿梭框a-transfer中怎么实现全选
这样,当用户在穿梭框中选择项目时,我们将在组件中保存选定的key值列表,并在选择项目时更新全选状态。属性设置为一个空数组,以便在初始状态下将全选状态设置为初始数据中的key值列表。在Vue.js和Ant Design Vue.js组件中,可以使用。以下是一个示例代码,演示如何在Ant Design Vue.js的。属性为一个提示文本,以便在用户输入搜索关键字时显示该提示文本。方法,用于在用户选择项目时更新全选状态。,以便在穿梭框中显示可搜索的数据。,以便允许用户选择多个项目。在上面的代码中,我们首先在。原创 2023-05-18 16:34:19 · 816 阅读 · 0 评论 -
openlayer中使用OlHeatmapLayer实现时间段内的热力图,热力图数据是累积的,怎么做出那种一帧一帧的效果
在函数中,可以根据热力图数据的特点,实现热力图的渲染逻辑,例如更新热力图的数据、计算热力图的累积值、实现热力图的拖动效果等。其中,longitude 和 latitude 是热力图数据的经纬度坐标,zoomLevel 是热力图的缩放级别。其中,data 是一个包含热力图数据的数组,offset 是热力图的偏移量,可以根据需要进行调整。以上就是使用 OlHeatmapLayer 实现时间段内的热力图,并实现一帧一帧效果的基本步骤。在热力图控件上添加事件监听器,以实现一帧一帧的效果。原创 2023-05-18 15:39:48 · 467 阅读 · 0 评论 -
Openlayer系列:点击地图上的点位,弹出信息窗在点位上方显示;
有没有精通openlayer web开发呀需要点地图的上点位的时候,弹出框在点位上方显示(UI效果图如下,使用的vue2和element、openlayer6)原创 2023-04-24 19:51:34 · 870 阅读 · 0 评论 -
Vue系列:Vue Element UI中,使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能
/ 播放完成后重新播放。// 音频是否正在播放。原创 2023-11-30 10:42:50 · 3481 阅读 · 0 评论 -
Vue系列:vue element ui中Progress怎么通过定时器自动加载一个数组中的值,播放的时候可暂停,播放完成停止
在这个例子中,我们创建了一个名为“data”的数组,用于存储需要播放的值。在组件加载时,我们启动了一个定时器,每秒钟递增“progressValue”属性。最后,我们使用Vue指令将Progress组件的百分比绑定到计算属性“percentage”中。3. 创建一个计算属性,根据“progressValue”属性和数组长度计算出当前播放的百分比。1. 创建一个名为“progressValue”的响应式数据属性,并将其初始化为0。4. 将Progress组件添加到模板中,并将百分比绑定到计算属性中。原创 2023-04-23 11:37:17 · 579 阅读 · 0 评论 -
OpenLayers系列: 切换地图div加载不同地图数据时,需要销毁destroy div
这是因为OpenLayers在初始化地图实例时会对其所绑定的DOM元素进行一些处理和操作,如果直接将之前的地图实例与新的DOM元素绑定或者多次绑定同一个DOM元素,可能会导致地图显示异常或出错。在查阅资料过程中,了解到在使用OpenLayers切换地图div时,需要先销毁之前的地图实例,并将其与之前的DOM元素解绑,再创建新的地图实例并与新的DOM元素绑定。如果地图无数据,直接进行地图的加载,如果地图存在数据,先进行清空,再进行地图的加载。因此,在切换地图div之前需要调用之前地图实例的。原创 2023-04-21 16:24:31 · 1826 阅读 · 0 评论 -
Vue系列:在离线环境下部署,CDN无法访问导致vuex.min.js、axios.min.js和vue-router.min.js的cdn地址无法访问
将这些文件下载到本地,并将它们添加到项目的静态资源目录中,在HTML文件中使用相对路径进行引用。等,可能是因为这些文件被从CDN地址引用,而你的内网环境无法访问这些CDN地址。语句进行引用,这样就不需要从CDN地址引用了。在无外网环境下部署Vue项目,如果在内网环境中无法访问到一些必须的文件,比如。使用npm安装这些依赖包,并在Vue项目中通过。然后在需要使用这些库的文件中通过。有其他好的方式,欢迎一起交流。原创 2023-04-21 14:17:49 · 1621 阅读 · 0 评论 -
Vue系列:vue中登录后路由输入url时重定向至index
以上代码会在每次路由切换前执行,检查目标路由是否需要身份验证,并检查用户是否已经登录。如果用户已经登录,则继续导航;否则,重定向到登录页面。然后,在全局导航守卫中检查用户是否已经登录,如果没有登录,则重定向到登录页面。如果用户已经登录,则继续导航。在Vue中,如果用户成功登录后,你可能希望将其重定向到应用程序的主页或仪表板页面。为了实现这个功能,可以使用。中的布尔值,你需要根据你的需求和实际情况进行调整。请注意,此代码假设用户登录状态是存储在。首先,在需要进行身份验证的路由上添加。原创 2023-04-21 10:36:32 · 1360 阅读 · 0 评论 -
Vue+element ui系列:npm run dev --ld 来实现样式的条件编译,使用到了js-conditional-compile-loader插件
问题来了,样式的条件编译我想用以下两个方式实现,都遇到了问题,找了一些资料,最终解决方案是设置。最终实现样式的条件编译,用的同一套代码,有个列表显示数据不一致,通过条件编译实现显示不同的列表。xxx是在webpack中指定的条件属性名,如上面的isHK。插件支持IFDEBUG和IFTRUE两个条件编译指令。进行如下设置后,样式的条件编译实现。用法是:在js代码的任意地方以//结尾,中间是被包裹的js代码。versionType为1或2。时versionType为1。可以看到舱门管理被隐藏。原创 2023-04-20 14:28:10 · 337 阅读 · 0 评论 -
echarts开发系列1:在vue 中引入echarts
在package.json文件“dependencies”中输入echarts及版本号,3.将echarts.js文件放于项目中,类似utils.js进行引用。在进行打包的时候会自动引入echarts。2.使用npm命令进行echarts引入。1.使用npm包进行echarts引入。可以引入指定版本的echarts。原创 2023-04-17 14:51:46 · 198 阅读 · 0 评论 -
前端开发-JavaScript使用记录
将你要判断的时间new Date()一下,再获取当前时间的new Date(),然后对比大小就可以了。比如: isExpiredTime ('2023-03-28')原创 2023-03-28 17:44:02 · 71 阅读 · 0 评论 -
vue开发el-date-picker组件8小时时间差问题
查询条件是时间组件el-date-picker时,查询的数据有问题。根本原因是:中国国家标准时间是东经120°(东八区)的地方时间,同格林威治时间(世界时)整整相差8小时。在查询相关文档后,只需要更改时间组件el-date-picker的 value-format 的格式就可以了。原创 2023-03-12 10:19:01 · 1659 阅读 · 0 评论