大数据毕设/课设 - 数据大屏监控可视化设计与实现
Posted Seniors_DC
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大数据毕设/课设 - 数据大屏监控可视化设计与实现相关的知识，希望对你有一定的参考价值。
文章目录
0 前言
Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！
今天要分享的是：数据大屏监控可视化设计与实现
1 介绍
大数据大屏可视化系列：数据大屏监控可视化设计与实现
可搭载任意自己想用的数据，动态效果不错
项目源码： https://download.csdn.net/download/Seniors_DC/85581807
2 实现效果
整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。
3 部分关键代码
particlesJS('particles-js',
"particles":
"number":
"value": 10,
"density":
"enable": true,
"value_area": 1200
,
"color":
"value": "#ffffff"
,
"shape":
"type": "circle",
"stroke":
"width": 2,
"color": "#000000"
,
"polygon":
"nb_sides": 5
,
"image":
"src": "img/github.svg",
"width": 100,
"height": 100
,
"opacity":
"value": .8,
"random": false,
"anim":
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
,
"size":
"value": 5,
"random": true,
"anim":
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
,
"line_linked":
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
,
"move":
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract":
"enable": false,
"rotateX": 600,
"rotateY": 1200
,
"interactivity":
"detect_on": "canvas",
"events":
"onhover":
"enable": true,
"mode": "repulse"
,
"onclick":
"enable": true,
"mode": "push"
,
"resize": true
,
"modes":
"grab":
"distance": 400,
"line_linked":
"opacity": 1
,
"bubble":
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
,
"repulse":
"distance": 200
,
"push":
"particles_nb": 4
,
"remove":
"particles_nb": 2
,
"retina_detect": true,
"config_demo":
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
);
function launchParticlesJS(tag_id, params)
var canvas_el = document.querySelector('#'+tag_id+' > canvas');
/* particles.js variables with default values */
pJS =
canvas:
el: canvas_el,
w: canvas_el.offsetWidth,
h: canvas_el.offsetHeight
,
particles:
color: '#fff',
shape: 'circle',
opacity: 1,
size: 2.5,
size_random: true,
nb: 200,
line_linked:
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode:
enable: true,
rotateX: 65000,
rotateY: 65000
,
anim:
enable: true,
speed: 1
,
array: []
,
interactivity:
enable: true,
mouse:
distance: 100
,
detect_on: 'canvas',
mode: 'grab',
line_linked:
opacity: 1
,
events:
onclick:
enable: true,
mode: 'push',
nb: 4
,
retina_detect: false,
fn:
vendors:
interactivity:
;
/* params settings */
if(params)
if(params.particles)
var paramsForParticles = params.particles;
if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color;
if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape;
if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity;
if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size;
if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random;
if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb;
if(paramsForParticles.line_linked)
var paramsForLineLinked = paramsForParticles.line_linked;
if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto;
if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance;
if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color;
if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity;
if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width;
if(paramsForLineLinked.condensed_mode)
var paramsForCondensedMode = paramsForLineLinked.condensed_mode;
if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable;
if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX;
if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY;
if(paramsForParticles.anim)
var paramsForAnim = paramsForParticles.anim;
if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable;
if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed;
if(params.interactivity)
var paramsForInteractivity = params.interactivity;
if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable;
if(paramsForInteractivity.mouse)
if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance;
if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on;
if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode;
if(paramsForInteractivity.line_linked)
if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity;
if(paramsForInteractivity.events)
var paramsForEvents = paramsForInteractivity.events;
if(paramsForEvents.onclick)
var paramsForOnclick = paramsForEvents.onclick;
if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false;
if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode;
if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb;
pJS.retina_detect = params.retina_detect;
/* convert hex colors to rgb */
pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
/* detect retina */
if(pJS.retina_detect && window.devicePixelRatio > 1)
pJS.retina = true;
pJS.canvas.pxratio = window.devicePixelRatio
pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
pJS.particles.anim.speed = pJS.particles.anim.speed * pJS.canvas.pxratio;
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance * pJS.canvas.pxratio;
pJS.particles.line_linked.width = pJS.particles.line_linked.width * pJS.canvas.pxratio;
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance * pJS.canvas.pxratio;
/* ---------- CANVAS functions ------------ */
pJS.fn.canvasInit = function()
pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
;
pJS.fn.canvasSize = function()
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
window.onresize = function()
if(pJS)
pJS.canvas.w = pJS.canvas.el.offsetWidth;
pJS.canvas.h = pJS.canvas.el.offsetHeight;
/* resize canvas */
if(pJS.retina)
pJS.canvas.w *= pJS.canvas.pxratio;
pJS.canvas.h *= pJS.canvas.pxratio;
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
/* repaint canvas */
pJS.fn.canvasPaint();
if(!pJS.particles.anim.enable)
pJS.fn.particlesRemove();
pJS.fn.canvasRemove();
launchParticles();
;
pJS.fn.canvasPaint = function()
pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
;
pJS.fn.canvasRemove = function()
pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
/* --------- PARTICLES functions ----------- */
pJS.fn.particle = function(color, opacity, position)
/* position */
this.x = position ? position.x : Math.random() * pJS.canvas.w;
this.y = position ? position.y : Math.random() * pJS.canvas.h;
/* size */
this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size;
if (pJS.retina) this.radius *= pJS.canvas.pxratio;
/* color */
this.color = color;
/* opacity */
this.opacity = opacity;
/* animation - velocity for speed */
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
/* draw function */
this.draw = function()
pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')';
pJS.canvas.ctx.beginPath();
switch(pJS.particles.shape以上是关于大数据毕设/课设 - 数据大屏监控可视化设计与实现的主要内容，如果未能解决你的问题，请参考以下文章