虚拟化容量分析及云平台容量分析二级页面趋势图样式调整
Showing
6 changed files
with
46 additions
and
8 deletions
@@ -184,6 +184,18 @@ export const monitorCustomBarLineChart = { | @@ -184,6 +184,18 @@ export const monitorCustomBarLineChart = { | ||
184 | value: 'left' | 184 | value: 'left' |
185 | }, | 185 | }, |
186 | { | 186 | { |
187 | + type: 'el-select', | ||
188 | + label: '标题垂直位置', | ||
189 | + name: 'textAlignVertical', | ||
190 | + required: false, | ||
191 | + placeholder: '', | ||
192 | + selectOptions: [ | ||
193 | + {code: 'top', name: '靠上'}, | ||
194 | + {code: 'bottom', name: '靠下'}, | ||
195 | + ], | ||
196 | + value: 'top' | ||
197 | + }, | ||
198 | + { | ||
187 | type: 'el-input-text', | 199 | type: 'el-input-text', |
188 | label: '副标题', | 200 | label: '副标题', |
189 | name: 'subText', | 201 | name: 'subText', |
@@ -170,6 +170,18 @@ export const monitorCustomLineTrend = { | @@ -170,6 +170,18 @@ export const monitorCustomLineTrend = { | ||
170 | value: 'left' | 170 | value: 'left' |
171 | }, | 171 | }, |
172 | { | 172 | { |
173 | + type: 'el-select', | ||
174 | + label: '标题垂直位置', | ||
175 | + name: 'textAlignVertical', | ||
176 | + required: false, | ||
177 | + placeholder: '', | ||
178 | + selectOptions: [ | ||
179 | + {code: 'top', name: '靠上'}, | ||
180 | + {code: 'bottom', name: '靠下'}, | ||
181 | + ], | ||
182 | + value: 'top' | ||
183 | + }, | ||
184 | + { | ||
173 | type: 'el-input-text', | 185 | type: 'el-input-text', |
174 | label: '副标题', | 186 | label: '副标题', |
175 | name: 'subText', | 187 | name: 'subText', |
@@ -268,7 +268,7 @@ | @@ -268,7 +268,7 @@ | ||
268 | imgSizeStyle() { | 268 | imgSizeStyle() { |
269 | return { | 269 | return { |
270 | "width": this.transStyle.pictureSize + "px", | 270 | "width": this.transStyle.pictureSize + "px", |
271 | - "height" : $(".basic-ul-right").height() | 271 | + // "height" : $(".basic-ul-right").height() |
272 | } | 272 | } |
273 | }, | 273 | }, |
274 | //监控地址 | 274 | //监控地址 |
@@ -369,7 +369,6 @@ | @@ -369,7 +369,6 @@ | ||
369 | getEchartData(val) { | 369 | getEchartData(val) { |
370 | const data = this.queryEchartsData(val); | 370 | const data = this.queryEchartsData(val); |
371 | data.then(res => { | 371 | data.then(res => { |
372 | - console.log("1111",res) | ||
373 | if (res && res[0].code == 0){ | 372 | if (res && res[0].code == 0){ |
374 | this.informationDataAll = res[0].data; | 373 | this.informationDataAll = res[0].data; |
375 | if (this.informationDataAll && this.informationDataAll.length > 0) { | 374 | if (this.informationDataAll && this.informationDataAll.length > 0) { |
@@ -189,7 +189,11 @@ export default { | @@ -189,7 +189,11 @@ export default { | ||
189 | fontWeight: optionsSetup.subTextFontWeight, | 189 | fontWeight: optionsSetup.subTextFontWeight, |
190 | fontSize: optionsSetup.subTextFontSize | 190 | fontSize: optionsSetup.subTextFontSize |
191 | }; | 191 | }; |
192 | - title.top='8px'; | 192 | + if(optionsSetup.textAlignVertical=='bottom'){ |
193 | + title.bottom='0'; | ||
194 | + }else{ | ||
195 | + title.top='8px'; | ||
196 | + } | ||
193 | this.options.title = title; | 197 | this.options.title = title; |
194 | }, | 198 | }, |
195 | // X轴设置 | 199 | // X轴设置 |
@@ -142,7 +142,11 @@ export default { | @@ -142,7 +142,11 @@ export default { | ||
142 | fontWeight: optionsSetup.subTextFontWeight, | 142 | fontWeight: optionsSetup.subTextFontWeight, |
143 | fontSize: optionsSetup.subTextFontSize | 143 | fontSize: optionsSetup.subTextFontSize |
144 | }; | 144 | }; |
145 | - title.top='8px'; | 145 | + if(optionsSetup.textAlignVertical=='bottom'){ |
146 | + title.bottom='0'; | ||
147 | + }else{ | ||
148 | + title.top='8px'; | ||
149 | + } | ||
146 | this.options.title = title; | 150 | this.options.title = title; |
147 | }, | 151 | }, |
148 | // X轴设置 | 152 | // X轴设置 |
@@ -14,7 +14,8 @@ | @@ -14,7 +14,8 @@ | ||
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | - <div class="wave-title" :style="subTitleStyle">当前使用率</div> | 17 | + <div class="wave-title" :style="subTitleStyle" v-if="index==0">当前使用率</div> |
18 | + <div class="wave-title" :style="subTitleStyle" v-if="index==1">使用增长率</div> | ||
18 | </div> | 19 | </div> |
19 | </div> | 20 | </div> |
20 | 21 | ||
@@ -161,7 +162,7 @@ export default { | @@ -161,7 +162,7 @@ export default { | ||
161 | return { | 162 | return { |
162 | /* width: width + "px", | 163 | /* width: width + "px", |
163 | height: width + "px",*/ | 164 | height: width + "px",*/ |
164 | - margin:this.optionsSetup.flexFlow=='column'?'5px 10px':'10px' | 165 | + margin:this.optionsSetup.flexFlow=='column'?'5px 10px':'10px 15px' |
165 | } | 166 | } |
166 | }, | 167 | }, |
167 | //波纹样式 | 168 | //波纹样式 |
@@ -307,9 +308,13 @@ export default { | @@ -307,9 +308,13 @@ export default { | ||
307 | justify-content: space-around; | 308 | justify-content: space-around; |
308 | } | 309 | } |
309 | .fill-item{ | 310 | .fill-item{ |
310 | - width:100%;height:100%; | 311 | + //width:100%; |
312 | + height:100%; | ||
311 | //flex: 1; | 313 | //flex: 1; |
312 | margin:10px; | 314 | margin:10px; |
315 | + align-items: start; | ||
316 | + display: flex; | ||
317 | + flex-flow: column; | ||
313 | } | 318 | } |
314 | .circle{ | 319 | .circle{ |
315 | background-image: linear-gradient(20deg, #5a8ef5 , #aeedf1); | 320 | background-image: linear-gradient(20deg, #5a8ef5 , #aeedf1); |
@@ -358,9 +363,11 @@ export default { | @@ -358,9 +363,11 @@ export default { | ||
358 | font-size: 20px; | 363 | font-size: 20px; |
359 | } | 364 | } |
360 | .wave-title{ | 365 | .wave-title{ |
361 | - padding:10px; | 366 | + padding:10px 0; |
367 | + margin-top:10px; | ||
362 | } | 368 | } |
363 | .fillContainer-title{ | 369 | .fillContainer-title{ |
364 | padding:15px; | 370 | padding:15px; |
371 | + margin-bottom:15px; | ||
365 | } | 372 | } |
366 | </style> | 373 | </style> |
-
Please register or login to post a comment