From c2179826c5b95c56bb8bde3a3f33e334c91740f8 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期三, 26 七月 2023 16:08:36 +0800
Subject: [PATCH] 88
---
gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp | 485 ++++++++++++++++++++++++++++
gmms/WebContent/dapingxianshi/tiemotaizu.jsp | 518 ++++++++++++++++++++++++++++++
2 files changed, 1,003 insertions(+), 0 deletions(-)
diff --git a/gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp b/gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp
new file mode 100644
index 0000000..fdba266
--- /dev/null
+++ b/gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp
@@ -0,0 +1,485 @@
+<%@ page contentType="text/html;charset=UTF-8"%>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>閽㈠寲涓嬬墖</title>
+
+<link rel="stylesheet" href="../js/bootstrap.min.css">
+<script src="../js/jquery-3.4.1.min.js"></script>
+<script src="../js/popper.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/echarts.min.js"></script>
+<script src="../js/static/js/vue.js"></script>
+<script src="../js/axios.min.js"></script>
+<script src="../js/mixins.js"></script>
+
+
+
+
+<style>
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
+.table td, .table th {
+ font-size: 14px;
+ vertical-align: middle;
+}
+
+body {
+ background-color: #D5EAFF;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.table {
+ margin: 0 auto;
+}
+
+.container-fluid {
+ min-height: 100%;
+}
+
+td img {
+ transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
+}
+
+td.zoom {
+ z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
+ position: relative; /* 瀹氫綅鏂瑰紡 */
+}
+
+td.zoom img:hover {
+ transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
+}
+
+.row {
+ margin-top: 20px;
+}
+
+#container, #container2 {
+ height: 400px;
+ width: 50%;
+ margin-top: 20px;
+}
+</style>
+</head>
+<body>
+ <div="container-fluid">
+
+
+ <div id="app2">
+ <div class="row">
+ <div class="col-lg-12">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>浜у搧鏁版嵁鍥剧墖</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>宸插姞宸ユ暟閲�</th>
+ <th>寰呭姞宸ユ暟閲�</th>
+ <th>鐮存崯鏁伴噺</th>
+ <th>鐩撮�氱巼</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{ order.orderId }}</td>
+ <td>
+ <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
+ @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
+ </td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: order.progress + '%' }"
+ :aria-valuenow="order.progress" aria-valuemin="0" aria-valuemax="100">{{ order.progress }}%
+ </div>
+ </div>
+ </td>
+ <td>{{ order.processed }}</td>
+ <td>{{ order.pending }}</td>
+ <td>{{ order.damaged }}</td>
+ <td>{{ order.passRate }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-lg-6" style="height: 100%;">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>鍔犲伐鐘舵��</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>浜у搧鍥剧墖</th>
+ <th>寤虹珛鏃堕棿</th>
+
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="item in orders" :key="item.orderId">
+ <td>{{ item.orderId }}</td>
+ <td>{{ item.processStatus }}</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: item.progress + '%' }"
+ :aria-valuenow="item.progress" aria-valuemin="0"
+ aria-valuemax="100">{{ item.progress }}%</div>
+ </div>
+ </td>
+ <td><img
+ style="width: 80%; height: 30px; background-position: 50%;"
+ :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
+ @mouseout="zoomOut2($event)" /></td>
+ <td>{{ item.jianlitime }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-lg-6" style="height: 100%;">
+ <div class="col-lg-24" >
+ <div class="row">
+ <div class="col-md-4">
+ <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
+ type="date" class="form-control" id="start-date">
+ </div>
+ <div class="col-md-4">
+ <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
+ type="date" class="form-control" id="end-date">
+ </div>
+ <div class="col-md-4">
+ <br>
+ <button class="btn btn-primary" id="filter-btn"
+ style="font-size: 12px;">绛涢��</button>
+ </div>
+ </div>
+ </div>
+ <div id="container" style="height: 200%; width: 100%;"></div>
+ <div id="container2"
+ style="height: 200%; width: 100%; margin-top: 1%;"></div>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+
+
+
+
+ <script>
+
+
+let app2 = new Vue({
+ el: '#app2',
+ data() {
+ return {
+ order: {
+ orderId: 'NG2302020101',
+ imageSrc: '鏁版嵁鍥�.png',
+ progress: 100,
+ processed: 10,
+ pending: 5,
+ damaged: 1,
+ passRate: '100%',
+ },
+ orders: [
+{
+ orderId: 'NG2302020201',
+ processStatus: '杩涜涓�',
+ progress: 70,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020202',
+ processStatus: '宸插畬鎴�',
+ progress: 100,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020203',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020204',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020205',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020206',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ ],
+ };
+ },
+ methods: {
+ zoomIn(event) {
+ event.target.style.transform = 'scale(2.2)';
+ },
+ zoomOut(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ zoomIn2(event) {
+ event.target.style.transform = 'scale(6.2)';
+ },
+ zoomOut2(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ }
+ });
+
+/* function zoomIn(element) {
+ element.classList.add("zoom");
+ }
+
+ function zoomOut(element) {
+ element.classList.remove("zoom");
+ } */
+
+ var dom = document.getElementById('container');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+ var dom2 = document.getElementById('container2');
+ var myChart2 = echarts.init(dom2, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+
+
+ var data = [{
+ date: '2023-07-20',
+ waterUsage: 10,
+ electricityUsage: 5
+ },
+ {
+ date: '2023-07-21',
+ waterUsage: 52,
+ electricityUsage: 26
+ },
+ {
+ date: '2023-07-22',
+ waterUsage: 200,
+ electricityUsage: 100
+ },
+ {
+ date: '2023-07-23',
+ waterUsage: 334,
+ electricityUsage: 167
+ },
+ {
+ date: '2023-07-24',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-25',
+ waterUsage: 330,
+ electricityUsage: 165
+ },
+ {
+ date: '2023-07-26',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-27',
+ waterUsage: 330,
+ electricityUsage: 165
+ }
+ ];
+
+ var startInput = document.getElementById('start-date');
+ var endInput = document.getElementById('end-date');
+ var filterBtn = document.getElementById('filter-btn');
+
+ function filterData() {
+ var filteredData = [];
+ var startDate = new Date(startInput.value);
+ var endDate = new Date(endInput.value);
+
+ data.forEach(function (item) {
+ var itemDate = new Date(item.date);
+ if (itemDate >= startDate && itemDate <= endDate) {
+ filteredData.push(item);
+ }
+ });
+
+ renderChart(filteredData);
+ }
+
+ filterBtn.addEventListener('click', filterData);
+
+ function renderChart(data) {
+ var option;
+
+ // 绗竴涓煴褰㈠浘锛堟按鑰楋級
+ option = {
+ title: {
+ text: '閽㈠寲涓嬬墖姘磋��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var waterUsage = params[0].value;
+ return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '姘磋��(m鲁)'
+ }],
+ series: [{
+ name: '姘磋��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.waterUsage;
+ }),
+ itemStyle: {
+ color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
+ }
+
+
+ }]
+ };
+
+ // 绗簩涓煴褰㈠浘锛堢數鑰楋級
+ var option2 = {
+ title: {
+ text: '閽㈠寲涓嬬墖鐢佃��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var electricityUsage = params[0].value;
+ return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鐢佃��(kWh)'
+ }],
+ series: [{
+ name: '鐢佃��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.electricityUsage;
+ })
+ }]
+ };
+
+ myChart.setOption(option);
+ myChart2.setOption(option2);
+ }
+ startInput.value = data[0].date;
+ endInput.value = data[data.length - 1].date;
+ renderChart(data);
+
+
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/gmms/WebContent/dapingxianshi/tiemotaizu.jsp b/gmms/WebContent/dapingxianshi/tiemotaizu.jsp
new file mode 100644
index 0000000..00e8fca
--- /dev/null
+++ b/gmms/WebContent/dapingxianshi/tiemotaizu.jsp
@@ -0,0 +1,518 @@
+<%@page import="ng.db.DBHelper"%>
+<%@ page language="java" contentType="text/html; charset=utf-8"
+ pageEncoding="utf-8"%>
+<c:set var="ctx" value="${pageContext.request.contextPath}" />
+<title>璐磋啘鍙扮粍</title>
+
+<link rel="stylesheet" href="../js/bootstrap.min.css">
+<script src="../js/jquery-3.4.1.min.js"></script>
+<script src="../js/popper.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/echarts.min.js"></script>
+
+
+
+ <script src="../js/static/js/vue.js"></script>
+ <script src="../js/axios.min.js"></script>
+ <script src="../js/mixins.js"></script>
+
+
+
+
+<style>
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
+.table td, .table th {
+ font-size: 14px;
+ vertical-align: middle;
+}
+
+body {
+ background-color: #D5EAFF;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.table {
+ margin: 0 auto;
+}
+
+.container-fluid {
+ min-height: 100%;
+}
+
+td img {
+ transition: all .2s ease-in-out; /* 娣诲姞娓愬彉鏁堟灉 */
+}
+
+td.zoom {
+ z-index: 1; /* 瀹氫箟鍙犳斁椤哄簭 */
+ position: relative; /* 瀹氫綅鏂瑰紡 */
+}
+
+td.zoom img:hover {
+ transform: scale(2.8); /* 鏀惧ぇ鍥剧墖 */
+}
+
+.row {
+ margin-top: 20px;
+}
+
+
+</style>
+</head>
+<body>
+ <div="container-fluid">
+
+
+ <div id="app2">
+ <div class="row">
+ <div class="col-lg-12">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>浜у搧鏁版嵁鍥剧墖</th>
+ <th>宸插姞宸ユ暟閲�</th>
+ <th>寰呭姞宸ユ暟閲�</th>
+ <th>鐮存崯鏁伴噺</th>
+ <th>鐩撮�氱巼</th>
+ <th style='width:140px;'>鑰楁潗鏈鏇存柊鏃堕棿</th>
+ <th style='width:120px;'>鏇存柊鍛ㄦ湡鏃堕棿</th>
+ <th style='width:180px;'>鑰楁潗鏇存崲鍊掕鏃堕棿</th>
+ <th>鏇存柊</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="order in orders" :key="order.orderNo">
+ <td>{{ order.orderNo }}</td>
+ <td>
+ <img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
+ @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
+ </td>
+ <td>{{ order.processedQty }}</td>
+ <td>{{ order.pendingQty }}</td>
+ <td>{{ order.damagedQty }}</td>
+ <td>{{ order.passRate }}</td>
+ <td>{{ order.updateTime }}</td>
+ <td>{{ order.updateCycle }}</td>
+ <td>{{ order.countdown }}</td>
+ <td>
+ <button class="btn btn-primary" @click="showModal()">鏇存柊</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+
+
+ <div class="row">
+ <div class="col-lg-6" style="height: 100%;">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>璁㈠崟鍙�</th>
+ <th>鍔犲伐鐘舵��</th>
+ <th>鍔犲伐杩涘害</th>
+ <th>浜у搧鍥剧墖</th>
+ <th>寤虹珛鏃ユ湡</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="item in orders2" :key="item.orderId">
+ <td>{{ item.orderId }}</td>
+ <td>{{ item.processStatus }}</td>
+ <td>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar"
+ :style="{ width: item.progress + '%' }"
+ :aria-valuenow="item.progress" aria-valuemin="0"
+ aria-valuemax="100">{{ item.progress }}%</div>
+ </div>
+ </td>
+ <td><img
+ style="width: 80%; height: 30px; background-position: 50%;"
+ :src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
+ @mouseout="zoomOut($event)" /></td>
+ <td>{{ item.jianlitime }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-lg-6" style="height: 100%;">
+ <div class="col-lg-24" >
+ <div class="row">
+ <div class="col-md-4">
+ <label for="start-date" style="font-size: 16px;">璧峰鏃ユ湡</label> <input
+ type="date" class="form-control" id="start-date">
+ </div>
+ <div class="col-md-4">
+ <label for="end-date" style="font-size: 16px;">鎴鏃ユ湡</label> <input
+ type="date" class="form-control" id="end-date">
+ </div>
+ <div class="col-md-4">
+ <br>
+ <button class="btn btn-primary" id="filter-btn"
+ style="font-size: 12px;">绛涢��</button>
+ </div>
+ </div>
+ </div>
+ <div id="container" style="height: 200%; width: 100%;"></div>
+ <div id="container2"
+ style="height: 200%; width: 100%; margin-top: 1%;"></div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- <div id="container" ></div> -->
+
+
+ </div>
+
+
+
+
+ <script>
+ Vue.prototype.$http= axios
+
+
+let app2 = new Vue({
+ el: '#app2',
+ mixins:[mixin],
+ data() {
+ return {
+ orders2: [
+{
+ orderId: 'NG2302020201',
+ processStatus: '杩涜涓�',
+ progress: 70,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020202',
+ processStatus: '宸插畬鎴�',
+ progress: 100,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020203',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020204',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020205',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ {
+ orderId: 'NG2302020206',
+ processStatus: '鏈紑濮�',
+ progress: 0,
+ deviceImage: '鏁版嵁鍥�.png',
+ jianlitime:"2023-07-01",
+ },
+ ],
+
+ orders: [
+ {
+ orderNo: 'NG2302020101',
+ imageSrc: '鏁版嵁鍥�.png',
+ processedQty: 10,
+ pendingQty: 5,
+ damagedQty: 1,
+ passRate: '100%',
+ updateTime: '23:44',
+ updateCycle: '5',
+ countdown: ''
+ }
+ ]
+ };
+
+ },
+
+
+
+ methods: {
+
+ zoomIn(event) {
+ event.target.style.transform = 'scale(2.2)';
+ },
+ zoomOut(event) {
+ event.target.style.transform = 'scale(1)';
+ },
+ zoomIn2(event) {
+ event.target.style.transform = 'scale(6.2)';
+ },
+
+
+
+ startCountdown() {
+ setInterval(() => {
+ this.orders2.forEach(order => {
+ if (order.countdown > 0) {
+ order.countdown--;
+ } else {
+ order.countdown = order.updateCycle * 60;
+ }
+ });
+ }, 1000);
+ }
+ },
+ mounted() {
+ this.startCountdown();
+
+ let sql="{call AXJ_dapingtiemodingdanchaxun()}"
+ let flag=2;
+
+ this.loadAjxs('璐磋啘璁㈠崟鍒濆鏌ヨ',sql,flag,"orders")
+
+ }
+ });
+
+
+
+/* function zoomIn(element) {
+ element.classList.add("zoom");
+ }
+
+ function zoomOut(element) {
+ element.classList.remove("zoom");
+ } */
+
+ var dom = document.getElementById('container');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+ var dom2 = document.getElementById('container2');
+ var myChart2 = echarts.init(dom2, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+
+
+
+ var data = [{
+ date: '2023-07-20',
+ waterUsage: 10,
+ electricityUsage: 5
+ },
+ {
+ date: '2023-07-21',
+ waterUsage: 52,
+ electricityUsage: 26
+ },
+ {
+ date: '2023-07-22',
+ waterUsage: 200,
+ electricityUsage: 100
+ },
+ {
+ date: '2023-07-23',
+ waterUsage: 334,
+ electricityUsage: 167
+ },
+ {
+ date: '2023-07-24',
+ waterUsage: 390,
+ electricityUsage: 195
+ },
+ {
+ date: '2023-07-25',
+ waterUsage: 330,
+ electricityUsage: 165
+ },
+ {
+ date: '2023-07-26',
+ waterUsage: 390,
+ electricityUsage: 195
+ }
+
+ ];
+
+ var startInput = document.getElementById('start-date');
+ var endInput = document.getElementById('end-date');
+ var filterBtn = document.getElementById('filter-btn');
+
+ function filterData() {
+ var filteredData = [];
+ var startDate = new Date(startInput.value);
+ var endDate = new Date(endInput.value);
+
+ data.forEach(function (item) {
+ var itemDate = new Date(item.date);
+ if (itemDate >= startDate && itemDate <= endDate) {
+ filteredData.push(item);
+ }
+ });
+
+ renderChart(filteredData);
+ }
+
+ filterBtn.addEventListener('click', filterData);
+
+ function renderChart(data) {
+ var option;
+
+ // 绗竴涓煴褰㈠浘锛堟按鑰楋級
+ option = {
+ title: {
+ text: '璐磋啘鍙扮粍姘磋��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var waterUsage = params[0].value;
+ return date + '<br/>' + '姘磋��: ' + waterUsage + ' m鲁';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '姘磋��(m鲁)'
+ }],
+ series: [{
+ name: '姘磋��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.waterUsage;
+ }),
+ itemStyle: {
+ color: '#00ff00' // 璁剧疆鏌卞舰鍥剧殑棰滆壊涓虹豢鑹�
+ }
+
+
+ }]
+ };
+
+ // 绗簩涓煴褰㈠浘锛堢數鑰楋級
+ var option2 = {
+ title: {
+ text: '璐磋啘鍙扮粍鐢佃��',
+ left: 'center',
+ subtext: ''
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {
+ show: true,
+ readOnly: true
+
+ },
+ saveAsImage: {
+ show: true
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: ''
+ },
+ formatter: function (params) {
+ var date = params[0].name;
+ var electricityUsage = params[0].value;
+ return date + '<br/>' + '鐢佃��: ' + electricityUsage + ' kWh';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鐢佃��(kWh)'
+ }],
+ series: [{
+ name: '鐢佃��',
+ type: 'bar',
+ data: data.map(function (item) {
+ return item.electricityUsage;
+ })
+ }]
+ };
+
+ myChart.setOption(option);
+ myChart2.setOption(option2);
+ }
+ startInput.value = data[0].date;
+ endInput.value = data[data.length - 1].date;
+ renderChart(data);
+
+
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
--
Gitblit v1.8.0