- 博客(71)
- 收藏
- 关注
RSS订阅原创 【数据流图】用JointJs实现数据流图（一）
创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。demo网址：https://resources.jointjs.com/demos#jointjsAPI文档：https://resources.jointjs.com/docs/jointjs/v3.5/joint.html其中linkInfo为自定义，可以使用起点元素id与终点元素id，也可使用起点元素坐标与终点元素坐标，以官方文档link的使用为准使用节点连接使用坐标连接。
2024-05-10 17:07:32
560
原创 vue+el-tooltip 封装提示框组件，只有溢出才提示
使用el-tooltip的diabled实行和内容绑定mouseenter事件控制提示框是否展示
2023-11-29 16:31:34
706
原创 vue+less+style-resources-loader 配置全局颜色变量
全局统一样式后，可配置vue.config.js实现全局颜色变量，方便在编写时使用统一风格的色彩。
2023-11-29 16:11:26
947
原创 vue+jsonp编写可导出html的模版，可通过外部改json动态更新页面内容
导出后文件结果如图所示，点击Index.html即可查看页面，页面所有数据由report.json控制，修改report.json内容即可改变index.html展示内容。
2023-11-29 16:04:32
930
原创 vue实现一个popover悬浮组件(简易版)
效果图实现思路定义组件，监听元素的mouseenter和mouseleave还有组件的mouseenter和mouseleave事件由于有滚动等交互需求，所以加一个轮询，监听鼠标对于元素和popover组件的交互状态实现代码<!-- * @Fileoverview: 保护措施详情 * @Description: 仪表盘-数据流图-保护措施详情--><template> <div class="popover"> <div
2022-05-27 14:34:36
3775
6
原创 【数据流图】SpriteJs绘制数据流图
使用vue2+SpriteJs+Echarts5实现的2D数据流图，适用于演示场景，不适用于自由度过高的开发场景
2021-12-17 17:22:14
1317
3
原创 vue+原生js实现滚动加载数据动画
效果展示实现思路通过动态移除和新增元素实现代码run() { if (!this.isRuning) { this.isRuning = true; let runRes = this.$refs.runRes; let i = 0; while (runRes.hasChildNodes()) { runRes.removeChild(runRes.firstChild); } this.interval = setInterva
2021-10-28 14:37:55
242
原创 vue+原生js+element-ui实现轮播列表动画(无限轮播)
效果展示实现思路用element-ui中的el-row和el-col来构建列表，若无element-ui，也可用类似布局组件或直接用div元素实现将滚动区域封装，使用绝对定位与相对定位的方式，并将超出滚动区域部分hidden隐藏下述业务代码有每分钟刷新一次列表的需求，所以用两个interval，若纯轮播则一个interval即可通过改变子元素相对于父元素的top值，并设置transition: all 1s;即可出现如图所示效果当轮播结束后再次首尾相连，即可实现无限轮播关键代码流畅过
2021-10-28 14:17:36
4372
原创 echarts+vue动态生成可配置的桑基(sankey)图
效果展示实现思路桑基图实现的本质也是一条条source-target，节点与节点之间的连线做到完全可配置化，需抽离出大量可配置的属性无数据的节点要进行隐藏，因此需要加是否有数据的判断节点颜色和线条颜色通过设置itemStyle和lineStyle来配置分辨率自适应则需要设置函数来动态计算实现代码//now-size.jslet nowClientWidth = document.documentElement.clientWidth;export function nowSize(
2021-10-28 14:04:32
2883
原创 【数据流图】Echarts地图实例(热力图&线图&markPoint)
效果展示需求解读分辨率自适应左右框内标题及内容都可动态配置同时包括地图热力图与地图线图出发点添加涟漪动画markPoint根据数据不同动态展示是否高亮热力图颜色数值范围由返回数据动态控制难点分析series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定
2021-10-28 12:04:04
8183
4
原创 vue+echarts封装一个可配置的环形图
效果展示组件代码<template> <div class="donut-chart"> <div ref="chart" class="chart"></div> </div></template><script>const OVERVIEW_COLOR_LIST = [ '#6F9CF9', '#65DCAC', '#A486D5', '#F7C739', '#EB7
2021-10-28 11:19:32
575
原创 vue封装一个大屏加载动画
效果展示组件代码<template> <div class="spinner"> <div v-for="item in 5" :key="item" :class="rectName + ' rect rect' + item" ></div> </div></template><script>export default { name: 'Lo
2021-10-28 11:14:37
627
原创 Vue+el-popover+原生JS+CSS实现日历功能
效果展示功能固定位置展示星期(日/一/二/三/四/五/六)固定位置切换年份，重绘日历滚动展示完整日历自动滚动到离当天最近有数据的一天，若全年无数据则滚动至当天在日期下方动态添加小红点表示该天有数据，悬停展示当天数据概览，点击可高亮该日期实现思路实现固定位置与滚动容器定高，用于展示滚动修改滚动条样式，适配颜色header采用绝对定位固定body日期区域用绝对定位，与header固定位置保持距离body区域定高，展示滚动条拆解后元素结构如图所示：实现高亮与悬停展示
2021-10-28 10:43:00
607
原创 mac纯前端部署至本地服务器方案
前置环境应保证服务器上具备nginx环境，若无，则按此教程进行配置Linux nginx安装篇具体步骤一、打包本地项目在项目目录下执行npm run build 生成dist文件夹二、在服务器上创建自定义目录，以webapp为例1.连接服务器ssh root@192.168.20.120root@192.168.20.120's password: ****2.进入根目录，创建文件夹webappcd / mkdir webapp3.在本地项目目录下，上传dist文件夹至服务
2021-10-27 18:13:51
963
原创 vue生成并导出表格(使用xlsx第三方包，支持csv/html/xlsx等格式)
使用第三方包xlsx文档支持导出格式● xlsx● xlsb● xlsm● xls● xml● csv● txt● ods● fods● uos● sylk● dif● dbf● prn● qpw● 123● wb*● wq*● html● htm安装npm install xlsx使用demo<template> <div class="demo"> <qz-icon class="icon-d
2021-10-27 18:07:37
668
原创 vue+echarts图表编写模版(浏览器宽度自适应/及时销毁组件)
在此模版基础上可在两处编写代码，如无交互，可将click交互模块代码删除<template> <div class="chart" ref="chart"></div></template><script>export default { mounted() { this.init(); }, methods: { // 初始化数据 init() { this.paintChart(.
2021-10-27 18:04:41
371
原创 解决ssh连接服务器报错问题
问题详情解决方法● 原因：由于服务器重新安装系统了，所以会出现以上错误● 解决：ssh-keygen -R 服务器端的ip地址，再重新连接效果
2021-10-27 18:02:54
533
原创 解决el-tree被元素包裹后节点高亮显示不完全方案
问题详情如下图所示，将树形图包裹在panel中，超出最大宽高则横向或纵向滚动，但高亮设置的是当前选中节点的content，设置宽度100%，就会造成下图情况。解决方法覆盖原有高亮样式，给所有节点设置class为row-context，并设置row-context的样式，直接对高亮下的该容器设置样式，造成伪高亮效果(非组件自带高亮效果).el-tree-node.is-current > .el-tree-node__content { background: #fff; colo
2021-10-27 17:57:02
687
原创 在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)
使用出现的问题根据element-ui文档与网上教程编写如下代码<el-popover v-model="row.visible" trigger="click"><span slot="reference" @click="row.visible=!row.visible">删除</span></el-popover>常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码所以<span s
2021-07-06 18:13:36
10610
2
原创 chrome自动翻译导致网页文本错乱
问题解决方法在html标签中设置<html lang="zh-CN">// 默认为"en"，即英语在html的head标签中加入如下代码<meta name="google" content="notranslate" />
2021-07-01 17:09:40
1349
原创 vue+echarts 动态设置折线图最大值与跨度
效果图实现chartData为折线图数据数组为使interval跨度为整数，排布整齐，所以均匀分为五段，max为5的倍数具体代码如下let max = Math.floor(Math.max(...this.chartData) / 10) * 10 + 10;let interval = Math.floor(max / 5);...
2021-06-30 17:09:54
1085
原创 vue+echarts实现世界地图热力分布并打标
效果图代码<!-- * @Fileoverview: 风险分布 * @Description: 概览-风险分布--><template> <div class="map"> <div ref="self" class="map__content"></div> </div></template><script>import echarts from "echarts";im
2021-06-17 15:32:24
1815
1
原创 node.js+redis 用promise解决在多个数据库同时写入时出现错乱问题
问题背景同时在redis多个数据库中同时写入数据，有的数据未写入，有的数据写入到了别的数据库原因redis是用c语言实现的，同时select数据库的时候会出现指针错乱问题，由于redis跑任务时候是多线程的，所以当同时select时，select0号数据库写入的时候，指针指向0号数据库，但未完成写入操作时，别的select数据库线程覆盖了。导致指针指向了1号数据库，导致写入0号数据库的key-value到了1号数据库，从而导致错乱解决方法(promise)对于这种问题，为了保证指针不错乱，就要求异
2021-04-19 10:27:41
497
1
原创 vue+echarts 创建水球图组件
步骤效果图下载注册编写组件使用效果图下载npm install echarts-liquidfill --save注册在main.js中引入import "echarts-liquidfill";编写组件<template> <div class="fill"> <div class="fill__chart" ref="fill"></div> </div></template><sc
2021-04-19 10:16:46
408
原创 vue数据大屏分辨率自适应（包括echarts内部自适应）
echarts内部屏幕大小自适应参考文章：echarts自适应问题，echarts中怎么改变字体单位实现自适应写一个换算函数//当前视口宽度let nowClientWidth = document.documentElement.clientWidth;//换算方法function nowSize(val,initWidth=1920){ return val * (nowClientWidth/initWidth);}在echarts有关大小的地方进行使用lege
2021-03-18 11:27:31
2988
原创 全局修改滚动条样式
效果代码::-webkit-scrollbar { height:8px; width: 8px; }::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px;}
2021-01-18 16:35:41
303
原创 js判断对象是否为空对象的简单方式（使用JSON.stringfy）
直接使用JSON.stringfy(x)转换为JSON字符串，再做字符串的比较即可
2020-12-22 10:19:30
228
原创 原生js清空子元素与添加子元素
清空子元素(removeChild)//获取父元素let content = document.getElementsByClassName("table-page__text")[0];//循环删除子元素，一直删除第一个子元素直到没有子元素即为清空while (content.hasChildNodes()) { content.removeChild(content.firstChild);}添加子元素(insertAdjacentHTML)let content = docume
2020-12-22 10:16:06
1873
1
原创 使用moment将毫秒精度时间戳转换为分钟精度时间戳
一般情况下默认时间戳精度为毫秒精度，转换为分钟精度用到moment.jsmoment(newDate().getTime()).startOf("minute").unix() * 1000Moment.js是JavaScript 日期处理类库
2020-12-22 10:11:55
4962
原创 vue+echarts 实现日历坐标系+热力图 按月隔开的图表
预览(由于图表过长，用div包裹后实现滚动)实现分隔思路日历坐标系不自带分隔，就用边框粗细来实现伪分隔还有一种分隔思路是使用多张热力图图表，这意味着series中会有多个对象，而且不方便传值echarts官方实例中不带文字的显示，所以根据文档查阅，自定义热力图中的label就可以实现实现代码<div class="ip-risk--left"> <div ref="chart" class="ip-risk__chart"></div> <
2020-12-02 17:14:53
2497
原创 原生JS 对象的深拷贝(包括对类型的判断)
代码function deepCopy(obj, cache = new WeakMap()) { // 判断是否为对象 if (!(obj instanceof Object)) { return obj; } if (cache.get(obj)) { return cache.get(obj) } // 判断是否为函数类型 if (obj instanceof Function) { return function () { obj
2020-11-11 09:57:21
129
原创 原生JS 日期格式化 （形如yyyMMdd hh:mm:ss等）
代码export function formatDate(date, fmt) { var currentDate = new Date(date); var o = { "M+": currentDate.getMonth() + 1, //月份 "d+": currentDate.getDate(), //日 "h+": currentDate.getHours(), //小时 "m+": currentDate.getMinutes(), //分 "s
2020-11-11 09:44:49
1312
原创 echarts使用dataZoom属性，左右滑动时折线图混乱或显示不全问题的解决方案
问题复现由图可知，8号数据为0且当前显示局部趋势与下方滑动条中趋势图形不符，排查问题发现是数据过滤的问题解决方案属性中加入filterMode: 'empty'关于dataZoom中的filterMode属性可以查看官方文档dataZoom-slider.filterMode解决后效果图...
2020-11-09 14:42:18
3944
3
原创 vue封装el-dialog为公用组件时控制打开关闭的方法
在我们封装的组件中加入变量visible与关闭函数<el-dialog title="文件详情" :visible.sync="visible" :close-on-click-modal="false" @close="dialogClose" > //加入你要编写的内容</el-dialog>export default { props: { dialogFlag: { defau.
2020-10-23 17:08:21
1802
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人