From 0097c0dc9f508517eb349cea59ac7273b2d15a64 Mon Sep 17 00:00:00 2001 From: jiang Date: Thu, 24 Jul 2025 23:09:52 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E8=83=BD=E5=87=8F=E6=8E=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../newDataAnalysis/energySavingAnalysis.html | 107 ++++++------ pages/newDataAnalysis/exception-detail.html | 156 +++++++++++++++--- 2 files changed, 191 insertions(+), 72 deletions(-) diff --git a/pages/newDataAnalysis/energySavingAnalysis.html b/pages/newDataAnalysis/energySavingAnalysis.html index 6ab781c..1dcd2db 100644 --- a/pages/newDataAnalysis/energySavingAnalysis.html +++ b/pages/newDataAnalysis/energySavingAnalysis.html @@ -442,89 +442,90 @@ } function deviceChartFn(data) { - let deviceName = []; - let consumptionKwh = [] - data.map(item => { - deviceName.push(item.deviceName); - consumptionKwh.push(Number(parseFloat(item.consumptionKwh).toFixed(2))); - }) + let pieData = data.map(item => ({ + name: item.deviceName, + value: Number(parseFloat(item.consumptionKwh).toFixed(2)) + })); + deviceChart.setOption({ animation: false, tooltip: { - trigger: 'axis', - axisPointer: {type: 'shadow'} + trigger: 'item', + formatter: '{b}: {c} kWh ({d}%)' }, - textStyle: {color: '#FFFFFF'}, - grid: { - left: 30, // 增大左边距,给长标签留出空间 - right: 30, - top: 20, - bottom: 30, - containLabel: true - }, - xAxis: {type: 'value'}, - yAxis: { - type: 'category', - data: deviceName + textStyle: { color: '#FFFFFF' }, + legend: { + orient: 'vertical', + left: 'left', + textStyle: { color: '#FFFFFF' } }, series: [{ - type: 'bar', - data: consumptionKwh, - itemStyle: {color: '#008781'}, + name: '能耗占比', + type: 'pie', + radius: '55%', + center: ['50%', '50%'], + data: pieData, label: { show: true, - position: 'right', + formatter: '{b}: {d}%', color: '#FFFFFF', - fontSize: 12, - formatter: '{c}' + fontSize: 12 + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } } }] }); - } + function renewableUsedKwhFn(data) { - let deviceName = []; - let renewableUsedKwh = [] - data.map(item => { - deviceName.push(item.deviceName); - renewableUsedKwh.push(Number(parseFloat(item.renewableUsedKwh).toFixed(2))); - }) + let pieData = data.map(item => ({ + name: item.deviceName, + value: Number(parseFloat(item.renewableUsedKwh).toFixed(2)) + })); + renewableUsedKwhChart.setOption({ animation: false, tooltip: { - trigger: 'axis', - axisPointer: {type: 'shadow'} + trigger: 'item', + formatter: '{b}: {c} kWh ({d}%)' }, - textStyle: {color: '#FFFFFF'}, - grid: { - left: 30, // 增大左边距,给长标签留出空间 - right: 30, - top: 20, - bottom: 30, - containLabel: true - }, - xAxis: {type: 'value'}, - yAxis: { - type: 'category', - data: deviceName + textStyle: { color: '#FFFFFF' }, + legend: { + orient: 'vertical', + left: 'left', + textStyle: { color: '#FFFFFF' } }, series: [{ - type: 'bar', - data: renewableUsedKwh, - itemStyle: {color: '#008781'}, + name: '可再生能源使用占比', + type: 'pie', + radius: '55%', + center: ['50%', '50%'], + data: pieData, label: { show: true, - position: 'right', + formatter: '{b}: {d}%', color: '#FFFFFF', - fontSize: 12, - formatter: '{c}' + fontSize: 12 + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } } }] }); } + window.addEventListener('resize', function () { trendChart.resize(); deviceChart.resize(); diff --git a/pages/newDataAnalysis/exception-detail.html b/pages/newDataAnalysis/exception-detail.html index fbe1c53..a53f057 100644 --- a/pages/newDataAnalysis/exception-detail.html +++ b/pages/newDataAnalysis/exception-detail.html @@ -77,18 +77,125 @@