【数据流图】用JointJs实现数据流图（一） 创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。demo网址：https://resources.jointjs.com/demos#jointjsAPI文档：https://resources.jointjs.com/docs/jointjs/v3.5/joint.html其中linkInfo为自定义，可以使用起点元素id与终点元素id，也可使用起点元素坐标与终点元素坐标，以官方文档link的使用为准使用节点连接使用坐标连接。
vue+jsonp编写可导出html的模版，可通过外部改json动态更新页面内容 导出后文件结果如图所示，点击Index.html即可查看页面，页面所有数据由report.json控制，修改report.json内容即可改变index.html展示内容。
vue实现一个popover悬浮组件(简易版) 效果图实现思路定义组件，监听元素的mouseenter和mouseleave还有组件的mouseenter和mouseleave事件由于有滚动等交互需求，所以加一个轮询，监听鼠标对于元素和popover组件的交互状态实现代码<!-- * @Fileoverview: 保护措施详情 * @Description: 仪表盘-数据流图-保护措施详情--><template> <div class="popover"> <div
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
vue+原生js+element-ui实现轮播列表动画(无限轮播) 效果展示实现思路用element-ui中的el-row和el-col来构建列表，若无element-ui，也可用类似布局组件或直接用div元素实现将滚动区域封装，使用绝对定位与相对定位的方式，并将超出滚动区域部分hidden隐藏下述业务代码有每分钟刷新一次列表的需求，所以用两个interval，若纯轮播则一个interval即可通过改变子元素相对于父元素的top值，并设置transition: all 1s;即可出现如图所示效果当轮播结束后再次首尾相连，即可实现无限轮播关键代码流畅过
echarts+vue动态生成可配置的桑基(sankey)图 效果展示实现思路桑基图实现的本质也是一条条source-target，节点与节点之间的连线做到完全可配置化，需抽离出大量可配置的属性无数据的节点要进行隐藏，因此需要加是否有数据的判断节点颜色和线条颜色通过设置itemStyle和lineStyle来配置分辨率自适应则需要设置函数来动态计算实现代码//now-size.jslet nowClientWidth = document.documentElement.clientWidth;export function nowSize(
【数据流图】Echarts地图实例(热力图&线图&markPoint) 效果展示需求解读分辨率自适应左右框内标题及内容都可动态配置同时包括地图热力图与地图线图出发点添加涟漪动画markPoint根据数据不同动态展示是否高亮热力图颜色数值范围由返回数据动态控制难点分析series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定
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
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
Vue+el-popover+原生JS+CSS实现日历功能 效果展示功能固定位置展示星期(日/一/二/三/四/五/六)固定位置切换年份，重绘日历滚动展示完整日历自动滚动到离当天最近有数据的一天，若全年无数据则滚动至当天在日期下方动态添加小红点表示该天有数据，悬停展示当天数据概览，点击可高亮该日期实现思路实现固定位置与滚动容器定高，用于展示滚动修改滚动条样式，适配颜色header采用绝对定位固定body日期区域用绝对定位，与header固定位置保持距离body区域定高，展示滚动条拆解后元素结构如图所示：实现高亮与悬停展示
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文件夹至服务
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
关注
