@@ -237,12 +238,12 @@
-
-
- {{ item.name }}
- {{ item.value }}
-
-
+
+
+ {{ item.name }}
+ {{ item.value }}
+
+
@@ -382,8 +383,18 @@ const initpowerChart = () => {
const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
const option = {
+ title: {
+ show: true,
+ text: '功率趋势',
+ textStyle: {
+ color: '#4E5969',
+ fontSize: 14,
+ fontFamily: 'PingFangSC-Semibold',
+ },
+ padding: 10,
+ },
grid: {
- top: 50,
+ top: 70,
right: 23,
bottom: 10,
left: 18,
@@ -485,6 +496,7 @@ const initpowerChart = () => {
textStyle: {
color: '#73767a',
},
+ top: 20,
},
series: [
{
@@ -715,17 +727,21 @@ const initTemperatureChart = () => {
const option = {
grid: {
top: 30,
- //right: 100,
+ right: 5,
bottom: 0,
left: -100,
containLabel: true,
},
xAxis: {
- type: 'category',
+ // type: 'category',
+ type: 'value',
+
show: false,
},
yAxis: {
- type: 'value',
+ // type: 'value',
+ type: 'category',
+
show: false,
},
series: [
@@ -735,8 +751,9 @@ const initTemperatureChart = () => {
type: 'bar',
label: {
show: true,
- align: 'center',
- formatter: `{a|{c}}\n{b|{a}}`,
+ align: 'left',
+ // verticalAlign:'top',
+ formatter: `{b|{a}} {a|{c}}`,
rich: {
a: {
color: '#333333',
@@ -747,12 +764,14 @@ const initTemperatureChart = () => {
fontSize: 14,
},
},
- position: 'insideBottom',
- offset: [62, 0],
+ width: 100,
+ height: 22,
+ position: 'insideLeft',
+ offset: [85, -22],
},
itemStyle: {
color: '#048bd2',
- borderRadius: [0, 0, 4, 4],
+ borderRadius: [0, 4, 4, 0],
},
barWidth: 20,
},
@@ -835,7 +854,7 @@ const initFrequencyChart = () => {
fontSize: 14,
fontFamily: 'PingFangSC-Semibold',
},
- padding: 15,
+ padding: 10,
},
],
polar: {
@@ -1241,8 +1260,9 @@ const getThisDayChartDataForMinute = () => {
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
if (type.includes('power')) {
getThisDayChartData().then(() => {
- initpowerChart()
- // initTemperatureChart()
+ nextTick(() => {
+ initpowerChart()
+ })
})
}
// if (type.includes('trend')) {
@@ -1254,7 +1274,9 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', '
// }
if (type.includes('frequency')) {
getThisDayChartDataForMinute().then((res) => {
- initFrequencyChart()
+ nextTick(() => {
+ initFrequencyChart()
+ })
})
}
}
@@ -1609,23 +1631,50 @@ $labelHeight: 24px;
}
}
}
- .power {
+ .temperatureList {
@include cardDefaultStyle;
@include cardlabel;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
margin: 10px 0;
width: 100%;
height: calc(40% - 20px);
- // min-height: 285px;
- // height: v-bind('computedHeight.powerHeight');
- .chartBox {
+ .chartPart-item {
+ // margin: 5px 0;
width: 100%;
- height: calc(100% - $labelHeight);
- .power-chart {
+ height: calc(33.3% - 10px);
+ background: #f0f6ff;
+ border-radius: 8px;
+ // text-align: center;
+ color: #4e5969;
+ .chartParm {
+ width: 100%;
+ height: 100%;
+ }
+ .frequencyChart {
width: 100%;
height: 100%;
}
}
}
+ // .power {
+ // @include cardDefaultStyle;
+ // @include cardlabel;
+ // margin: 10px 0;
+ // width: 100%;
+ // height: calc(40% - 20px);
+ // // min-height: 285px;
+ // // height: v-bind('computedHeight.powerHeight');
+ // .chartBox {
+ // width: 100%;
+ // height: calc(100% - $labelHeight);
+ // .power-chart {
+ // width: 100%;
+ // height: 100%;
+ // }
+ // }
+ // }
}
.cardContentCenter {
@include cardDefaultStyle;
@@ -1846,18 +1895,29 @@ $labelHeight: 24px;
&:hover {
cursor: pointer;
}
+ .power {
+ margin-bottom: 5px;
+ width: 60%;
+ height: 100%;
+ background-color: #f0f6ff;
+ border-radius: 8px;
+ .chartBox {
+ width: 100%;
+ height: 100%;
+ .power-chart {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
.chartPart-item {
- margin: 5px;
- width: 25%;
+ margin: 0 0 5px 5px;
+ // width: 25%;
height: 100%;
background: #f0f6ff;
border-radius: 8px;
- // text-align: center;
color: #4e5969;
- .chartParm {
- width: 100%;
- height: 100%;
- }
.frequencyChart {
width: 100%;
height: 100%;