echart图和easyui图表制作模版制作

缺乏、安全感 2022-03-27 07:18 372阅读 0赞

1、引入echarts

2、html（上图下表）

2、css（上图下表）

#dgBox{position: absolute;top: 28px;bottom: 0;left: 0;right: 0;}
    		.allbox{height:100%;width:100%;overflow:hidden;position:relative;}
    		.tablebox{position:absolute;top:55%;bottom:1px; width:100%;}
    		.chartBox{height:55%; width:100%;}
    		.datagrid-body{overflow:hidden !important;}

3、js

fillEcharts({
    			  		id:"thisTab_echarts2",
    			  		x:_x,
    			  		legend:legend_,
    			  		title:node.text+"不平衡度",
    			  		mintitle:mintitle,
    			  		yAxis:yAxis,
    			  		series:series_,
    			  	});

js2：

//dataBar定义为全局变量
    function fillEcharts(obj){
    			dataBar = echarts.init(document.getElementById("dataBar"));
    			var option = {
    			    tooltip : {
    			        trigger: 'axis',
    			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    			        },
    			        confine:true
    			    },
    			    color:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4"],
    			    legend: {
    			    	type:"scroll",
    			        data:obj.legend,
    			        x:'center'
    			    },
    			    grid: {
    			        left: '3%',
    			        right: '4%',
    			        bottom: '5%',
    			        containLabel: true
    			    },
    			    xAxis : [
    			        {
    			            type : 'category',
    			            data :obj.x
    			        }
    			    ],
    			    yAxis : [
    			        {
    			            type : 'value'
    			        }
    			    ],
    			    series :obj.series
    			};
    			dataBar.setOption(option);
    			new_scroll(".datagrid-view2 .datagrid-body",[dataBar]);
    		}

var series =[],legend=[];
    		    		series.push({
    						data:data.barData,
    						name:nodename,
    						type:"bar",
    					})
    					legend.push(nodename);
    		    		fillEcharts({
    		    			series:series,
    		    			x:data.xAixs,
    		    			legend:legend
    		    		});

二、easyui表格制作

$("#dg").datagrid({
    				url: path+"/meter/water",
    				queryParams:queryParams_,
    				view:emptyView,
    				emptyMsg:"暂无相关数据",
    		        rownumbers:true,//行号
    		        border:false,//边框
    		        singleSelect:true,//单一选择
    		    	pagination:true,
    		    	pageSize:200,
    		    	pageList:[50,100,200,500,1000],
    		    	scrollbarSize:6,
    		    	width:"100%",
    		    	height:"100%",
    		    	columns:ec,
    		    	onLoadSuccess:function(data){
    		    		//excel.fill(columnsData,data.rows);
    		    		$("#down").off("click").on("click",function(){
    		    			window.location.href=path+"/meter/water/download";
    		    		});
    		    		//new_scroll(".datagrid-view2 .datagrid-body",undefined,undefined,undefined,undefined,10);
    		    		var series =[],legend=[];
    		    		series.push({
    						data:data.barData,
    						name:nodename,
    						type:"bar",
    					})
    					legend.push(nodename);
    		    		fillEcharts({
    		    			series:series,
    		    			x:data.xAixs,
    		    			legend:legend
    		    		});
    		    	},
    		    	onResizeColumn:function(field,width){
    		    		
    		    	}
    			});

效果图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220327/8bdbb7dbf17d4887bbd31f1da973f054.png