乐怿数据可视化
乐怿数据可视化

基于 Echarts + Python 实现的动态实时可视化数据大屏展示范例三

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【物联网平台数据统计】。

话不多说，开始分享干货，欢迎讨论！QQ微信同号： 6550523

首先看动态效果图 ：

 

基于 Echarts + Python 实现的动态实时可视化数据大屏展示范例三_第1张图片

再看实时分片数据图：

基于 Echarts + Python 实现的动态实时可视化数据大屏展示范例三_第2张图片

基于 Echarts + Python 实现的动态实时可视化数据大屏展示范例三_第3张图片

一、 确定需求方案

 

1、确定产品上线部署的屏幕LED分辨率

1280px*768px，F11全屏后占满整屏且无滚动条；其它分辨率屏幕均可自适应显示。

2、功能模块

  • 平台数据分布
  • 在线 离线
  • 设备在线情况
  • 接入工厂类型
  • 监控列表
  • 告警信息
  • 报警记录
  • 数据记录

3、部署方式 

  • 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
  • 观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

  1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
  2. 后端基于Python Web实现，使用Pycharm编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
  5. 数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

  1. 前端html代码  
    

	
		
		数据大屏
		
		
	
	
		
    
			物联网平台数据统计案例
			
		
    
		
    
			
    
				
    
					
    
						
    						
					
    
					
    
						
    
					
    
				
    
				
                
    
                	
     设备在线情况
    
                	
    
                		
                	
    
                
    
                
    
                	
     接入工厂类型
    
                	
    
                
    
			
    
			
    
				
    
					
     平台数据分布
    
					
    
					
    
				
    
				
    
					
    
                        
                        
    
                             监控列表
                        
    
                            
                        
                        
    
                        	{{ item.categories }}
                        
    
                        
    
                            {{ y.company }}
                            {{ y.dtuCnt }}
                            {{ y.plcCnt }}
                            {{ y.dataCnt }}
                            {{ y.alarm }}
                            
                            	
                            	
                            	
                            
                        
    
                            
                    
    
				
    
			
    
			
    
				
    
					
    
						
    告警信息
    
						{{alarm.alarm}}条
					
    
					
    
						
    故障信息
    
						{{alarm.fault}}条
					
    
				
    
				
    
					
     报警记录
    
					
    
						
      
							
    • 
							    {{ item.msg }}
							
      • 
						
    
					
    
				
    
				
    
					
     数据记录
    
					
    
					
    
				
    
			
    
		
    
		
		
    
		
		
    
		    
    
		        报警记录
		        Ｘ
		    
    
		    
    
		        
    
                    
                        
    
                            字段
                            字段
                            字段
                            字段
                            字段
                        
    
                        
                    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
                    
    
                         
                         
                         
                         
                         
                    
    
                        
                
    
		    
    
		    
    
		        
		    
    
		
    
		
		
		
    
		
		
    
		    
    
		        历史记录
		        Ｘ
		    
    
		    
    
		        
    
                    
                        
    
                            字段
                            字段
                            字段
                            字段
                            字段
                        
    
                        
                    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
    
                         
                         
                         
                         
                         
                    
    
                    
                    
    
                         
                         
                         
                         
                         
                    
    
                        
                
    
		    
    
		    
    
		        
		    
    
		
    
		
		
		
    
		
		
    
		    
    
		        组态应用
		        Ｘ
		    
    
		    
    
		        组态应用

     

  2. 前端JS代码  
    var scn_data={
		alarm:{alarm:10,fault:10},
		dtu:{ on:150,off:150},
		plc:{on:10,off:10},
		industy:{v1:10,v2:11,v3:12,v3:14,v4:15,v5:17,v6:18},
		online:{v1:10,v2:11,v3:12,v3:14,v4:15,v5:17,v6:18},
		almMsg:[{msg:"2017年5月4日市A区12#机器气压过高报警"},
				{msg:"上海市A区12#机器气压过高报警"},
				{msg:"江苏省12#机器气压过高报警"},
				{msg:"河南省郑州市B区12#机器气压过高报警"},
				{msg:"河南省郑州市B区12#机器气压过高报警"},
				{msg:"河南省郑州市B区12#机器气压过高报警"},
				{msg:"河南省郑州市B区12#机器气压过高报警"}
				],
		msgCnt:[{msg:100,alm:20},
			{msg:200,alm:40},
			{msg:300,alm:50},
			{msg:400,alm:35},
			{msg:400,alm:40},
			{msg:400,alm:11},
			{msg:400,alm:66},
			{msg:100,alm:77},
			{msg:200,alm:88},
			{msg:300,alm:22},
			{msg:400,alm:99},
			{msg:400,alm:100},
			{msg:400,alm:111},
			{msg:400,alm:222},
			{msg:100,alm:333},
			{msg:200,alm:11},
			{msg:300,alm:33},
			{msg:400,alm:55},
			{msg:400,alm:77},
			{msg:400,alm:90}
			],
		map:[{area:"山东",cnt:20},
			{area:"浙江",cnt:40},
			{area:"江苏",cnt:50},
			{area:"辽宁",cnt:50}
		],
		factoryHeader:[
	        {"categories":"单位名"},
	        {"categories":"网关数"},
	        {"categories":"设备数"},
	        {"categories":"数据点"},
	        {"categories":"报警"},
	        {"categories":"操作"}
    	],
		factory:[
			{"company":"宝钢","dtuCnt": 200, "plcCnt": 400,"dataCnt": 5000,"alarm": "无"},
	        {"company":"造纸厂","dtuCnt": 3000,"plcCnt": 2000,"dataCnt": 1000,"alarm": "无"},
	        {"company":"锅炉厂","dtuCnt": 1500,"plcCnt": 1000,"dataCnt": 500,"alarm": "无"},
	        {"company":"锅炉二厂","dtuCnt": 1500,"plcCnt": 300,"dataCnt": 1200,"alarm": "温度上限报警>120"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"},
	        {"company":"锅炉三厂","dtuCnt": 1000,"plcCnt": 800,"dataCnt": 200,"alarm": "无"}		]
	};
var vm = new Vue({
	el: '#content',
	data: scn_data,
	methods: {
		details: function() {
			
		}
	}
})


    $(function(){
		// var worldMapContainer1 = document.getElementById('distribution_map');
	    var chartMapElement = document.getElementById(chartMapElementId);
	    console.log(chartMapElementId, "init")
	    // var worldMapContainer1 = chartMapElementId
		var myChart = echarts.init(chartMapElement);
		var option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				y: 'bottom',
				data: [
					'已安装设备'
				],
				textStyle: {
					color: '#ccc'
				}
			},
			visualMap: {
				min: 0,
				max: 2500,
				left: 'right',
				top: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: true,
				//		color: ['#26cfe4', '#f2b600', '#ec5845'],
				textStyle: {
					color: '#fff'
				}
			},
			series: [{
					name: '已安装设备',
					type: 'map',
					aspectScale: 0.75,
					zoom: 1.2,
					mapType: 'china',
					roam: false,
					label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#800080"}
                        } 
					},
					itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#009fe8',//区域边框颜色
                            areaColor:"#ffffff",//区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ffdead",
                        }
                    },
					data: function() {
						var serie = [];
						for(var i = 0; i < vm.map.length; i++) {
							var item = {
								name: vm.map[i].area,
								value: vm.map[i].cnt
							};
							serie.push(item);
						}
						console.log(serie)
						return serie;
					}()

				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		// myChart.on('click', function (params) {//点击事件
		//     if (params.componentType === 'series') {
		//     }
		// })
	}
)

