可视化
wl_
这个作者很懒,什么都没留下…
展开
-
练练手之“四环”“磁铁”(svg)
svg练练手原创 2023-12-12 21:01:08 · 409 阅读 · 0 评论 -
推荐一个表格组件handsontable
web版的excel,Handsontable可能满足你的需求原创 2022-04-04 23:40:29 · 705 阅读 · 0 评论 -
简单拖拽布局客户端渲染-小结
背景:项目需要在管理端通过拖拽的方式对大屏页面进行布局,生成布局配置。然后在客户端根据布局配置进行渲染。一、特殊需求● 页面布局模块可能重合,这时需要定时切换,时间可配置● 超出布局容器时,内容可滚动,包括横向和纵向,滚动周期可配置二、大屏特性自适应,随屏幕分辨率自适应改变大小注:自适应页面不能使用px,结合使用vw、vh、%、em、rem三、实现步骤布局容器实现内容超出滚...原创 2019-06-22 11:48:34 · 569 阅读 · 0 评论 -
可视化布局实现方案
背景:大屏展示网页,管理端实现拖拽布局配置一、功能点拖拽实现布局配置根据配置渲染出页面二、开源工具vue-grid-layout:基于vue的可视化拖拽布局工具,可拖动改变容器大小muuri:功能和vue-grid-layout差不多,不支持拖动改变容器大小三、本文采用vue-grid-layout实现,使用详情参见Github四、实现demo效果五、改进功能点...原创 2019-06-13 16:01:26 · 7955 阅读 · 3 评论 -
写个css边框样式。。。
一、效果图二、用途:可用于按时间进程显示信息的视图三、代码:https://codepen.io/wlei/pen/wQvRqm原创 2018-11-04 09:29:05 · 1070 阅读 · 0 评论 -
canvas特效用例之粒子射线
一、构建粒子类Particle.staticOption = { color:'#000',//粒子填充颜色 radius:10,//粒子半径 x:0,//粒子x坐标,即粒子中心x坐标 y:0,//粒子y坐标,即粒子中心y坐标 speedX:1,//粒子x方向上速度 speedY:1//粒子y方向上速度};function Partic...原创 2018-08-31 21:59:54 · 1791 阅读 · 0 评论 -
动态添加网络拓扑节点、svg下载
一、效果 二、代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拓扑图&原创 2018-05-24 16:44:58 · 2192 阅读 · 0 评论 -
CSS实现圆环百分比进度效果
原理:红色背景圆为主题,在其上覆盖左右两个灰色半圆,然后在最上面放上用于显示百分比的黑色圆,通过交替旋转两个灰色半圆露出下面的红色背景,在视觉上实现百分比进度效果。一、效果图 二、代码:https://codepen.io/wlei/pen/RyNPKE...原创 2018-04-19 18:52:20 · 19430 阅读 · 2 评论 -
d3之网络拓扑图进阶
重点:理解力布局与数据、图形的关系,力布局最初用来实现力导向图,它是基于基本苇尔莱积分法对粒子运动的模拟,D3实现了一种数值方法,这种数值方法在粒子级别模拟了简单约束下的牛顿运动方程,其约束条件表示了粒子之间的约束关系。D3中的data()、enter() 、exit()等方法则实现数据与图形的结合或分离。根据布局来处理填入的图形和数据,最终形成力布局可视化效果。一、效果: 二、...原创 2018-03-14 11:04:27 · 11692 阅读 · 12 评论 -
3D图形基础概念
一、顶点、多边形、网格 顶点:描述具有x、y、z坐标的空间位置 多边形:通过连接多个顶点形成 网格:由一个或多个多边形组成(一般是三角形、四边形) 3D 图形是由3D网格构成的,3D网格也被称为模型。二、材质、纹理、光源 纹理:物体的表面上绘制的图案 材质:物体表面各可视属性的结合,这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等 光源:材质的表现必然依原创 2018-01-07 14:36:16 · 3167 阅读 · 0 评论 -
svg转图片下载
参考链接: http://www.cnblogs.com/jiangxiaobo/p/6007589.html http://blog.csdn.net/guoweish/article/details/53106898 http://www.w3dev.cn/article/20170506/save-canvas-to-image.aspx http://javascript.ruany原创 2017-06-07 12:44:51 · 3879 阅读 · 0 评论 -
echarts之随机方块
一、效果图 二、代码 本例是echatrs中的热力图实现的。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>随机方块</title> <style> #echart { width: 600px;原创 2017-09-13 18:36:30 · 1899 阅读 · 0 评论 -
echarts 仪表图-实例
一:效果图 二:optionoption = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, ser原创 2017-08-20 17:06:05 · 5797 阅读 · 0 评论 -
echarts地图分布-实例
一.效果图 二.部分代码js代码:var opt= { provincePYName:'sichuan', provinceData:[{name: '成都市',value: 1,type:1}], cityData:[{name: '绵阳市',value: 1,type:2}], countyData:[{name: '绵阳市',value: 1,type:3}原创 2017-08-19 15:01:31 · 6117 阅读 · 0 评论 -
基于d3.js的组织结构图实现
一、效果图: 二、数据结构 data.json: { “name”:”中国”, “number”:”2000”, “children”: [ { “name”:”浙江” , “number”:”100”, “children”: [原创 2017-05-05 23:43:32 · 20969 阅读 · 10 评论 -
echarts圆环百分比图示
一、效果图 二、代码 html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="pieDiagram" class="floatLeft" style="height:400px;wid原创 2017-05-18 12:14:01 · 34122 阅读 · 6 评论 -
基于d3.js简单bubble图
借鉴:Hui-NaN博主的博客 一、效果图 二、html代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="bubble"></div>原创 2017-05-09 12:43:55 · 2173 阅读 · 4 评论 -
日、周、月时间控件
一、.效果图 需求描述: 1.分别按日、周、月三中类型统计,每选一种日历的日期选择方式会发生变化 2.依赖:boostrap3 、My97DatePicker时间控件(http://www.my97.net/dp/demo/index.htm)二、html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"原创 2017-05-10 19:26:33 · 3693 阅读 · 0 评论 -
d3.js-简单网络拓扑图实现
d3.简要拓扑图实现原创 2017-03-17 22:49:46 · 11233 阅读 · 5 评论