- 博客(62)
- 收藏
- 关注
RSS订阅原创 vue2动态实现多Y轴echarts图表，节点点击事件，及图表空白区域点击事件
本文摘要： 一个基于Vue.js和Element UI的图表数据展示组件，包含以下功能： 查询表单：支持选择设备号、日期时间范围、真空值和时间间隔等参数 数据筛选：提供复选框选项组进行数据筛选 图表展示：使用moreyaxis组件展示多Y轴数据图表 打印功能：支持打印图表数据，显示设备号、时间范围和系列数据详情 交互操作：包含搜索、重置和打印按钮，支持数据变化时的处理逻辑 组件特点： 采用Element UI表单和对话框组件 响应式布局设计 数据加载状态显示 空数据状态处理
2025-09-29 10:54:54
252
原创 使用vue-i18n实现语言切换
本文介绍了在Vue项目中实现国际化的方法。文章详细展示了如何在main.js中配置i18n，包括创建语言文件夹结构、定义支持的语言类型、自动检测语言偏好等核心功能。同时提供了页面中使用$t方法进行多语言切换的示例代码，以及一个可复用的语言切换组件，支持文本和下拉框两种切换方式。组件会保存用户选择的语言到localStorage，确保下次访问保持相同语言设置。
2025-09-22 14:51:19
339
原创 vue实现打印功能
在Vue2中实现打印功能可通过vue-print-nb插件：先安装并引入该插件，然后在模板中使用v-print指令绑定打印区域ID。若遇打印空白页问题，可在打印区域内添加一个微小尺寸元素（如1px宽高的div）解决。支持通过配置项设置打印标题（popTitle）和回调函数（closeCallback）处理打印完成事件。
2025-09-11 14:29:52
198
原创 vue2实现列表、表格超出高度滚动，鼠标移入移出事件
文章摘要：本文介绍了两种实现滚动效果的前端方案。第一种使用vue-seamless-scroll插件实现列表内容无缝滚动，通过配置参数控制滚动方向、速度及悬停行为。第二种基于Element UI表格实现自滚动功能，包含鼠标移入暂停、移出继续、滚动到底部加载更多等交互。两种方案都解决了原生实现时的抖动问题，并提供了完整的代码示例，包括父组件数据获取和子组件滚动控制逻辑，适用于大屏数据展示场景。
2025-08-26 15:46:08
256
原创 echarts一个图例控制多个图表
本文介绍了一个基于ECharts实现的环状图组件方案，通过父组件统一控制多个子图表实例。针对设计样式的特殊需求，采用图表与图例分离的实现方式：BgPieLabel.vue负责环形图主体渲染，支持自定义半径、中心位置、标签格式等配置；BgPieLegend.vue独立实现横向可滚动的图例组件，通过事件机制与父组件通信。方案包含数据响应式更新、高亮交互、自适应布局等功能，使用ResizeObserver实现容器尺寸监听，并提供了颜色主题配置能力。既满足了复杂UI需求，又保持了组件间的数据同步性。
2025-08-01 17:47:23
272
原创 echarts饼图设置labelLine和label样式
本文记录了使用ECharts设置饼图样式的实现方法。通过配置项设置了图例位置、自定义配色方案、环形饼图半径、多饼图中心点布局等。重点包括：1)使用rich属性实现标签文字分段样式；2)设置阴影效果增强视觉层次；3)通过color:inherit使数值颜色与色块一致；4)处理标签防重叠和间距。代码展示了完整的option配置，最终效果如文中配图所示
2025-07-23 10:50:49
479
原创 vue2使用elementUI报错
在vue2中安装elementUI，在全局引入elementUIcss的时候报错，解决办法是在根目录下新建一个名称为postcss.config.js文件。重启项目就可以正常运行，elementUI的样式也可以正常使用。
2024-04-24 15:07:24
946
原创 bootstrap表格添加titleTooltip属性
当表头过窄，表头内容显示不全时，添加titleTooltip属性可以时hover时显示全部。
2022-08-19 16:59:36
1084
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人