動態柱狀圖以及點擊事件效果圖:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>FixtureView</title>
<link href="/Scripts/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/themes/metro-gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/locale/easyui-lang-zh_TW.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr style="float: left;">
<td>選擇看板類型
</td>
<td>
<select id="type" onchange="test()">
<option>選擇看板類型</option>
<option>治工具異常狀況統計圖</option>
<option>治工具呆滯狀況統計圖</option>
<option>治工具上線狀況統計圖</option>
<option>治工具保養狀況統計圖</option>
<option>新治工具驗收入庫狀況統計圖</option>
</select>
</td>
</tr>
<tr id="trList2" style="display: none; float: left;">
<td>請選擇BU
</td>
<td>
<select id="selBU" onchange="test1()">
</select>
</td>
</tr>
</table>
<div id="show" style="height: 400px">
</div>
<table class="easyui-datagrid" id="showData" data-options=" height:300,singleSelect: true,fitColumns:true,rownumbers:true,pagination:true, loadFilter: pagerFilter,pageSize: 20 ">
</table>
<script src="/Scripts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
// 禁用只讀文本框中的退格鍵,防止按退格鍵時回退到上一個頁面;
document.documentElement.onkeydown = function (evt) {
var b = !!evt, oEvent = evt || window.event;
if (oEvent.keyCode == 8) {
var node = b ? oEvent.target : oEvent.srcElement;
var reg = /^(input|textarea)$/i, regType = /^(text|textarea)$/i;
if (!reg.test(node.nodeName) || !regType.test(node.type) || node.readOnly || node.disabled) {
if (b) {
oEvent.stopPropagation();
}
else {
oEvent.cancelBubble = true;
oEvent.keyCode = 0;
oEvent.returnValue = false;
}
}
}
}
var data = [];
var strLabel = [];
var strLabels = [];
var strname = [];
var strvalue = [];
var strvalues = [];
var series = [];
var objList = {};
var strType = "";
var strBu = "";
$(function () {
test();
});
function initMenu() {
if (strType) {
if (strType == "治工具異常狀況統計圖") {
objList.Paramms1 = "DEFECTCOUNT";
}