- 博客(12)
- 收藏
- 关注
RSS订阅原创 echarts实现栅栏式柱状图
因为我这里仅做教程展示使用，所以颜色和数据都是默认写死的，可以根据自己的需求进行改进，改成动态配置的。，有时候会发现效果不尽人意，总是存在偏差，这时候我们可以使用两个工具来帮助我们调整他的位置。是使用的背景图的label来设置的，为了使他的位置在右上角。这里的设计就是象形柱图加上作为背景的柱状图，重点其实是位置的调整。其实我们看着像栅栏的图表是echarts中的象形柱图。没什么难点，重点就是小的修改上。
2024-02-02 16:39:46
365
原创 echarts实现折线图颜色分层区分不同程度
然后我们就可以进行分区了，重点是使用了areaStyle的配置，根据我们上面计算的数值进行颜色的配置达成分区的效果。先完成正常的折线图绘制代码，然后我们需要在series上加上markLine的配置，这个配置就是标准线的配置。上面对应的offset也可以根据自己的需要进行修改，最终达成自己想要的效果。这里为了方便展示我把x轴和y轴都进行了隐藏，展示出来的效果就是如图所示。我们需要准备一组数据，并且提前获取我们的标准值，比如图上的。，我们可以计算出标准值应该存在图表的位置。
2024-02-02 16:25:05
381
原创 vue实现思维导图或者组织架构图效果
horizontal是水平排列方式，它的参数是truefalse动态绑定自定义class默认折叠展示展开默认展开// 第一个参数为数据data，第二个参数为是否全部展开});} else {点击事件// e 为 event// 当前项的所有详情 如：id label children移入/移出事件返回值与点击事件大致相同如何渲染节点标签可以对样式进行调整，得到自己想要得的效果本文参考了大神的文章，根据自己的项目做了改动，这里就不展示实际项目的效果图了。
2024-01-24 15:37:57
2166
3
原创 VUE引入高德地图实现驾车轨迹显示（简易版）
当我们要进行车辆轨迹查看时，实际逻辑是传递了两个经纬度点位的数据，我们使用高德api自带的轨迹规划可以实现线路图的展示。1. 首先需要在高德地图注册对应的服务，注意绑定服务一定要是`web端`，如下图，我们会拥有对应的key值和安全密钥。，比如车辆轨迹的函数我们绑定在了div元素里，但是如果我们不进行特殊处理，只在methods里定义。需要注意的是，由于我们的初始化地图是写在methods方法里的，所以调用起来有一定的问题。我们每次进入或者切换车辆时，防止信息重叠展示，都是进行点位或者线路的清除。
2024-01-17 11:31:50
1220
原创 3D环状饼图加引导线，使用echarts实现
这个代码使用vue2写的，其中还有一个nowSize()函数是我写来做适配的，3280指的是屏宽或者是分辨率的宽；可以不调用这个函数，直接改为数值。在mounted中还加入了屏幕大小监听，屏幕大小变化时重新渲染图表使其大小跟随屏幕大小变化。其中，echarts需要时5.4.x版本以上的，不然样式显示会有影响。实现原理主要是在一个3D图上叠加一个饼图，饼图只保留引导线。需要先下载echarts、echarts-gl依赖包。
2024-01-17 09:50:25
1096
6
原创 想跳过跨域，直接本地测试效果
3、点击属性，在目标后面添加 ·--allow-file-access-from-files --user-data-dir="C:\MyChromeUserData" --disable-web-security。前端在进行各种开发的时候经常会遇到跨域问题，比如我们实现在线查看word文件，会提示访问的文件跨域了。但是我们又想就在本地环境看看开发的效果。1、在C盘新建一个文件夹MyChromeUserdata。以后遇到访问接口跨域时，我们可尝试关闭谷歌安全策略。2、在桌面快捷方式新建一个谷歌浏览器。
2024-01-16 16:09:30
408
1
原创 0~9999999999.9999之间的数字，小数位数最多4位
正则：/^([0]|[1-9][0-9]{0,9})([/.]([0-9]{0,3}[1-9]))?根据具体的要求，可以改动{0，9}中的数字限制范围，改动{0，3}限制小数点后面的位数。
2023-05-05 10:18:37
88
原创 vue实现人像框摄像头（手机端，PC端也适用）
1. 在浏览器上ios和Android调用都没问题，但是微信浏览器上ios系统中初次调用摄像头，请求摄像头权限后，会出现视频无显示，无法播放，就算一直重新调用invokingCamera()方法去重新渲染也无效。经研究是由于video宽高均为0，且为暂停状态导致的，不过退出页面，重新进入后又可以正常播放（我猜测是由于这次不需要重新请求摄像头权限）。3. 由于调用手机相册的功能只有三个监听事件（完成、成功、失败），监听不到取消操作，所以，目前解决方法是右上角增加了刷新图标，刷新一下，画面会重新出现。
2023-04-26 11:51:51
1986
2
原创 vue项目实现PC端各分辨率适配
2. 配置rem.js文件（名称自己随意取就可以），一般放置在utils文件夹里，没有就新建一个utils文件夹与assets文件夹同级。如果使用postcss-px2rem在运行时报错，可以卸载postcss-px2rem，下载postcss-pxtorem，创建一个postcss.config.js与vue.config.js同级。remUnit要和rem.js中的baseSize一致。3. 在main.js中引用配置好的rem.js。4. 在vue.config.js中进行相关配置。
2023-04-24 09:01:21
1646
原创 npm install时总是报node-sass的安装错误
我们首先需要知道自己要下载什么版本的工具在vscode 的终端中输入node -p "[process.platform, process.arch, process.versions.modules].join('-')"可以看到对应的node-sass版本要下载的辅助工具版本https://github.com/sass/node-sass/releases在这个网页可以下载辅助工具，我的是win32-x64-83，所以我下载了win32-x64-83_binding.node..
2022-05-12 10:17:54
807
原创 window系统git配置使vscode可以直接使用git功能
vscode 使用 git 配置使用该配置前要下载 git 工具生成 ssh 密钥点开 gitlab 或github个人资料设置中的 SSH 密钥，在顶部有这样的提示'在增加 SSH 密钥之前需要先生成密钥。'根据文档提示使用 Git Bash Here 生成密钥在某文件或桌面右键找到 Git Bash Here，在弹窗内输入第一条命令 ssh-keygen -t rsa -C "[email protected]" ，生成属于你的密钥，注意邮箱填自己的回车后在跳出 Over.
2022-05-12 10:06:06
348
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人