var chartMapElementId = 'distribution_map';
// var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
var jsonFileName = 'json/map.json';

function async_map_data() {

	// 异步加载数据
	$.getJSON(jsonFileName).done(function (data) {
		var chartMapElement = document.getElementById(chartMapElementId);
		console.log(chartMapElementId, "async_data")
		var myChart = echarts.init(chartMapElement);
		console.log(data)
		myChart.setOption({
			series: [{
				type: 'map',
				mapType: 'china',
				data: data
			}]
		});
	});//end $.getJSON
}

    $(function() {
	// var dom = document.getElementById("container");
	var dom = document.getElementById(chart_2ElementId);
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '环形图';
	
	option = {
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} 
    {b}: {c} ({d}%)"
	    },
	    legend: {
	        orient: 'horizontal',
	        x: 'left',
	        data:['在线','离线'],
	        itemWidth: 8,
	        itemHeight: 8,
	        textStyle:{//图例文字的样式
	            color:'#fff',
	            fontSize:12
	        }
	    },
	    color:['#37a2da','#ffd85c'],
	    series: [
	        {
	            name:'DTU',
	            type:'pie',
	            radius: ['50%', '70%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '24',
	                        color:'#00fcff',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false,
	                }
	            },
	            data:[
	                {value:vm.dtu.on, name:'在线'},
	                {value:vm.dtu.off, name:'离线'}
	            ]
	        }
	    ]
	};

	if (option && typeof option === "object") {
	    myChart.setOption(option, true);
	}
});


var chart_2ElementId = 'container';
// var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
var jsonFile2Name = 'json/chart_2.json';

