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

1、引入echarts

2、html（上图下表）

<div id="dgBox">
    			<div class="chartBox">
				<div class="allbox" id="dataBar"></div>
			</div>
			<div class="tablebox">
				<div id="dg"></div>
			</div>
		</div>

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_,
			  	});

var echartsArr=[];//储存echarts，用于刷新
var myChart;
function fillEcharts(obj){
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
    }
	myChart = echarts.init(document.getElementById(obj.id));
	var option = {
		color:["#51bffd","#8eec7f","#d78e51","#c92840","#50bfff","#f7ba2a","#7B68EE","#13ce66","#8B4513","#8492a6","#fc8675","#008080","#0000FF","#FFFF00","#FF0000","#FFEFD5","#F08080"],
		title: {
            text:obj.title+'曲线图',
            left:'center',
            top:24,
            itemGap:16,   //主副标题之间的间距
            textStyle:{
                color:'#666',
                /*fontStyle:'normal',
                fontWeight:'bold',*/
                //字体大小
        　　　　		fontSize:20
            },
            subtext:obj.mintitle,
		    subtextStyle:{
		        color:'#9f999f',
		        fontWeight:'bold',
		　　　　       fontSize:12
		    }
        },
        subtext: {
        	text:'纯属虚构',
        },
	    tooltip: {
	        trigger: 'axis',
	        /*formatter:function(params, ticket, callback){
	        	console.log(params);
	        	console.log(ticket);
	        }*/
	    },
	    grid: {
	        left: '1%',
	        right: '1%',
	        bottom: '10%',
	        top:116,
	        containLabel: true
	    },
	    dataZoom: [{
	        type: 'inside'
	    }, {
	        type: 'slider'
	    }],
	    legend: {
	        data:obj.legend,
	        left:'center',
	        top:88,
	        icon:'line'  //legend样式rect
	    },
	    xAxis: obj.x,
	    yAxis: obj.yAxis,
	    series: obj.series
	};
	if(echartsArr.indexOf(myChart)==-1){//不存在
		echartsArr.push(myChart);
	}
	myChart.setOption(option,true);
	window.addEventListener("resize",function(){
		$("#thisTab_bottomtable").datagrid("resize",{
			height:$("#thisTab_table").height()+"px"
		});
		resizeScroll({id:".datagrid-view2 .datagrid-body"});
		myChart.resize();
	});
}

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){
		    		
		    	}
			});

效果图：