- 博客(102)
- 收藏
- 关注
RSS订阅原创 vue3+Echarts实现柱状图柱子上添加图片
本文介绍了两种在Echarts柱状图上添加数据背景图片的方法。第一种通过itemStyle的rich属性设置背景图片，自定义图片尺寸和文字样式；第二种使用pictorialBar类型单独绘制图片，通过symbol属性加载图片并调整位置。两种方法均需导入本地图片资源，适用于不同场景的数据可视化需求。第一种更简单直接，第二种灵活性更高，可根据实际需求选择合适方案。代码示例完整，包含图片路径处理、渐变颜色设置和标签位置调整等关键实现细节。
2025-07-09 11:04:31
197
原创 vue3+Echarts图表数据更新后，但图表未更新
摘要： Echarts图表初始化时正常显示数据，但筛选后数据未更新。排查发现筛选返回空数据时，默认配置setOption(option)会合并新旧数据导致图表未刷新。改为setOption(option,true)强制显示最新数据后解决。关键点：setOption的notMerge参数默认为false（合并数据），设为true则仅展示新数据。
2025-07-08 15:36:29
304
原创 vue3+Echarts实现散点图
本文介绍了如何使用Echarts实现散点图可视化，通过坐标数组自动生成坐标轴及刻度。示例代码展示了基于Vue3和TypeScript的Echarts散点图实现，包括数据配置（带颜色标记的坐标点数组）、图表初始化、坐标轴样式设置和响应式布局处理。文章提供了完整代码模板，重点演示了如何通过value数组格式的scatterData生成动态散点图，并设置了自定义的工具提示和坐标轴样式。该方案适用于需要展示多维度坐标数据的可视化场景，图表会根据窗口大小自动调整。
2025-07-08 15:19:18
185
原创 vue3+Echarts实现拟合曲线图
本文展示了一个基于Echarts的曲线图实现方案，通过坐标点数组自动生成横纵坐标轴。图表数据以对象数组形式存储（如[-36.64,5.76]），通过Vue3组合式API动态生成图例和系列数据。核心代码包含： 1️⃣ 数据预处理（seriesData/legendData） 2️⃣ 图表配置（tooltip、legend、坐标轴样式） 3️⃣ 响应式布局（resize事件监听） 特色功能：平滑曲线、自定义tooltip样式、自适应暗色主题坐标轴。完整代码已开源，可直接复用。
2025-07-08 15:05:20
197
原创 vue3+Echarts实现象形尖峰柱状图
摘要：本文介绍了使用Echarts中的pictorialBar类型创建柱状图的方法，通过设置symbol属性为自定义路径实现特殊形状的柱体。代码示例展示了如何配置带渐变色的12个月发电量柱状图，包括坐标轴样式、提示框、数据标签等参数设置。文章提供了完整的Vue组件实现代码，并说明了如何添加响应式调整功能。主要技术点在于series-pictorialBar.symbol属性的使用和图表样式的详细配置。
2025-07-08 11:01:30
480
原创 vue3+Echarts实现立体柱状图
本文介绍了使用Echarts实现立体柱状图的方法。通过将顶部椭圆、中间柱子和底部椭圆三部分组合，构成具有立体效果的柱状图。顶部和底部使用象形柱图(pictorialBar)实现椭圆形效果，中间使用常规柱状图(bar)，并通过z-index控制层次关系。代码展示了三部分的详细配置，包括尺寸、偏移、渐变颜色等样式设置。整体实现思路清晰，通过组件组合方式完成立体视觉效果，适用于数据可视化场景。
2025-07-08 10:44:21
264
原创 vue3+Echarts实现legend改变图例图标为自定义图片
本文介绍了在ECharts中使用自定义图片作为图例的实现方法。首先需要导入本地图片资源，然后在图例配置项legend的data属性中通过"image://"前缀引用图片路径，并设置图例名称。同时可以调整图片尺寸（itemWidth/itemHeight）、间距（itemGap）以及文字样式（textStyle）等参数。代码示例展示了如何将三张图标分别设置为"区域A"、"区域B"、"区域C"三个图例项，并控制其显示位置和样式。
2025-07-07 10:50:10
215
原创 vue3+Echarts实现横向堆积柱状图
本文介绍了使用Echarts实现横向堆积柱状图的配置方法。主要特点包括：1）通过yAxis反转设置横向显示；2）利用stack属性实现堆积效果，并通过z-index将总发电量柱隐藏于底层；3）自定义tooltip格式，使文字颜色与对应柱子颜色一致；4）通过borderRadius为右侧柱子添加圆角；5）隐藏坐标轴显示。代码示例展示了如何通过series数组配置多个数据系列，并详细说明了各参数的作用，最终实现了一个显示原发电量与提升发电量的双柱堆积图表，同时保留总发电量的悬浮提示功能。该方案适用于需要对比分析
2025-07-07 10:42:13
667
原创 vue3+Element Plus实现省市区层联选择器
本文介绍了使用element-china-area-data实现省市区联动的完整方案。首先展示了二级和三级联动的效果图，然后详细说明安装步骤（npm安装依赖）和四种数据格式的差异（带/不带"全部"选项）。重点提供了省市区三级联动的实现代码模板，使用Vue3的setup语法糖，包含el-cascader组件的基本配置和change事件处理。该方案简洁高效，开发者只需安装依赖并复制模板代码即可快速实现地区选择功能，最后以一句励志英文作结。
2025-07-07 10:06:30
529
原创 vue3+element Plus实现日期选择器默认选中十五天之后的日期，并且不可选择今天之前的日期
摘要：本文介绍了如何利用Element Plus日期选择器实现默认选中15天后日期并禁用今天之前日期的功能。通过disabledDate方法限制可选日期范围，并在onMounted钩子中设置默认日期。代码简洁明了，包含完整的Vue组件示例，适合需要日期限制功能的开发场景。效果图直观展示了实现后的界面效果，包括默认选中状态和日期禁用状态。
2025-06-25 11:33:41
310
原创 vue3+dom-to-image实现div内容生成图片
本文介绍了如何使用dom-to-image组件将DOM元素转换为图片。通过npm安装该依赖后，在Vue项目中创建一个200x200px的淡黄色背景div，点击按钮即可将其转换为图片并显示。核心代码展示了如何使用domToImage.toPng()方法实现转换，并处理可能的错误。相比html2canvas，该组件提供了另一种简洁的DOM转图片方案，适用于需要将网页元素保存为图片的场景。
2025-06-25 11:10:14
260
原创 vue3+element-plus实现多个表单校验
本文介绍了在Element Plus中实现多组表单校验的方法。当页面包含多组表单时，需要为每组表单添加不同的ref属性进行校验。示例代码展示了三组表单（基础信息、更多参数、高级参数）的实现方式，每组分表使用ruleFormRefOne、ruleFormRefTwo、ruleFormRefThree三个ref进行管理。表单包含各类输入字段，如项目名称、屋顶面积、减碳系数等，并设置了必填校验和数字格式校验规则。最后通过submitForm方法统一提交所有表单数据。这种方式解决了多表单场景下的校验问题，确保各组表
2025-06-24 16:26:22
220
原创 vue3+echarts实现tab切换多个图表
摘要：针对多图表切换中的DOM加载和数据混淆问题，本文提出将图表封装为独立组件ChartComponent.vue的解决方案。该组件通过vue的响应式机制，在tab切换时动态更新options配置，确保图表数据准确显示。实现方案包括：1）使用echarts初始化图表；2）通过options和visible属性变化；示例展示了分时、分月、峰谷三种电价图表切换效果，并通过v-if条件渲染优化性能。代码可见图表组件采用参数化设计，支持高度自定义和复用。
2025-06-24 16:03:35
256
原创 可视化大屏全屏后重载echarts图表
问题：可视化大屏点击全屏之后，但echarts图表还是之前的大小，并没有撑满该容器，所以这时候我们需要全屏之后重新加载echarts图表内容。
2025-05-23 17:52:50
252
原创 uniapp使用easyinput文本框显示输入的字数和限制的字数
【代码】uniapp使用easyinput文本框显示输入的字数和限制的字数。
2024-10-24 16:36:39
1588
原创 vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格
vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格
2024-05-21 14:35:19
1837
1
原创 vue实现瀑布流
每个色块宽度一致，高度自适应<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="user
2024-01-31 17:55:10
3752
1
原创 uniapp小程序分包
分包原因：由于微信小程序包总体积不能超过2M，这时就需要把代码进行分包处理。主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。分包后的每个分包的大小是2M以内，总体积一共不能超过20M。subPackages：分包加载配置，此配置为小程序的分包加载机制，详细请参考uniapp官网分包机制项目目录结构如下：需要在 pages.json 中进行代码分包处理：preloadRule：配置preloadRule后，在进入小
2022-07-01 15:41:36
611
原创 uniapp实现图片（单张/多张）预览
uniapp实现图片（单张/多张）预览一、单张预览二、多张预览效果图：预览We’re not put on this Earth to think of only ourselves
2022-06-24 14:03:24
1279
原创 uniapp背景色跟随轮播图改变 vue
背景色跟随轮播图改变在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码：最终效果：录屏
2022-06-24 09:51:09
1376
5
原创 使用hbuilder X创建uniapp项目
使用hbuilder X创建uniapp项目一、打开hbuilder X软件，左上角 文件-新建-项目，如图：二、在弹窗内，填写项目名称，选择你自己需要的项目案例，可根据自己需求选择vue版本2/3，如图：三、这时你的项目已经创建好了，自动由hbuilderX打开，项目大致文件内容如图：四、设置底部导航跳转，打开pages.json文件（pages是路由跳转地址，tabBar是配置底部导航栏），如果顶部导航想要添加相应的按钮图标，可添加‘app-plus’配置，这里的‘fontSrc’图标来自阿里，下
2022-06-21 10:23:52
6043
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人