The following is a common api method, the return is list
public HttpResponseMessage GetBatchRecordList(string BatchCode)
{
Common.PageResult<BatchRecordInfoModel> pageResult = new PageResult<BatchRecordInfoModel>();
try
{
OrderManager returnManager = new OrderManager();
List<BatchRecordInfoModel> BarCodeList = returnManager.GetBatchRecordList(Convert.ToInt32(BatchCode.Trim()));
if (BarCodeList.Count() > 0)
{
pageResult.status = "200";
pageResult.msg = BatchCode.ToString().Trim();
pageResult.results = BarCodeList;
}
else
{
pageResult.msg = "无数据";
pageResult.status = "201";
}
}
catch (Exception ex)
{
pageResult.msg = ex.Message;
pageResult.status = "404";
}
string listData = Newtonsoft.Json.JsonConvert.SerializeObject(pageResult);
return new HttpResponseMessage {
Content = new StringContent(listData, System.Text.Encoding.UTF8, "application/json") };
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<style>
.chart {
height: 250px;
margin: 0px;
padding: 0px;
}
h5 {
margin-top: 30px;
font-weight: bold;
}
h5:first-child {
margin-top: 15px;
}
</style>
<script src="js/mui.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">工单详情</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>投料进度</h5>
<div class="chart" id="lineChart"></div>
<h5>投料比例</h5>
<div style="height: 16.25rem; " class="chart" id="pieChart"></div>
</div>
</div>
<script></script>
<script src="js/echarts-all.js"></script>
<script>
var times = [];
function recordeAjax(isComplete) {
// alert(isComplete)
var data2 = null;
mui.ajax('' + ip + 'Order/GetBatchRecordList', {
url: '' + ip + 'Order/GetBatchRecordList',
type: 'get',
dataType: 'json',
async: true,
timeout: 8000,
data: {
BatchCode: isComplete
},
success: function(data) {
data2 = data.results;
for (var i = 0; i < data2.length; i++) {
times.push([data2[i].StartTimeStamp, data2[i].WeightRate]);
// alert(times[i])
}
var lineChart = echarts.init(document.getElementById('lineChart'));
var option = {
// legend: {
// data: ['投料量']
// },
grid: {
x: 35,
x2: 20,
y: 30,
y2: 65
},
toolbox: {
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
xAxis: [{
type: 'time',
// interval:6,
splitLine: {
lineStyle: {
color: '#999'
}
},
minorSplitLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interale: 0,
rotate: 45,
textStyle: {
color: "#222"
}
}
}],
yAxis: [{
min: 0,
max: 100,
name: '投料量(%)',
boundaryGap: [0, '0.01'],
interval: 0,
minorTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#999'
}
},
minorSplitLine: {
show: true,
lineStyle: {
color: '#ddd'
}
}
}],
series: [{
name: '投料量',
type: 'line',
showSymbol: false,
clip: true,
data: times
}]
};
lineChart.setOption(option);
lineChart = echarts.init(document.getElementById('pieChart'));
for (var i = 0; i < data2.length; i++) {
times.push({
value: data2[i].WeightRate,
name: '' + data2[i].PMNo + '/' + data2[i].WeightRate + '%'
});
}
option = {
calculable: false,
series: [{
name: '访问来源',
type: 'pie',
radius: '36%',
center: ['50%', '50%'],
label: {
//饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 16 //文字的字体大小
},
formatter: '{d}%'
}
},
data: times
}],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 300,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
lineChart.setOption(option);
},
error: function(xhr, type, errorThown) {
if (type == "timeout") {
mui.alert("网络异常,上架记录请求超时！");
} else {
mui.alert("上架记录：" + type);
}
}
});
}
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var newid = self.isComplete;
var satat = self.stuas;
ip = plus.storage.getItem("ip");
if (satat == "查询") {
recordeAjax(newid);
} else {
document.getElementById("ReturnCode").value = newid;
$('input').attr("disabled", true);
$('#baocun').css("display", "none");
$('select').attr("disabled", true);
// $("#resultTable input").attr("disabled",true);
$('#zhu input').attr("disabled", "disabled");
}
})
</script>
</body>
</html>
Final running effect
