diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue index bb7dc03..b612e44 100644 --- a/src/components/home/LineChart.vue +++ b/src/components/home/LineChart.vue @@ -31,6 +31,8 @@ watch( }, grid: { top: 100, + left: 100, + right: 100, }, tooltip: { trigger: 'axis', @@ -80,11 +82,17 @@ watch( yAxis: [ { type: 'value', - name: '温/湿度', + name: 'H₂O₂浓度', + // nameRotate: 90, // y轴name旋转90度 使其垂直 + // nameGap: 50, // y轴name与横纵坐标轴线的间距 + nameLocation: 'end', // y轴name处于y轴的什么位置 }, { type: 'value', - name: 'H₂O₂浓度/相对饱和度', + name: '温度/相对湿度/H₂O₂相对饱和度', + // nameRotate: 90, // y轴name旋转90度 使其垂直 + // nameGap: 50, // y轴name与横纵坐标轴线的间距 + // nameLocation: 'start', // y轴name处于y轴的什么位置 }, ], series: [ @@ -94,6 +102,7 @@ watch( data: newValue.data?.map(item => item.temp.toFixed(2)), symbol: 'circle', symbolSize: 2, + yAxisIndex: 1, lineStyle: { color: '#1e90ff', width: 1, @@ -105,6 +114,7 @@ watch( data: newValue.data?.map(item => item.rh.toFixed(2)), symbol: 'circle', symbolSize: 2, + yAxisIndex: 1, lineStyle: { color: '#32cd32', width: 1, @@ -116,7 +126,7 @@ watch( data: newValue.data?.map(item => item.h2o2.toFixed(2)), symbol: 'circle', symbolSize: 2, - yAxisIndex: 1, + lineStyle: { color: '#ffd700', width: 1, diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue index d43aa53..e59f71f 100644 --- a/src/views/home/chart.vue +++ b/src/views/home/chart.vue @@ -213,14 +213,14 @@ const formatSeconds = (seconds: number) => { v-loading="chartLoading" element-loading-background="rgba(255, 255, 255, 0.1)" class="line-chart-content" - :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }" + :style="{ 'grid-template-columns': `repeat(${Math.max(chartList.length, 2)},1fr)` }" >