移动端ECharts折线图“动态数据+时间坐标轴”与饼形图

忘是亡心i 2022-12-11 09:29 200阅读 0赞

**以下是普通api方法，返回是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">
    		
    		<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>

**最终运行效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e79357dd13e84c669620204eed90aa5c.png