function async_chart_2() {

	// 异步加载数据
	$.getJSON(jsonFile2Name).done(function (data) {
		var chartMapElement = document.getElementById(chart_2ElementId);
		console.log(data, "async_chart_2")
		var myChart = echarts.init(chartMapElement);
		myChart.setOption({
			series: [{
				data: data
			}]
		});
	});//end $.getJSON
}

    $(function() {
    // var dom = document.getElementById("container2");
    var dom = document.getElementById(chart_4ElementId);
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        
        legend: {
            x : 'center',
            y : 'bottom',
            itemWidth: 8,
            itemHeight: 8,
            textStyle:{//图例文字的样式
                color:'#fff',
                fontSize:12
            },
            data:['上限','上上限','下限','下下限','正跳变','负跳变']
        },
        calculable : true,
        series : [
            {
                name:'面积模式',
                type:'pie',
                radius : [30, 100],
                center : ['50%', '45%'],
                roseType : 'area',
                data:[
                    {value:vm.online.v1, name:'上限',itemStyle:{normal:{color:'#ff7800'}}},
                    {value:vm.online.v2, name:'上上限',itemStyle:{normal:{color:'#23eb6a'}}},
                    {value:vm.online.v3, name:'下限',itemStyle:{normal:{color:'#7627cb'}}},
                    {value:vm.online.v4, name:'下下限',itemStyle:{normal:{color:'#fffc00'}}},
                    {value:vm.online.v5, name:'正跳变',itemStyle:{normal:{color:'#46afdb'}}},
                    {value:vm.online.v6, name:'负跳变',itemStyle:{normal:{color:'#ff0000'}}}
                ]
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});


var chart_4ElementId = 'container2';
// var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
var jsonFile4Name = 'json/chart_4.json';

function get_legend(data) {
    var list = new Array();
    for (i=0; i
    $(function() {
	// var dom = document.getElementById("container1");
	var dom = document.getElementById(chart_3ElementId);
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '环形图';

	option = {
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} 
    {b}: {c} ({d}%)"
	    },
	    color:['#37a2da','#ffd85c'],
	    series: [
	        {
	            name:'PLC',
	            type:'pie',
	            radius: ['50%', '70%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '24',
	                        color:'#00fcff',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	                {value:vm.plc.on, name:'在线'},
	                {value:vm.plc.off, name:'离线'}
	            ]
	        }
	    ]
	};

	;
	if (option && typeof option === "object") {
	    myChart.setOption(option, true);
	}
});

var chart_3ElementId = "container1"
var jsonFile3Name = 'json/chart_3.json';

function async_chart_3() {

	// 异步加载数据
	$.getJSON(jsonFile3Name).done(function (data) {
		var chartMapElement = document.getElementById(chart_3ElementId);
		console.log(data, "async_chart_3")
		var myChart = echarts.init(chartMapElement);
		myChart.setOption({
			series: [{
				data: data
			}]
		});
	});//end $.getJSON
}

    $(function() {
    var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var pathSymbols = {
        reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
        huanbao: 'path://"M769.143467 622.865067h-149.486934v-58.248534l-76.202666 135.7824L619.656533 836.266667v-57.9584h76.202667a52.599467 52.599467 0 0 0 46.045867-26.914134L836.266667 583.5776c-13.943467 24.32-39.560533 39.594667-67.1232 39.3216v-0.034133zM662.135467 389.12l76.526933-135.7824-48.964267 29.269333s-19.131733-34.304-26.914133-47.957333c-10.7008-18.961067-30.805333-31.2832-52.206933-30.958933-21.4016 0-41.506133 11.997867-52.206934 31.2832 0 0-17.5104 30.976-35.0208 62.583466l35.669334 63.2832-49.288534 28.603734 152.405334-0.324267z m-294.434134 154.88l-74.9056 132.829867a80.896 80.896 0 0 0-0.324266 79.5648l-94.3616-167.850667a55.534933 55.534933 0 0 1 0.324266-54.596267l38.263467-67.566933L187.733333 437.418667h152.7296l76.202667 135.8336-48.964267-29.2352z m333.021867 62.583467l-76.202667-135.816534 131.003734-77.585066c29.832533 53.589333 67.771733 120.832 67.771733 120.832a62.9248 62.9248 0 0 1 0.324267 61.934933 60.398933 60.398933 0 0 1-52.5312 30.634667h-70.365867zM305.7664 687.104s17.5104-30.958933 35.345067-62.907733h152.7296v155.477333h-135.867734a58.9312 58.9312 0 0 1-52.5312-30.634667 62.907733 62.907733 0 0 1 0.324267-61.934933z m239.3088-460.049067c-17.834667 31.607467-116.736 207.36-116.411733 207.36l-131.652267-77.892266s62.907733-113.493333 79.445333-141.141334c9.403733-16.3328 25.941333-27.648 45.7216-27.648h188.7232c-27.562667 0-51.882667 14.626133-65.826133 39.3216z',
        rocket: 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z',
        gongnuan: 'path://M904.625704 503.021511l0-28.310789c0-41.160445-33.483602-74.698283-74.697259-74.698283L752.072239 400.01244c-41.213657 0-74.698283 33.537837-74.698283 74.698283l0 13.393032-51.504024 0 0-13.393032c0-41.160445-33.483602-74.698283-74.698283-74.698283l-77.855182 0c-41.21468 0-74.698283 33.537837-74.698283 74.698283l0 13.393032-51.559283 0 0-13.393032c0-41.160445-33.483602-74.698283-74.698283-74.698283l-77.855182 0c-41.213657 0-74.698283 33.537837-74.698283 74.698283l0 27.874861c-20.797675 14.591323-34.462906 38.546921-34.462906 65.768913l0 52.484352c0 27.223015 13.665231 51.287083 34.462906 65.768913l0 195.891506c0 41.160445 33.484625 74.644047 74.698283 74.644047l77.855182 0c41.21468 0 74.698283-33.484625 74.698283-74.644047L347.058902 701.090613l51.559283 0 0 181.408653c0 41.160445 33.483602 74.644047 74.698283 74.644047l77.855182 0c41.21468 0 74.698283-33.484625 74.698283-74.644047L625.869932 701.090613l51.504024 0 0 181.408653c0 41.160445 33.484625 74.644047 74.698283 74.644047l77.856205 0c41.213657 0 74.697259-33.484625 74.697259-74.644047L904.625704 686.282349c20.526499-14.591323 34.028001-38.438451 34.028001-65.442478l0-52.484352C938.653705 541.350468 925.152203 517.503341 904.625704 503.021511zM291.308157 882.500289c0 10.236132-8.65717 18.892279-18.947538 18.892279l-77.855182 0c-10.290367 0-18.947538-8.656147-18.947538-18.892279L175.5579 474.710722c0-10.290367 8.65717-18.947538 18.947538-18.947538l77.855182 0c10.290367 0 18.947538 8.65717 18.947538 18.947538L291.308157 882.500289zM347.058902 645.339868l0-101.485369 51.559283 0 0 101.485369L347.058902 645.339868zM570.119187 882.500289c0 10.236132-8.65717 18.892279-18.947538 18.892279l-77.855182 0c-10.290367 0-18.947538-8.656147-18.947538-18.892279L454.36893 474.710722c0-10.290367 8.65717-18.947538 18.947538-18.947538l77.855182 0c10.290367 0 18.947538 8.65717 18.947538 18.947538L570.119187 882.500289zM625.869932 645.339868l0-101.485369 51.504024 0 0 101.485369L625.869932 645.339868zM848.874959 882.500289c0 10.236132-8.656147 18.892279-18.946514 18.892279L752.072239 901.392568c-10.290367 0-18.946514-8.656147-18.946514-18.892279L733.125725 474.710722c0-10.290367 8.656147-18.947538 18.946514-18.947538l77.856205 0c10.290367 0 18.946514 8.65717 18.946514 18.947538L848.874959 882.500289zM770.52859 373.497553c6.588045 0 13.230326-2.341325 18.511609-7.023974 11.541871-10.235109 12.522198-27.874861 2.341325-39.417755-17.695011-19.817348-25.53456-38.002522-23.411199-53.954843 2.939959-22.050202 24.391527-36.20662 28.692482-39.581484 34.898835-32.667004 49.652863-65.334008 43.88244-97.130178-8.221242-45.025473-54.118572-65.22349-59.344596-67.402109-14.210653-5.879917-30.271444 0.817622-36.260855 14.917758-5.934153 14.156418 0.707105 30.435173 14.754029 36.477796 5.990434 2.613524 23.737634 13.012362 26.025747 26.133194 2.013867 11.597129-7.622608 28.03859-22.867824 43.065841-4.409426 2.777253-43.282782 28.256554-50.034557 75.241658-4.736884 33.048697 7.676843 66.477041 36.859489 99.362009C755.230162 370.340653 762.85277 373.497553 770.52859 373.497553zM513.82302 373.497553c6.588045 0 13.230326-2.341325 18.511609-7.023974 11.541871-10.235109 12.521175-27.874861 2.340301-39.417755-17.693987-19.817348-25.533536-38.002522-23.411199-53.954843 2.939959-22.050202 24.391527-36.20662 28.692482-39.581484 34.898835-32.667004 49.652863-65.334008 43.88244-97.130178-8.221242-45.025473-54.117548-65.22349-59.344596-67.402109-14.100136-5.879917-30.216185 0.817622-36.259832 14.917758-5.935176 14.156418 0.707105 30.435173 14.754029 36.477796 5.989411 2.613524 23.737634 13.012362 26.024723 26.133194 2.01489 11.597129-7.621585 28.03859-22.8668 43.065841-4.41045 2.777253-43.283806 28.256554-50.034557 75.241658-4.736884 33.048697 7.67582 66.477041 36.859489 99.362009C498.524592 370.340653 506.146177 373.497553 513.82302 373.497553zM248.350786 373.497553c6.588045 0 13.230326-2.341325 18.511609-7.023974 11.541871-10.235109 12.521175-27.874861 2.340301-39.417755-17.693987-19.817348-25.533536-38.002522-23.411199-53.954843 2.939959-22.050202 24.391527-36.20662 28.692482-39.581484 34.898835-32.667004 49.652863-65.334008 43.88244-97.130178-8.220219-45.025473-54.117548-65.22349-59.344596-67.402109-14.100136-5.879917-30.270421 0.817622-36.259832 14.917758-5.935176 14.156418 0.707105 30.435173 14.754029 36.477796 5.989411 2.613524 23.737634 13.012362 26.024723 26.133194 2.01489 11.597129-7.621585 28.03859-22.8668 43.065841-4.41045 2.777253-43.283806 28.256554-50.034557 75.241658-4.736884 33.048697 7.676843 66.477041 36.859489 99.362009C233.052359 370.340653 240.673943 373.497553 248.350786 373.497553z',
        caijue: 'path://M509.43406 679.723979l328.591807 0c24.785499 0 47.437405 10.239202 63.686485 26.455535 0.427742 0.461511 0.851391 0.461511 0.851391 0.889253 15.82543 16.214287 25.604144 38.47222 25.604144 62.369489 0 24.783453-10.243295 47.433312-26.456558 63.682391-0.427742 0.424672-0.853437 0.817622-1.316995 1.281179-16.213263 15.360849-38.010709 25.175379-62.369489 25.175379L509.43406 859.577207c-24.74866 0-47.399543-10.241248-63.650669-26.456558l13.726629-13.725606-13.726629 13.725606c-0.425695-0.463558-0.852414-0.88823-0.852414-1.280156-15.788591-16.251126-25.637913-38.047548-25.637913-62.402235 0-24.749684 10.276041-47.009663 26.490328-63.258743C462.034517 689.963181 484.685399 679.723979 509.43406 679.723979L509.43406 679.723979zM887.596865 658.744155c-131.138736 0-264.057001 2.169409-395.265322 0-6.365988 0-12.374842-2.952238-16.21531-8.498558L362.47194 476.333686c-13.654998-21.370727-22.651906-34.206056-27.770484-36.767392-1.280156-0.817622-0.427742 3.450589-5.15644 9.422603-16.642029 20.091594-32.466436 39.718607-47.827285 59.347666-6.827499 8.603959-13.652951 17.137309-22.649859 28.693506-1.279133 1.671059-3.022847 3.411703-5.120624 5.082762-8.534374 6.009877-20.517289 4.303003-26.527167-4.26514l0 0c-13.19144-18.345834-20.872377-31.182186-28.16241-44.020586-4.693906-8.071839-8.960069-15.787568-14.968923-24.747637-5.120624-7.291057-4.693906-17.104563 0.88823-23.932062l0 0 99.136881-114.951055c17.921161-20.925588 34.597983-32.482809 52.127218-33.761941 19.202341-1.672082 36.305881 8.53335 53.408397 31.185256 14.935154 20.517289 37.124526 50.847062 58.919924 81.606623 14.508435 20.088524 28.66076 40.153512 41.462321 57.68377 5.582135-9.813506 11.095709-19.663852 17.10354-29.868261 27.76946-49.16884 60.660568-106.434078 85.907579-147.008168 2.952238-6.399757 9.351995-10.70276 17.033955-10.70276 31.221072 0 42.739407 0 56.43022 0 44.022633-0.425695 92.699262-0.817622 129.040958 0l0.853437 0c10.66899 0 19.664875 8.144494 19.664875 18.827811l0 0c0.851391 24.76708 0.425695 49.978275 0 75.206866 0 18.34788-0.461511 36.748972 0 54.68753l71.329559 0c35.488259 0 56.821123 31.211862 65.355497 70.931492 2.596128 13.652951 4.303003 28.198226 4.303003 43.128263 0 14.97097-1.706875 29.9051-4.730745 43.63173C944.026062 626.706485 922.22964 658.744155 887.596865 658.744155L887.596865 658.744155zM67.230706 663.4749c-15.787568-75.597769 25.638937-131.60127 79.899748-178.607864 0.853437-0.852414 1.706875-1.705851 2.596128-2.131547 8.9263-5.975085 20.872377-3.378957 26.456558 5.582135l51.665707 79.041194c2.169409 2.527566 3.056616 5.548366 3.449565 8.499581l-18.811438 3.022847 18.811438-3.022847c5.973038 39.789215 19.23611 66.243727 40.572044 84.201727 22.223141 18.810415 54.29765 29.904077 95.723132 38.864146 4.301979 0.856507 8.568143 2.987031 11.555174 6.828522 6.40078 8.141424 5.120624 20.554128-2.987031 26.91807l-11.982916-14.898315 11.982916 14.898315c-77.765131 62.865793-158.980851 67.098187-219.180931 39.788192-22.685675-10.701736-42.776246-25.672706-57.710376-44.447305C83.444992 709.629079 72.316537 687.403892 67.230706 663.4749L67.230706 663.4749zM735.939817 456.669834 602.170161 456.669834l-0.38988 0c-3.025916 0-6.437619-0.853437-9.425673-2.560312-9.42158-5.120624-12.373819-16.642029-7.251148-26.056446l0 0 46.544059-82.461083c2.986007-6.843872 9.851369-11.57257 17.532305-11.57257l86.758969 0c10.66899 0 19.203364 8.996908 19.203364 19.23611l0 84.210937C755.142158 448.136483 746.607784 456.669834 735.939817 456.669834L735.939817 456.669834zM838.025866 718.16243 509.43406 718.16243c-14.045901 0-26.883277 5.547343-36.305881 14.969946-9.422603 9.423627-15.360849 22.225187-15.360849 36.305881 0 13.651928 5.51255 26.491351 14.507412 35.449373 0 0.464581 0.427742 0.889253 0.853437 0.889253l0 0 0 0c8.997931 9.386788 22.25998 15.359826 36.305881 15.359826l328.591807 0c13.690814 0 26.492374-5.54632 35.488259-14.507412l0.855484-0.852414c9.385764-8.959046 15.395642-22.224164 15.395642-36.338626 0-13.656021-5.582135-26.064632-14.57802-35.453467l-0.817622-0.852414C864.948029 723.709773 852.144422 718.16243 838.025866 718.16243L838.025866 718.16243zM815.805796 737.400586c17.564028 0 32.072463 14.541181 32.072463 32.038694 0 17.920138-14.508435 32.03767-32.072463 32.03767-17.958 0-32.04074-14.117532-32.04074-32.03767C783.765055 751.941767 797.847795 737.400586 815.805796 737.400586L815.805796 737.400586zM720.934055 737.400586c17.993816 0 32.074509 14.541181 32.074509 32.038694 0 17.920138-14.080693 32.03767-32.074509 32.03767-17.458627 0-32.036647-14.117532-32.036647-32.03767C688.897408 751.941767 703.475428 737.400586 720.934055 737.400586L720.934055 737.400586zM626.525871 737.400586c17.530258 0 32.074509 14.541181 32.074509 32.038694 0 17.920138-14.544251 32.03767-32.074509 32.03767-17.920138 0-32.036647-14.117532-32.036647-32.03767C594.489224 751.941767 608.605733 737.400586 626.525871 737.400586L626.525871 737.400586zM531.694039 737.400586c17.922185 0 32.038694 14.541181 32.038694 32.038694 0 17.920138-14.116509 32.03767-32.038694 32.03767-17.531282 0-32.038694-14.117532-32.038694-32.03767C499.655346 751.941767 514.162758 737.400586 531.694039 737.400586L531.694039 737.400586z',
        nongye: 'path://M225.792 1024h-2.56c-17.408-1.536-30.72-16.384-29.696-34.304 0.512-4.096 8.192-107.008 65.024-249.344 52.224-130.56 157.696-321.024 362.496-485.376 13.824-11.264 33.792-8.704 45.056 5.12 11.264 13.824 8.704 33.792-5.12 45.056-371.2 297.472-403.456 685.568-403.968 689.152-0.512 16.896-14.848 29.696-31.232 29.696zM688.128 318.976c-30.72 0-56.832-9.728-72.704-32.256-11.776-16.896-25.6-53.76 12.288-114.176 23.04-36.864 60.928-74.24 105.984-105.472C778.752 35.84 827.392 13.312 869.376 4.608c69.632-14.848 99.84 11.264 111.104 28.16 42.496 60.928-27.648 156.672-118.272 219.648-56.32 39.424-122.368 66.56-174.08 66.56z m219.648-254.976c-6.656 0-14.848 1.024-25.088 3.072-33.792 7.168-74.752 26.112-112.64 52.736-37.888 26.112-70.144 57.856-88.064 87.04-15.872 25.088-16.384 39.936-13.824 43.52 7.168 10.24 72.704 8.704 158.208-50.688s109.568-120.32 102.4-130.56c-2.048-2.56-8.192-5.12-20.992-5.12zM697.856 610.816c-19.968 0-40.448-1.536-60.928-4.096-54.784-7.168-105.472-23.552-142.336-45.568-61.44-36.352-66.048-75.776-63.488-95.744 2.56-20.48 17.408-56.832 86.016-75.776 41.984-11.264 94.72-13.824 149.504-6.656 109.568 14.336 215.552 67.584 205.824 141.312-7.68 59.904-86.016 86.528-174.592 86.528z m-92.16-167.936c-26.624 0-51.2 3.072-71.168 8.192-28.672 7.68-38.912 18.944-39.424 22.528-0.512 4.096 6.656 16.896 32.256 32.256 29.696 17.408 72.704 31.232 118.272 36.864 103.424 13.824 161.792-14.848 163.84-27.648 1.536-12.288-47.616-55.808-151.04-69.12-17.92-2.048-35.84-3.072-52.736-3.072z m235.52 77.312zM580.608 880.128c-31.744 0-65.024-4.096-97.792-11.776-53.76-12.288-102.4-33.28-137.728-58.368-57.856-41.984-58.368-81.408-53.76-101.376 4.608-19.968 22.528-55.296 92.672-67.584 42.496-7.68 95.744-5.12 149.504 7.68 108.032 24.576 208.384 87.552 191.488 159.744-11.264 50.688-72.192 71.68-144.384 71.68z m-145.408-179.2c-14.336 0-28.16 1.024-39.936 3.072-29.184 5.12-40.96 14.848-41.472 18.944-1.024 4.096 5.12 17.408 29.184 35.328 27.648 19.968 69.632 37.888 114.176 48.128 101.376 23.552 162.816 0 165.376-11.776 2.56-12.288-41.984-59.904-143.36-82.944-28.672-7.168-57.856-10.752-83.968-10.752z m258.56 100.352zM445.952 475.648c-21.504 0-56.832-10.24-87.04-68.096-19.968-38.4-33.28-89.6-37.888-144.896-4.608-54.784 0.512-108.032 14.336-148.992C357.376 46.08 394.752 33.28 415.232 31.744c20.48-1.536 59.392 5.12 92.16 68.096 19.968 38.4 33.28 89.6 37.888 144.896 8.704 110.08-20.992 224.768-94.72 230.912h-4.608z m-25.088-379.904s-0.512 0 0 0c-4.096 0.512-15.36 10.24-25.088 38.4-10.752 32.768-14.848 77.824-11.264 123.392 3.584 46.08 14.848 89.6 30.72 120.32 13.824 26.624 26.624 34.304 30.72 33.792 12.288-1.024 44.544-58.368 35.84-161.792-3.584-46.08-14.848-89.6-30.72-120.32-13.824-26.112-26.112-33.792-30.208-33.792zM298.496 687.616c-55.808 0-127.488-48.64-181.76-111.104-36.352-41.472-63.488-87.04-76.8-128-22.016-67.584 0.512-100.352 15.872-113.664 55.808-48.64 158.72 10.24 231.424 93.696C359.936 512 404.48 622.08 348.672 670.72c-14.848 11.264-31.744 16.896-50.176 16.896z m28.672-41.984zM104.96 380.416c-3.584 0-6.144 0.512-7.68 2.048-3.072 2.56-6.144 17.408 3.072 45.568 10.752 32.768 34.304 71.168 64.512 105.984 68.608 78.336 131.584 95.744 140.8 87.552 9.216-8.192 1.024-73.216-67.584-151.552-57.856-67.072-112.64-89.6-133.12-89.6z',
        dianchang: 'path://M921.2 495.4l-320-137.1c-8.4-3.6-16.9-5.2-25.2-5.2V96c0-18.5-15.2-32-32-32-4.7 0-9.6 1.1-14.3 3.4L99.4 302.3c-21.7 10.8-35.4 33-35.4 57.2V896c0 35.3 28.7 64 64 64h768c35.3 0 64-28.7 64-64V554.2c0-25.6-15.3-48.7-38.8-58.8zM352 896v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v96H128V359.6L512 150v746H352z m544 0H768v-32c0-17.7-14.3-32-32-32s-32 14.3-32 32v32H576l0.2-478.9L896 554.2V896z" p-id="937">
    $(function() {
    var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    // Generate data
    var category = [];
    var dottedBase = +new Date();
    dottedBase-=3600 * 24 * 1000*20;
    var lineData = [];
    var barData = [];

    for (var i = 0; i < 20; i++) {
        var date = new Date(dottedBase += 3600 * 24 * 1000);
        category.push([
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
        ].join('-'));
        var b = vm.msgCnt[i].msg;
        var d = vm.msgCnt[i].alm;
        barData.push(b)
        lineData.push(d + b);
    }


    // option
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['处理数', '报警数'],
            textStyle: {
                color: '#ccc'
            }
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            splitLine: {show: false},
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [{
            name: 'line',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 15,
            data: lineData
        }, {
            name: '报警数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#14c8d4'},
                            {offset: 1, color: '#43eec6'}
                        ]
                    )
                }
            },
            data: barData
        }, {
            name: '处理数',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: 'rgba(20,200,212,0.5)'},
                            {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                            {offset: 1, color: 'rgba(20,200,212,0)'}
                        ]
                    )
                }
            },
            z: -12,
            data: lineData
        }, {
            name: 'dotted',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: '#0f375f'
                }
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: lineData
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
})

