EasyUI图表插件 Highcharts 饼形，折线，柱形图-CSDN博客

本文链接：https://blog.csdn.net/xinjiatao/article/details/84712205
<body>
	<div class="easyui-tabs" style="width: auto; height: 470px">
		<div title="Tab01" style="padding: 10px">
			<div id="container"></div>
		</div>
		<div title="Tab02" style="padding: 10px">
			<h2>Row Editing in DataGrid</h2>
			<p>Click the row to start editing.</p>
			<div style="margin: 20px 0;"></div>

			<table id="dg" class="easyui-datagrid"
				title="Row Editing in DataGrid" style="width: 700px; height: auto"
				data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				url: $.sxThx.contextPath + '/UserAction.do?method=getEmailInfoList',
				method: 'get',
				onClickRow: onClickRow
			">
				<thead>
					<tr>
						<th data-options="field:'keyid',width:80">Item ID</th>
						<%-- <th
							data-options="field:'productid',width:100,
						formatter:function(value,row){
							return row.productname;
						},
						editor:{
							type:'combobox',
							options:{
								valueField:'productid',
								textField:'productname',
								method:'get',
								url:'products.json',
								required:true
							}
						}">Product</th>--%>
						<th
							data-options="field:'email_mail',width:80,align:'right',editor:'validatebox'">List
							Price</th>
						<th
							data-options="field:'email_tel',width:80,align:'right',editor:{type:'numberbox'}">Unit
							Cost</th>
						<th data-options="field:'email_user_name',width:250,editor:'validatebox'">Attribute</th>
						<%--<th
							data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>--%>
					</tr>
				</thead>
			</table>

			<div id="tb" style="height: auto">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-add',plain:true" οnclick="append()">Append</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-remove',plain:true"
					οnclick="removeit()">Remove</a> <a href="javascript:void(0)"
					class="easyui-linkbutton"
					data-options="iconCls:'icon-save',plain:true" οnclick="accept()">Accept</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-undo',plain:true" οnclick="reject()">Reject</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-search',plain:true"
					οnclick="getChanges()">GetChanges</a>
			</div>
		</div>
		<div title="Tab03" style="padding: 10px">
			<div>
    			<label for="keyword">year:</label>
    			<select id="year" class="easyui-combobox" name="dept" style="width:100px;">   
   					 <option value="2013">2013</option>   
   					 <option value="2014">2014</option>   
    	 			 <option value="2015">2015</option>   
    				 <option value="2016">2016</option>   
   					 <option value="2017">2017</option>   
				</select>
    			<a href="javascript:void(0);"οnclick="statisticByYear();"class="button button-rounded button-flat-primary">
    			<i class="test-icon-search icon-padding-right5"></i>query</a><br>
    		</div>
    		<div id="highchartsLine" >
    		</div>
		</div>
		<div title="Tab04" style="padding: 10px">
			<div>
	    	    <label for="keyword">year:</label>
			 	<select id="years" class="easyui-combobox" nam