xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化监控中心样式

Browse Source
This commit is contained in:
fks-yangshouda
2024-08-15 15:34:50 +08:00
parent 7e97118634
commit a47f8ae50f
9 changed files with 147 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
View File

@@ -1,9 +1,10 @@
<template>
<a-row type="flex" style="height: 90%">
<a-row type="flex" style="height: 100%">
<a-col :span="8" style="height: 100%">
<div
style="
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
width: 98%;
height: 96%;
margin: 2%;
@@ -32,7 +33,8 @@
style="
width: 98%;
height: 38%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
margin: 1%;
"></div>
<div
@@ -40,7 +42,8 @@
style="
width: 98%;
height: 57%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
margin: 1%;
"></div>
</a-col>
@@ -242,7 +245,9 @@
var seriesdata = [];
var dateX = [];
// var legendList: string | any[] = [];
let sum = 0;
for (let i = 0; i < data.value.length; i++) {
sum += data.value[i].value;
dateX.push(data.value[i].name);
seriesdata.push({
@@ -262,7 +267,7 @@
clockwise: '10',
// hoverAnimation: true,
// 圆环内径和外径
radius: ['70%', '90%'],
radius: ['60%', '80%'],
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
// 显示折线
labelLine: {
@@ -294,6 +299,29 @@
tooltip: {
trigger: 'item',
},
graphic: [
{
type: 'text',
left: '28%',
top: '33%',
style: {
text: '总计',
fill: '#000',
fontSize: 14,
},
},
{
type: 'text',
left: sum > 100 ? '24%' : '30%',
top: '50%',
style: {
text: sum,
fill: '#000',
fontSize: 30,
fontWeight: 700,
},
},
],
// 图例
legend: {
@@ -334,7 +362,9 @@
chartRight1.on('click', function (params) {
// 控制台输出数据的名称
console.log(params.name + ' 被点击了');
drawRight2(params);
if (params.name && params.name != '') {
drawRight2(params);
}
});
}
};
@@ -360,18 +390,18 @@
});
const option = {
// 图例
legend: {
data: [
{ name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
{
name: '参考线',
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
}, // 参考线使用自定义路径图标，只显示线条
],
orient: 'horizontal',
bottom: 10,
left: 60,
},
// legend: {
// data: [
// { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
// {
// name: '参考线',
// icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
// }, // 参考线使用自定义路径图标，只显示线条
// ],
// orient: 'horizontal',
// bottom: 10,
// left: 60,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -409,7 +439,7 @@
zoomLock: true,
startValue: 0, // 从头开始。
endValue: 5,
bottom: '0%',
bottom: 20,
height: 10,
showDetail: false,
},