- 博客(75)
- 问答 (79)
- 收藏
- 关注
RSS订阅原创 vue3+ts+echarts仪表盘加圆弧进度
本文展示了基于Vue和ECharts的设备监控数据可视化实现方案。代码通过条件渲染方式展示温度、湿度、电池电量和光照强度四个监测指标，采用仪表盘和进度条两种可视化形式。其中温度湿度使用ECharts仪表盘展示，通过色带区分不同数值区间；电池电量和光照强度则采用Element UI的仪表盘进度条组件，支持条纹动画和多级颜色标记。实现中包含了数据获取、百分比计算、图表初始化和响应式更新等核心功能，并考虑了图表实例管理和主题适配问题。该方案适用于物联网设备监测数据的直观展示。
2025-09-05 15:55:44
119
原创 vue3+ts+echarts多Y轴折线图
本文介绍了温湿度传感器数据可视化功能的实现。通过Vue组件和ECharts图表库，实现了温湿度数据的动态展示，支持日/月/年不同时间维度的切换。核心功能包括：1）数据获取与处理，通过API获取传感器数据并分类存储；2）图表初始化与更新，根据设备类型显示对应图表；3）响应式设计，适配不同屏幕尺寸和暗黑模式切换；4）生命周期管理，在组件挂载/卸载时正确处理资源。代码实现了温度、湿度和光照三组数据的同图表展示，并通过watch监听和MutationObserver确保数据与UI同步更新。
2025-09-05 15:42:56
139
原创 vue3+ts+echarts日期折线图
该代码实现了一个计量数据可视化功能，主要包含以下特点：1. 提供小时/日/月/年四种时间维度切换；2. 根据设备类型(4或8)显示对应计量图表；3. 使用Echarts绘制折线图展示kWh数据；4. 包含数据获取、错误处理、图表更新等完整逻辑；5. 采用响应式设计确保图表容器就绪后渲染。核心功能是通过API获取指定时间段的计量数据，并动态更新图表展示。
2025-09-05 15:33:50
117
原创 vue3+ts导出PDF
本文介绍了使用html2pdf.js实现HTML内容导出为PDF的功能，重点解决嵌套表格在PDF中的显示问题。代码展示了包含部门用电量统计和明细信息的表格结构，通过设置固定宽度(1082px/1160px)和横向打印(a4 landscape)来优化PDF输出效果。导出功能包含PDF配置选项，如边距、文件名、图像质量(0.98)和分页规则，避免表格内容被截断。实现方案采用Vue组件化设计，通过弹窗展示子组件页面内容，并处理了表格数据和样式问题。
2025-09-05 15:24:09
337
1
原创 vue3+ts+echarts多Y轴图表
摘要：本文展示了温湿度传感器数据可视化功能的实现代码，包含以下核心内容：1. 使用Element UI构建时间维度选择控件（日/月/年）；2. 通过API获取温度、湿度、光照数据；3. 基于ECharts实现三轴折线图可视化，包含自适应布局和暗黑模式支持；4. 实现图表初始化、数据更新和窗口尺寸变化的响应处理；5. 包含完整的生命周期管理，确保资源正确释放。该组件实现了多维度环境数据的可视化分析功能。
2025-07-09 11:50:31
161
原创 vue3+ts表单input选择弹窗里表格多选并回显到表单
摘要：本文展示了一个设备关联选择功能的Vue组件实现，包含表单输入框和弹窗选择器。主要功能点包括：1) 通过按钮触发设备选择弹窗；2)弹窗内包含搜索框、设备表格和分页控件；3)支持多选设备并确认选择。技术实现采用了Element UI组件库，使用ref和reactive进行状态管理，通过API获取设备数据，并处理分页、搜索、重置等交互逻辑。最终将选中的设备ID和名称分别以逗号分隔字符串形式存储到表单数据中。
2025-07-08 11:02:52
137
原创 vue3+ts表单input选择弹窗里表格单选并回显到表单
摘要：本文展示了Vue3+Element Plus实现分类选择弹窗的代码示例。表单中通过带"选择"按钮的输入框显示已选分类，点击触发弹窗显示分类列表。弹窗包含搜索框、分类表格和分页组件，支持按分类名称搜索和单选操作。表格数据通过分页接口获取，选中分类后会将ID和名称回填到表单中。代码包含了完整的弹窗显示、数据加载、搜索重置和选择确认等交互逻辑，实现了分类选择功能。
2025-07-08 10:59:40
161
原创 vue3+echarts 做温度计
本文介绍了如何使用Echarts库创建一个温度计图表。首先，通过初始化Echarts实例并设置容器的尺寸，接着模拟传感器数据以获取温度值。然后，通过构造刻度数据和设置渐变色来模拟温度计的外观和功能。文章详细说明了如何配置图表的各个组件，包括y轴、x轴、系列数据等，以及如何通过设置不同的样式和颜色来增强图表的视觉效果。最后，使用指定的配置项和数据显示图表，完成了一个动态且可视化的温度计。
2025-05-20 15:36:26
383
原创 使用开源项目蜂信物联/FastBee前端安装失败
npm install 后虽然生成了node包但是其实没有安装成功dev失败，目前使用版本，node -v20.17.0，npm -v10.8.2。
2025-04-10 15:34:48
271
1
原创 vue2 element 下拉可多选、搜索、返回选中内容、只显示前两条
【代码】vue2 element 下拉可多选、搜索、返回选中内容、只显示前两条。
2024-05-13 14:29:18
655
原创 vueadminpro+vue2+eacharts el-tabs获取后端数据显示饼图并且是父子组件的方式2.0-饼图在一个页面分区域显示
我是引入了两个图表组件，大体和非2.0版本差不多，结论：根据变量显示图表数据，子组件2（1和2一样就是保存数据字段不一样以及多了图表居中）子组件2（1和2一样就是保存数据字段不一样）
2024-04-17 17:56:57
488
原创 vueadminpro+vue2+eacharts 获取后端数据显示饼图并且是父子组件的方式
由于pro框架有写好的echarts显示调用方法，所以跟平时我们所书写的方法，如，引入echarts创建实例。本次使用tabs切换，显示不同的饼图，结论：监听变化！3.获取数据，向子组件传递参数。2.引入子组件，声明传值参数。
2024-04-13 16:55:44
359
1
原创 vue-element-admin-引用echarts折线+柱状，含鼠标悬浮显示X轴内容过长
this.lineChartData.FlowingWater.ordinaryData数据格式根据图表需要进行一些操作。柱状图（后端做排序）+鼠标悬浮显示X轴内容过长。这两个数据要对应上，不然图表显示不对。echats--折线图。
2023-03-27 10:36:50
648
原创 Vue+wangeditor富文本+element——--上传+下载文件+图片预览
获取图片在数组中的位置并把选中图片放到数组第一个元素的位置。获取聊天记录里所有图片地址并添加到数组里。点击放大消息列表里的图片为缩略图。element 预览。
2022-12-08 14:26:01
1781
原创 wangeditor回车=发消息，alt+回车=换行
的换行插件，但是好像有点不好用，可以试一下，换行后这个富文本他的光标会自动到末尾，暂时还没有找到解决的方法。如果第二种也不行的话，那么可以安装官网上。
2022-10-28 17:00:19
2499
原创 基于HTML的wangEditor 5引入
情景：纯HTML引入过Vue2，但是不能使用 import Vue from 'vue'，这种引入方式。4、css，根据个人情况修改，只是网上说的z-index，可解决工具栏不能选中（共有三处）根据官网整理，效果如下：（若想工具栏在上方，调换HTML的div位置即可）PS：更多写法，关于 编辑器的配置。2、引入css+js。...
2022-08-10 10:14:09
1593
原创 vue——删除重复数组+循环向数组里添加对象+根据id查找所在对象
arrayList.shopId——数组里的唯一字段。循环向数组里添加对象。
2022-07-20 14:26:19
1214
空空如也
vue3在处理data.msg存在,覆盖默认提醒消息时请求拦截不起作用
2024-05-08
viewer引入样式文件报错
2024-04-28
使用el-cascader组件子集不能多选
2024-04-24
vue初始化有不存在插件阻拦咋办？
2024-04-22
npm install 报错451
2024-04-22
急！使用sourcetree 提交本地代码没了
2024-04-20
npm install失败？
2024-04-19
vue2+eacharts 获取后端数据显示饼图并且是父子组件的方式？
2024-04-13
vue admin pro 从后台获取路由并根据不同角色设置页面权限？
2024-04-09
vue admin pro 路由跳转无效
2024-04-01
vueelement表单校验失败为什么
2024-03-28
[object Object]转数组
2024-03-26
启动json-server失败，怎么解决？
2024-03-13
js 过滤满足特定条件的嵌套数组
2023-02-17
echarts 柱状图如何排序
2023-02-13
vuedraggable组件怎么动态设置拖拽容器每个模块的宽高
2022-12-29
vue子组件如何动态传数据给父组件？
2023-01-10
Vue 拖拽组件 vuedraggable报错
2022-12-28
JS 对象转数组怎么实现？
2022-12-27
微信小程序调起微信支付失败
2025-10-23
vue3+vant 的showFailToast显示时间很短
2025-10-10
vue,ts写微信公众号，用户信息缓存问题
2025-09-22
hbuilderx运行到微信开发者工具，后工具报一堆错
2025-09-10
hbuilderx运行到微信开发者工具报错
2025-09-10
uniapp开发三端互通的用HX3.3.13版本够用吗
2025-09-10
echarts水球图label值颜色设置不知道为什么被覆盖了打印label是对的
2025-08-25
vue#+ts二次打开弹窗子组件报错且没有请求接口
2025-08-18
vue3项目路由跳转，地址改变了但是页面并没有变怎么解决
2025-06-09
父子组件传值下拉框回显失败
2025-04-26
使用开源项目蜂信物联/FastBee前端安装失败
2025-04-10
el-collapse-item循环设置里面内容动态获取数据
2024-05-21
elementui表格里点击多个弹窗表格，切换不同弹窗表格，出现页面闪动
2024-05-14
vue2 根据后端返回的数组进行下载成压缩包到本地
2024-05-13
vue2 element 下拉多选回显失败
2024-05-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人