var chart6ElementId = 'container4';
var chart6jsonFileName = 'json/chart_6.json';

console.log("async_data", chart6ElementId, chart6jsonFileName)

function async_chart_6() {

    // 异步加载数据
    $.getJSON(chart6jsonFileName).done(function (data) {
        var chartElement = document.getElementById(chart6ElementId);

        var myChart = echarts.init(chartElement);
        console.log(data);
        myChart.setOption({
            series: [{
                data: data["alm"]
            },{
                data: data["msg"]
            }, {
                data: data["alm"]
            }, {
                data: data["alm"]
            }]
        });
    });//end $.getJSON
}

     

  3. 后端python代码 
    import _thread
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from pyecharts import Geo
from PyQt5.QtCore import QUrl
from win32api import GetSystemMetrics
from PyQt5 import QtGui
from httpserver import *
from asyncJson import *

class MainWindow(QMainWindow):
  def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.loadfinished = False
    self.setWindowTitle('大屏展示')
    self.showMaximized()
    #全屏显示
    self.showFullScreen()
    self.isFullScreen = True

    self.webview = WebEngineView()
    self.webview.load(QUrl(index_url))
    self.setCentralWidget(self.webview)

    QShortcut(QtGui.QKeySequence("Escape"), self, self.Esc)
    self.webview.loadFinished.connect(self.SetLoadFinished)

    _thread.start_new_thread(HttpServer, ())
    _thread.start_new_thread(self.ChangeData, ())

  def SetLoadFinished(self):
      self.loadfinished = True

  #模拟刷新数据
  def ChangeData(self):
      while 1:
          time.sleep(3)
          #页面加载完毕再开始刷新数据
          if self.loadfinished == False :
              continue
          change_all_json()

          # change_chart_map()
          try:
             self.webview.page().runJavaScript("async_data()")
          except Exception as e:
              print(e)



  #按ESC全屏或缩小
  def Esc(self):
      if self.isFullScreen == True :
          self.isFullScreen = False
          #不加这句的话，标题栏就看不到了
          self.showNormal()
          #设置固定宽高
          self.setGeometry(GetSystemMetrics(0)/2, GetSystemMetrics(1)/2, 1280, 768)
          #再移动到屏幕中央
          screen = QDesktopWidget().screenGeometry()
          size = self.geometry()
          self.move((screen.width() - size.width()) / 2, (screen.height() - size.height()) / 2)
      else:
          self.showFullScreen()
          self.isFullScreen = True


