<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>喷涂一次合格率月报</title> <script src="../Scripts/echarts.min.js"></script> <script src="../Scripts/jquery-1.8.0.min.js"></script> <script src="../Scripts/DateScript.js"></script> <link href="../CSS/InitCSS.css" rel="stylesheet" /> <link href="../CSS/YueStyleSheet.css" rel="stylesheet" /> <style> #body { background-image: url(../Pic/shang.png); } </style> </head> <body> <div id="body"> <div id="main"></div> <div id="table"> <table> <thead id="thead"></thead> <tbody id="tbody"></tbody> </table> </div> </div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 $(function () { Show(); setInterval("Show()", 60000); }); function Show() { var myChart = echarts.init(document.getElementById('main')); $.ajax({ url: "../Handler/FiveScreenHandler.ashx?method=getPainting1_1", datatype: 'json', type: "Post", contentType: "application/json; charset=utf-8", async: false, success: function (result) { if (result) { var objlist = eval('(' + result + ')'); var month = GetMonth(); myChart.setOption({ tooltip: { trigger: 'axis' }, //color: ['lightgreen', 'lightblue', 'red'], color: ['lightgreen', 'red'], //backgroundColor: '#ffffff', legend: { textStyle: { fontSize: 26, color: '#666' } }, grid: { //left: '3%', //right: '4%', //bottom: '3%', containLabel: true }, xAxis: { type: 'category', //data: ['2018', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], data: month, axisLine: { lineStyle: { color: '#ffffff', width: 1 //这里是为了突出显示加上的 } } }, yAxis: { type: 'value', splitLine: { show: false },//去除网格线 axisLine: { lineStyle: { color: '#ffffff', width: 1 //这里是为了突出显示加上的 } }, min: 50, max: 80, interval: 5 }, series: [{ name: '', type: 'bar', label: { normal: { show: true, position: 'top' } }, barWidth: '20px', visualMap: { show: false, pieces: [{ gte: 0, lte: 100, color: 'red' }], outOfRange: { color: 'green' } }, data: objlist.data3 }, //{ // name: '', // type: 'line', // itemStyle: { normal: { label: { show: false } } }, // data: objlist.data1 //}, { name: '', type: 'line', itemStyle: { normal: { label: { show: false } } }, data: objlist.data2 }] }); //生成表格 //title var tableHead = "<tr>"; tableHead += "<td>日</td>"; for (var i = 0; i < month.length; i++) { tableHead += "<td>" + month[i] + "</td>"; } tableHead += "</tr>"; $("#thead").html(tableHead); //body var standard = objlist.data2; var numerial = objlist.data1; var tableBody = "<tr>"; tableBody += "<td>标</td>"; for (var i = 0; i < standard.length; i++) { tableBody += "<td>" + standard[i] + "</td>"; } tableBody += "</tr>"; tableBody += "<tr>"; tableBody += "<td>数</td>"; for (var i = 0; i < numerial.length; i++) { tableBody += "<td>" + numerial[i] + "</td>"; } tableBody += "</tr>"; $("#tbody").html(tableBody); } } }); } </script> </body> </html>