動態柱狀圖以及點擊事件效果圖：
我要评论
<!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";
}
else if (strType == "治工具呆滯狀況統計圖") {
objList.Paramms1 = "STAYCOUNT";
}
else if (strType == "新治工具驗收入庫狀況統計圖") {
objList.Paramms1 = "STOCKINCOUNT";
}
else if (strType == "治工具上線狀況統計圖") {
objList.Paramms1 = "ONLINECOUNT";
} else if (strType == "治工具保養狀況統計圖") {
objList.Paramms1 = "MAINTAIN_NEW";
}
dataSource();
}
}
//柱狀圖
function test() {
if ($("#type").find("option:selected").text() != "選擇看板類型") {
strType = $("#type").find("option:selected").text();
$('#show').html("");
$('#trList2').hide();
GetBU();
$('#trList2').show();
initMenu();
//清空datagrid的數據
$("#showData").datagrid({
columns: [[]]
//rownumbers: false,
//pagination: false
}).datagrid('loadData', { total: 0, rows: [] });
} else {
$('#show').html("");
$('#trList2').hide();
$('#conditions').find("option[index='0']").attr("selected", true);
}
}
//獲取BU(製造處)
function GetBU() {
objList.Paramms1 = "GET_BU";
GetInfo("GetFixtureBUNewT", "", "selBU");
}
function test1() {
if ($('#selBU').find("option:selected").text() != "選擇看板條件") {
strBu = $("#selBU").find("option:selected").text();
objList.Paramms2 = strBu;
initMenu();
} else {
$('#show').html("");
}
}
function clear() {
strLabel = [];
strLabels = [];
strname = [];
strvalue = [];
strvalues = [];
series = [];
}
//加載選項--加載數據源作為條件（val和text是一樣的）
function GetInfo(controlName, strInputId, strOptionsId) {
$.ajax({
type: "POST",
url: "/TRSTENCIL/" + controlName,
async: false,
datatype: "json", // dataType类型：String 预期服务器返回的数据类型。
data: objList,
success: function (msg) {
if (msg.IsSuccess) {
var json = eval("(" + msg.Message + ")");
var objmfrlist = eval(json.Condition);
$("#" + strOptionsId).empty();
if (strInputId == "" || strInputId == null) {
$("#" + strOptionsId).append("<option value=''></option>");
}
for (var i = 0; i < objmfrlist.length; i++) {
$("#" + strOptionsId).append("<option value='" + objmfrlist[i].ROW + "'>" + objmfrlist[i].ROW + "</option>");
}
$("#" + strOptionsId).find("option[index='0']").attr("selected", true);
}
else {
$.messager.alert('Error', msg.Message, 'error');
}
}
});
}
//加載選項--加載數據源作為條件（val和text是不一樣的）
function GetInfos(controlName, strInputId, strOptionsId) {
$.ajax({
type: "POST",
url: "/TRSTENCIL/" + controlName,
async: false,
datatype: "json", // dataType类型：String 预期服务器返回的数据类型。
data: objList,
success: function (msg) {
if (msg.IsSuccess) {
var json = eval("(" + msg.Message + ")");
var objmfrlist = eval(json.Data);
$("#" + strOptionsId).empty();
$("#" + strOptionsId).append("<option value=''></option>");
for (var i = 0; i < objmfrlist.length; i++) {
$("#" + strOptionsId).append("<option value='" + objmfrlist[i].DATA1 + "'>" + objmfrlist[i].DATA2 + "</option>");
}
$("#" + strOptionsId).find("option[index='0']").attr("selected", true);
}
else {
$("#" + strOptionsId).empty();
$("#" + strOptionsId).append("<option value=''> </option>");
}
}
});
}
//加載數據源-----------------------------------------------
function dataSource() {
$.post('/TRSTENCIL/GetPieNameCount', objList, function (msg) {
// var msg = {
// "Columns": [{
// "name": "BU",
// "value": "100"
// }, {
// "name": "EDIT_TIME",
// "value": "100"
// }, {
// "name": "TIME",
// "value": "100"
// }]
// };
//
msg = eval("(" + msg.Message + ")");
var dataName = [];
$.each(msg, function (i, e) {
dataName.push(i);
});
for (var j = 0; j < dataName.length; j++) {
strname = [];
strvalue = [];
if (j == 0) {
data = eval(msg.Data0);
}
if (j == 1) {
data = eval(msg.Data1);
}
if (j == 2) {
data = eval(msg.Data2);
}
if (j == 3) {
data = eval(msg.Data3);
}
$.each(data, function (ii, e) {
strname.push(data[ii].name);
strvalue.push(data[ii].value);
});
strLabel = strname;
strLabel = $.grep(strLabel, function (value, index) {
return value != 'SMT' && value != 'PTH' && value != '壓合' && value != 'SI' && value != 'PACKING';
});
strname.splice(0, 1);
strvalue.splice(0, 1);
strLabels.push(strLabel);
strvalues.push(strvalue);
strLabel = [];
}
for (var i = 0; i < strLabels.length; i++) {
series.push({
name: strLabels[i], type: 'bar', data: strvalues[i], label: {//柱状图顶部是否显示
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
});
strLabel.push(strLabels[i].toString());
}
showCharts();
clear();
}), 'json'
}
//將數據show出來-----------------------------------------------
function showCharts() {
var myChart = null;
var div = document.getElementById("show");
div.removeAttribute("_echarts_instance_");
myChart = echarts.init(div);
var option = {
title: {
text: $("#type").find("option:selected").text(),
//subtext: $("#type").find("option:selected").text(),
x: "center"
},
tooltip: {
trigger: 'axis'
},
legend: { //圖例組件
//orient: 'vertical',
left: 'left',
//top:'top',
data: strLabel
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
// grid: {
// x: 75,
// y: 45,
// x2: 5,
// y2: 20
// },
grid: {
right: '0',
left: '2%',
top: '15%',
bottom: '10%'
},
xAxis: { //直角座標系中的x軸
type: 'category',
name: '欄位',
data: strname
//data: ['SMT', 'PTH', '壓合', 'SI', 'Pack']
},
yAxis: { //直角座標系中的y軸
// min: 0,
// max: 400,
// interval: 10,
minInterval: 5,//設置最小刻度，保證數據皆是整數
name: '值',
type: 'value'
},
series: series,
color: ['blue', 'green', 'red', 'yellow', 'blueviolet']
//label: {//柱状图顶部是否显示
// show: true,
// position: 'top',
// formatter: '{b}\n{c}'
//}
};
myChart.setOption(option); //參數設置方法
myChart.hideLoading();
getChartData();
function getChartData() {
//獲得圖表的options對象
options = myChart.getOption();
}
//餅圖點擊事件
myChart.on('click', function (params) {
objList.Paramms11 = "TEST";
objList.Paramms3 = params.seriesName;//點擊模塊
objList.Paramms4 = params.name;//製成段
$.post('/TRSTENCIL/FixtureGetPicClickDataNew', objList, function (msg) {
//return "<a href='Show.cshtml' target='_blank' /a>"
//// <a href="Show.cshtml#mid100"></a>
json = eval("(" + msg.Message + ")");
var columnsAll = [];
var ColumnsList = eval(json.Columns);
var data = eval(json.Data);
for (var i = 0; i < ColumnsList.length; i++) {
var col = {};
col['title'] = ColumnsList[i].COLUMN;
col['field'] = ColumnsList[i].COLUMN;
col['editor'] = 'text';
col['align'] = 'center';
columnsAll.push(col);
}
$("#showData").datagrid({
columns: [columnsAll]
}).datagrid('loadData', data);
}), 'json'
});
}
//數據分頁------------------------------------------------------
function pagerFilter(data) {
if (!data) {
return;
}
if (typeof data.length == 'number' && typeof data.splice == 'function') {
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
</script>
</body>
</html>
JSON數據：圖
{"Data0":[{"name":"待驗收","value":"待驗收"},{"name":"SMT","value":"0"},{"name":"PTH","value":"0"},{"name":"壓合","value":"9"},{"name":"SI","value":"39"},{"name":"PACKING","value":"0"}],"Data1":[{"name":"待驗收審核","value":"待驗收審核"},{"name":"SMT","value":"0"},{"name":"PTH","value":"0"},{"name":"壓合","value":"0"},{"name":"SI","value":"0"},{"name":"PACKING","value":"0"}],"Data2":[{"name":"待入庫","value":"待入庫"},{"name":"SMT","value":"3"},{"name":"PTH","value":"1"},{"name":"壓合","value":"0"},{"name":"SI","value":"2"},{"name":"PACKING","value":"0"}]}
注意：Paramms1這是我後台寫的實體類，我是把整個類作為一個參數
public ActionResult aa(QueryCondition query){
return Json(new { IsSuccess = false, Message = "data" });
}
public class QueryCondition
{
//public string Paramms1 { get; set; }
private string paramms1;
public string Paramms1
{
get { return this.paramms1 == null ? "" : this.paramms1; }
set { this.paramms1 = value; }
}
private string paramms2;
public string Paramms2
{
get { return this.paramms2 == null ? "" : this.paramms2; }
set { this.paramms2 = value; }
}
private string paramms3;
public string Paramms3
{
get { return this.paramms3 == null ? "" : this.paramms3; }
set { this.paramms3 = value; }
}
private string paramms4;
public string Paramms4
{
get { return this.paramms4 == null ? "" : this.paramms4; }
set { this.paramms4 = value; }
}
}
本文地址：https://blog.csdn.net/qq_41128526/article/details/85989529
如对本文有疑问， 点击进行留言回复！！
XSS训练网站XSS Challenges所有题目解（中篇）
![[Go] GO语言实战-gin框架项目实现中英文切换](http://www.lhsxpumps.com/_images5/10qianwan/20200728/s_0_202007280956308194.png)
如何给未越狱的ios下载历史版本的app？未越狱IOS系统安装历史版本软件的方法，iPhone未越狱的手机如何安装旧版本APP？
网友评论