class WebEngineView(QWebEngineView):
  windowList = []

  # 重写createwindow()
  def createWindow(self, QWebEnginePage_WebWindowType):
    new_webview =  WebEngineView()
    new_window = MainWindow()
    new_window.setCentralWidget(new_webview)
    #new_window.show()
    self.windowList.append(new_window) #注：没有这句会崩溃！！！
    return new_webview


if __name__ == "__main__":
  app = QApplication(sys.argv)
  w = MainWindow()
  w.show()
  sys.exit(app.exec_())
    # -*- coding:utf-8 -*-

import io
import os
import shutil
import sys
import urllib
import json
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer

ip = "localhost"   # 监听IP，配置项
port = 8813       # 监听端口，配置项
index_url = "http://%s:%d/index.html" %(ip, port)  # 监听主页url，配置项

# C:\Users\zll\AppData\Local\python  缓存目录，shit

class MyRequestHandler(SimpleHTTPRequestHandler):
    protocol_version = "HTTP/1.0"
    server_version = "PSHS/0.1"
    sys_version = "Python/3.7.x"
    target = "./"  # 监听目录，配置项

    def do_GET(self):
        if self.path.find("/json/") > 0:
            print(self.path)
            req = {"success": "true"}
            self.send_response(200)
            self.send_header("Content-type", "json")
            self.end_headers()
            with open(self.path, 'r', encoding="utf-8") as f:
                data = json.load(f)
                rspstr = json.dumps(data)
                self.wfile.write(rspstr.encode("utf-8"))

        else:
            SimpleHTTPRequestHandler.do_GET(self);

    def do_POST(self):
        if self.path == "/signin":
            print("postmsg recv, path right")
        else:
            print("postmsg recv, path error")
            data = self.rfile.read(int(self.headers["content-length"]))
            data = json.loads(data)
            self.send_response(200)
            self.send_header("Content-type", "text/html")
            self.end_headers()
            rspstr = "recv ok, data = "
            rspstr += json.dumps(data, ensure_ascii=False)
            self.wfile.write(rspstr.encode("utf-8"))

def del_dir(filepath):
    """
    删除某一目录下的所有文件或文件夹
    :param filepath: 路径
    :return:
    """
    del_list = os.listdir(filepath)
    for f in del_list:
        file_path = os.path.join(filepath, f)
        if os.path.isfile(file_path):
            os.remove(file_path)
        elif os.path.isdir(file_path):
            shutil.rmtree(file_path)

def HttpServer():
    try:
        cache = "C:/Users/zll/AppData/Local/python/cache"
        del_dir(cache)
        server = HTTPServer((ip, port), MyRequestHandler)
        listen = "http://%s:%d" %(ip, port)
        print("服务器监听地址： ", listen)
        server.serve_forever()
    except KeyboardInterrupt:
        server.socket.close()

四、上线运行

 

基于 Echarts + Python 实现的动态实时可视化数据大屏展示范例三_第4张图片

本次分享结束，欢迎讨论！QQ微信同号： 6550523

感谢：本项目引用了互联网大牛的前端代码，然后定制开发实现了后端服务器，最终实现了可视化大屏的完整方案。

 

 

你可能感兴趣的:(数据可视化,-,大屏电子看板,echarts教程)

  • 银河麒麟V10ServerSP3中Redis7源码编译与安装详细教程 小猿搬码 RedisRedis7KylinV10银河麒麟国产操作系统
    银河麒麟V10ServerSP3中Redis7源码编译与安装详细教程文章目录银河麒麟V10ServerSP3中Redis7源码编译与安装详细教程1.下载2.安装过程1.解压2.编译源码3.测试编译结果（可选）4.安装Redis5.安装位置6.复制配置文件7.修改redis.conf文件8.启动Redis服务9.客户端测试10.设置开机自启动3.开启远程访问1.编辑redis.conf2.开启防火墙
  • 使用Lodash工具后代码行数瞬间缩短... lodasharraylist
    背景:最近在做报表.涉及到echarts图表.多层柱状图叠加展示.然后后端给出来的结构是二维数组.需要前端自行处理成图表可用的数据格式.echarts数据是是动态的.需求效果图的样子:echarts相似的官网案例代码:option={tooltip:{trigger:'axis',},legend:{data:['Direct','MailAd','AffiliateAd','VideoAd','
  • QT系列教程(19) Qt MVC结构之QItemDelegate介绍 恋恋风辰 C++QTqtmvc开发语言
    QItemDelegate当我们想重新实现一个代理时，可以子类化QItemDelegate。实现item编辑时特定的效果，比如在item编辑时我们设置一个QSpinBox返回。创建一个QApplication项目，然后我们新增一个类，类名叫做spinboxdelegate。classSpinBoxDelegate:publicQItemDelegate{Q_OBJECTpublic:explici
  • SpringBoot使用@Slf4j注解实现日志输出 pan_junbiao SpringBoot我の原创springbootjavaspring
    日志框架的使用，系列文章：《SpringBoot使用Logback日志框架与综合实例》《SpringBoot使用@Slf4j注解实现日志输出》《Log4j2日志记录框架的使用教程与简单实例》《SpringBoot使用AspectJ实现AOP记录接口：请求日志、响应日志、异常日志》《SpringBoot使用AspectJ的@Around注解实现AOP全局记录接口：请求日志、响应日志、异常日志》@Sl
  • C#实现AES-CBC加密工具类（含完整源码及使用教程） WangMing_X C#实现各种功能工具集c#AES-CBC加密
    一、AES-CBC加密应用场景AES（AdvancedEncryptionStandard）作为全球公认的安全加密标准，广泛使用在以下场景：API通信加密：保护HTTP接口传输的敏感数据（如身份令牌、支付信息）文件安全存储：加密本地配置文件、数据库连接字符串等用户隐私保护：加密存储密码、身份证号等PII（个人身份信息）跨平台数据交换：与Java/Python等其他语言实现的加密系统互通物联网设备通
  • 大模型生成人物关系思维导图的实战教程 herosunly 大模型生成人物关系生成思维导图实战教程
      大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法行业就业。希望和大家一起成长进步。  本文主要介绍了大模型生成人物关系思维导图的实战教程，希望对使用大语言模型的同学们有所帮
  • PHP语言有哪些优势和特点？ CRMEB-嘉嘉 php开发语言
    PHP是一种备受欢迎的开源脚本语言，特别适用于Web开发。它的多重优势和特点使其在开发者中广受欢迎。首先，PHP以其简单易学的特性而著称。其语法结构清晰明了，类似于C语言，使得初学者能够迅速上手。此外，PHP拥有详尽的文档和教程资源，为开发者提供了便捷的学习途径。其次，PHP在开发效率方面表现出色。它提供了丰富的内置函数和库，使开发者能够轻松完成常见的任务，如表单处理、文件操作等。同时，PHP支持
  • [免费送Claude账号密码]ChatGPT的平替——Claude赠送2个免费Claude账号密码卡密！（内附Claude注册教程） NBA首席形象大使阿坤 日常小功能实现人工智能chatgptclaudegpt-3
    一、账号说明1.账号格式：登录邮箱—密码—验证邮箱2.登录方式：访问Claude官网，选择登录，输入登录邮箱、密码不多叭叭，上账号！账号1：登录邮箱:[email protected]—登录密码:c934dfqcwuz8g—验证邮箱:[email protected]账号2：登录邮箱:[email protected]—登录密码:jx68
  • 【笔记】Helm-1 介绍 许科大 Helm云原生kubernetesk8s
    欢迎欢迎使用Helm文档。Helm是Kubernetes的包管理器，您也可以在CNCFHelm项目过程报告阅读详细的背景信息。HelmHelmProjectJourneyReport|CNCF文档构成Helm有大量的文档。高级组织概述会让您知道在哪里查找特定内容。1、教程如果您是新手，从这里开始，手把手带您通过一系列的步骤创建您的第一个Helmchart。Helm|Docs2、主题引导以相当高的水
  • MATLAB 操作指南（结尾附实操案例） vvvae1234 信息可视化
    一、MATLAB简介MATLAB（矩阵实验室）是一个高级技术计算语言和交互环境，它主要用于数值计算、数据分析、算法开发和可视化。MATLAB的核心功能是矩阵运算，它能够处理向量和矩阵为中心的数学问题，方便用户进行算法的开发和数据可视化。主要特点高效的数值计算：MATLAB内置了许多用于数学和工程计算的函数，用户可以轻松地进行数值运算。可视化功能：MATLAB提供了丰富的工具，用于生成各种类型的图形
  • VSCode SSHFS 扩展使用教程 史跃骏Erika
    VSCodeSSHFS扩展使用教程vscode-sshfsExtensionforVisualStudioCode:FilesystemproviderusingSSH项目地址:https://gitcode.com/gh_mirrors/vs/vscode-sshfs1.项目介绍VSCodeSSHFS是一个用于VisualStudioCode的扩展，允许用户通过SSH协议将远程文件系统挂载为本地
  • Deepseek:物理神经网络PINN入门教程 天一生水water 神经网络人工智能深度学习
    一、物理信息网络（PINN）的概念与原理1.定义与来源物理信息网络（Physics-InformedNeuralNetworks,PINN）是一种将物理定律（如偏微分方程、守恒定律等）嵌入神经网络训练过程的深度学习方法。其核心思想是通过神经网络同时拟合观测数据并满足物理约束，从而解决传统数值方法难以处理的高维、噪声数据或复杂边界条件问题。来源：PINN起源于对传统数值方法局限性的改进需求（如网格生
  • echarts实现3d饼图 qq_45600165 echarts前端javascript
    import*asechartsfrom'echarts'import'echarts-gl'//import{ref}from'vue';import{onMounted,onUnmounted,toRefs,ref,reactive,watch}from'vue'exportdefault{props:{//定义prop的名称和类型data:Object},setup(props){letst
  • 该如何升级Tableau server呢？
    在现代数据分析的世界中，Tableau作为一个强大的企业级数据可视化工具，受到众多公司喜爱。但是由于Tableau退出中国市场，如果仍在使用Tableau的企业，一定要做好TableauServer升级。随着技术的不断更新，升级TableauServer变得越来越重要，以确保您能够利用最新的功能和安全性。在这篇文章中，我们将详细探讨如何进行TableauServer升级，步骤、注意事项以及最佳实践
  • 【Python安装】2024年最新下载安装教程！详细步骤，有这一篇就够了！！！ 「已注销」 python开发语言
    （点击领取Python安装包+学习资料）Python安装说明1.访问Python官网首先，访问Python的官方网站：WelcometoPython.org。2.下载Python安装程序在官网首页，找到“Downloads”部分。根据你的操作系统（Windows,macOS,Linux等）选择合适的版本下载。对于大多数用户，推荐下载最新版本的Python3.x（例如Python3.9或更高版本）。
  • 【QT教程】QT6硬件数据库编程 QT硬件数据库 QT性能优化QT原理源码QT界面美化 qtqt6.3qt5c++QT教程
    QT6硬件数据库编程使用AI技术辅助生成QT界面美化视频课程QT性能优化视频课程QT原理与源码分析视频课程QTQMLC++扩展开发视频课程免费QT视频课程您可以看免费1000+个QT技术视频免费QT视频课程QT统计图和QT数据可视化视频免费看免费QT视频课程QT性能优化视频免费看免费QT视频课程QT界面美化视频免费看1QT6硬件数据库编程基础1.1QT6数据库引擎概述1.1.1QT6数据库引擎概述
  • Python爬虫教程：如何通过接口批量下载视频封面（FFmpeg技术实现） Python爬虫项目 python爬虫开发语言数据库数据分析scrapyselenium
    引言随着在线视频平台的蓬勃发展，视频封面作为视频内容的预览图，一直以来都是观众对视频的第一印象。在爬取视频资源时，很多开发者和研究者往往只关注视频本身，而忽略了视频封面。实际上，视频封面不仅能提供重要的信息（例如视频标题、主题或情感等），而且它们也能作为数据集中的重要属性，用于视频分类、推荐系统等应用。在这篇博客中，我们将深入探讨如何使用Python通过接口批量下载视频封面，利用FFmpeg等技术
  • SQLMesh 系列教程：解锁SQLMesh的宏与变量魔法 梦想画家 #python数据分析工程sqlmesh数据工程分析工程
    在数据库流水线开发中，代码复用与动态配置是提升效率的核心诉求。SQLMesh以其独特的宏系统与用户定义变量机制，重新定义了SQL生成的灵活性。与传统模板引擎不同，SQLMesh的宏并非简单的字符串替换，而是基于语义理解的智能代码重构——通过sqlglot库解析SQL结构，结合Python逻辑处理能力，让用户能够以声明式语法实现复杂查询的动态组装。引言无论是全局配置、网关级参数还是模型内局部变量，S
  • （十一） 人工智能 - Python 教程 - Python元组 星星学霸 人工智能-Python系列教程python搜索引擎开发语言
    更多系列教程，每天更新更多教程关注：xxxueba.com星星学霸1元组（Tuple）元组是有序且不可更改的集合。在Python中，元组是用圆括号编写的。实例创建元组：thistuple=("apple","banana","cherry")print(thistuple)("apple","banana","cherry")2访问元组元素可以通过引用方括号内的索引号来访问元组元素：实例打印元组中
  • pinia使用教程以及pinia-plugin-persistedstate持久化插件——uniapp 十五春会 uni-app前端javascript
    piniastore定义optionimport{defineStore}from'pinia'//你可以任意命名`defineStore()`的返回值，但最好使用store的名字，同时以`use`开头且以`Store`结尾。//(比如`useUserStore`，`useCartStore`，`useProductStore`)//第一个参数是你的应用中Store的唯一ID。//第二个参数可接受
  • 【vLLM 学习】使用 TPU 安装 HyperAI超神经 vLLM学习人工智能vLLM深度学习TPU机器学习教程
    vLLM是一款专为大语言模型推理加速而设计的框架，实现了KV缓存内存几乎零浪费，解决了内存管理瓶颈问题。更多vLLM中文文档及教程可访问→https://vllm.hyper.ai/vLLM使用PyTorchXLA支持GoogleCloudTPU。依赖环境GoogleCloudTPUVM（单主机和多主机）TPU版本:v5e、v5p、v4Python:3.10安装选项：href=“https://v
  • DeepSeek R1 本地部署实战教程来了，带可视化界面，非常详细！ java
    大家好，我是R哥。虽然DeepSeek官方提供了可视化聊天界面，但稳定性实在太差了，动不动就服务繁忙，根本没办法正常使用。另外，对于一些对数据隐私、实时性能要求较高的场景，本地部署也是不可避免的选择。那么，如何本地部署DeepSeekR1的模型？本篇，开干！相关阅读：DeepSeek-R1本地部署配置清单DeepSeek-R11.5b、7b、8b、14b、32b、70b、671b都是什么鬼？如何部
  • Unity 封装一个依赖于MonoBehaviour的计时器(上) 基本功能 咩咩-哈基米版 Unity案例实战全解析Unity框架学习unity游戏引擎c#
    灵感来自下面这本书的协程部分,因此我就自己尝试写了一个我的新书Unity3D游戏开发（第3版）|雨松MOMO程序研究院如果你不知道什么是协程:unity保姆级教程之协同程序_unity协同-CSDN博客一句话概括:协程就是单线程的异步操作,其作用于Unity的主线程1.我写了如下几个功能(只展示无参数):基础校验privateboolCheckCount(intcount){if(countcal
  • FastAPI 使用教程：将函数改造成可调用的 API（附完整示例） Lunar* 开发与工具使用fastapi
    引言FastAPI是一个现代化、快速（高性能）、基于标准Python类型提示构建的Web框架，非常适合开发RESTfulAPI。如果你有现成的Python函数，并希望通过HTTP请求调用它，FastAPI可以帮助你快速实现。在本文中，我们将介绍如何使用FastAPI将已有函数改造成API，并通过GET和POST请求调用它。同时，我们还会展示如何在服务运行时，自定义主机地址、端口号以及启用SSL证书
  • 【Python】使用Python连接ClickHouse进行批量数据写入 音乐学家方大刚 ClickhousePythonpythonclickhouseoracle
    有许多时候眼泪就要流那扇窗是让我坚强的理由小小的门口还有她的温柔给我温暖陪伴我左右曾经的乡音悄悄地隐藏说不出的诺言一直放心上李健《异乡人》在本教程中，我们将探讨如何使用Python连接到ClickHouse数据库，并执行批量数据写入操作。ClickHouse是一个用于在线分析处理查询（OLAP）的列式数据库管理系统，它能够以极高的速度进行数据查询和更新操作。环境准备首先，确保你的环境中已安装Cli
  • 超详细Python教程——SQL详解之DDL 月流霜 pythonsql数据库
    SQL详解之DDL我们通常可以将SQL分为四类，分别是DDL（数据定义语言）、DML（数据操作语言）、DCL（数据控制语言）和TCL（事务控制语言）。DDL主要用于创建、删除、修改数据库中的对象，比如创建、删除和修改二维表，核心的关键字包括create、drop和alter；DML主要负责数据的插入、删除、更新和查询，关键词包括insert、delete、update和select；DCL用于授予
  • 深度学习模块缝合教程：从理论到实践 RockLiu@805 深度学习模块机器视觉深度学习人工智能
    深度学习模块缝合教程：从理论到实践引言随着深度学习的不断发展，模型的设计与优化成为研究者关注的核心问题之一。如何有效地“缝合”不同模块，以实现更高效的计算和更强大的功能，是当前深度学习研究中的一个重要课题。在本文中，我们将从基础概念出发，详细探讨深度学习模块缝合的方法、技巧及其应用场景。无论是理论深厚的研究者还是实验导向的实践者，都可以从中获得启发。一、深度学习基础知识详解深度学习是人工智能领域的
  • FMOD：声音设计与FMODStudio集成教程_2024-07-16_15-13-23.Tex chenjj4003 游戏开发网络ffmpegvr系统架构microsoft音视频运维
    FMOD：声音设计与FMODStudio集成教程声音设计基础声音文件格式与类型在声音设计领域，理解声音文件的格式与类型至关重要。不同的格式适用于不同的场景，了解它们的特性可以帮助你更有效地管理和使用音频资源。常见声音文件格式WAV(WaveformAudioFileFormat)WAV是最常见的无损音频格式，由Microsoft和IBM共同开发。它保留了原始音频的所有数据，因此文件大小较大，但音质
  • 数据处理与图形绘制的多领域应用案例，学会了你也是高手！ A达峰绮 经验分享数据处理图形绘制经典案例
    一、引言在当今数字化时代，数据处理与图形绘制已成为各领域不可或缺的技术手段。从科学研究到商业分析，从工程设计到日常决策，海量的数据需要高效处理，而直观清晰的图形则能帮助人们迅速理解数据背后的信息。本教程将通过多个具体应用案例，涵盖多种编程语言，深入讲解数据处理与图形绘制的实践方法，助力学习者解决学习过程中的难题，提升相关技能。二、Python在数据处理与图形绘制中的应用（一）金融数据分析案例数据获
  • 30岁了，零基础想转行网安从头开始现实吗？ 白帽子凯哥哥 tcp/ip安全web安全学习网络
    这篇文章没有什么套路。就是一套自学理论和方向，具体的需要配合网络黑白去学习。毕竟是有网络才会有黑白！有自学也有培训！1.打死也不要相信什么分分钟钟教你成为大黑阔的，各种包教包会的教程,就算打不死也不要去购买那些所谓的盗号软件之类的东西。2，我之前让你们在没有目的的时候学习linux,在学习LINUX的同时你第一个遇到的问题就是命令。作为一个黑客入门着来说你必须要懂什么是命令化系统,什么是图形化系统
  • 开发者关心的那些事 圣子足道 ios游戏编程apple支付
    我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
  • 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
            对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
  • LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
    原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
  • 画图板的基本实现 15700786134 画图板
     要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
  • linux的ps命令 被触发 linux
    Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
  • Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
    最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
  • java导出txt文件的例子 知了ing javaservlet
    代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
  • Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
    原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
  • phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
    1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
  • JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
    在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
  • Spring基础实例（依赖注入和控制反转） bijian1013 spring
    前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
  • HR看重的十大技能 bijian1013 提升能力HR成长
        一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
  • 【Thrift一】Thrift编译安装 bit1129 thrift
    什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
  • 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
    Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
  • nginx定制500，502，503，504页面 ronin47 nginx　错误显示
    server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
  • java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
    import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
  • Netty源码学习-HTTP-tunnel bylijinnan javanetty
    Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
  • JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
     JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
  • Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
    一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
  • CentOs6 dalan_123 centos
    首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
  • 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
      无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
  • ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
    在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
  • JSP之c:foreach eksliang jspforearch
    原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
  • Android实现主动连接蓝牙耳机 gqdy365 android
    在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
  • android学习轨迹之四：org.json.JSONException: No value for hyz301 json
    org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
  • 干货分享：从零开始学编程 系列汇总 justjavac 编程
    程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
  • jquery-autocomplete 使用手册 macroli jqueryAjax脚本
    jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
  • PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
    　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
  • 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
    在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
  • 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他