Skip to content

M
muChangApp
Commit 5f8c9752 authored by yating.lin's avatar yating.lin
Browse files
Options

分析页调整layout

parent 183991af
Hide whitespace changes
Inline Side-by-side
Showing with 48 additions and 50 deletions
src/app/envCtrl/env-anal/env-anal.page.scss
View file @ 5f8c9752
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
.echart-pie { .echart-pie {
position: fixed; position: fixed;
padding: 10px; padding: 10px;
width: 95%; width: 100%;
height: 270px; height: 270px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 10px; border-radius: 10px;
......
src/app/envCtrl/env-anal/env-anal.page.ts
View file @ 5f8c9752
...@@ -43,27 +43,25 @@ export class EnvAnalPage implements OnInit { ...@@ -43,27 +43,25 @@ export class EnvAnalPage implements OnInit {
this.fanOptions = { this.fanOptions = {
backgroundColor: '#fff', backgroundColor: '#fff',
color: ['#B2E8E8', '#cb595c'], color: ['#B2E8E8', '#cb595c'],
// title: {
// text: '动态数据',
// subtext: '纯属虚构'
// },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: true
// position: ['50%', '10%']
// axisPointer: { // axisPointer: {
// type: 'cross', // type: 'cross',
// label: { // label: {
// backgroundColor: '#72efff' // backgroundColor: '#72efff'
// } // }
// } // }
axisPointer: { // axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow' // type: 'line', // 默认为直线，可选为：'line' | 'shadow'
label: 'cross', // label: 'cross',
show: true // show: true
}, // },
}, },
legend: { legend: {
data: ['运行时长/小时', '平均压力/兆帕'] data: ['运行时长/小时(H)', '平均功率/千瓦(KW)']
}, },
dataZoom: { dataZoom: {
show: false, show: false,
...@@ -90,39 +88,39 @@ export class EnvAnalPage implements OnInit { ...@@ -90,39 +88,39 @@ export class EnvAnalPage implements OnInit {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
scale: true, // scale: true,
name: '运行时长', // name: '运行时长/小时(H)',
// max: 1200, // max: 1200,
// min: 0, // min: 0,
boundaryGap: [0.1, 0.1] // boundaryGap: [0.1, 0.1]
}, },
{ {
type: 'value', type: 'value',
scale: true, // scale: true,
name: '平均压力', // name: '平均功率/千瓦(KW)',
// max: 1200, // max: 1200,
// min: 0, // min: 0,
boundaryGap: [0.1, 0.1] // boundaryGap: [0.1, 0.1]
} }
], ],
series: [ series: [
{ {
name: '运行时长', name: '运行时长/小时(H)',
type: 'bar', type: 'bar',
xAxisIndex: 1, // xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
barWidth: 20, barWidth: 20,
data: [100, 80, 90, 95, 85, 70] data: [100, 80, 90, 95, 85, 70]
}, },
{ {
name: '平均压力', name: '平均功率/千瓦(KW)',
type: 'line', type: 'line',
data: [80, 70, 60, 66, 85, 90] data: [80, 70, 60, 66, 85, 90]
} }
], ],
grid : { grid : {
left : '1%', // 组件离容器左侧的距离 left : '5%', // 组件离容器左侧的距离
right : '1%', right : '5%',
bottom : '0%', bottom : '0%',
top : '15%', top : '15%',
containLabel : true // grid 区域是否包含坐标轴的刻度标签 containLabel : true // grid 区域是否包含坐标轴的刻度标签
...@@ -146,33 +144,33 @@ export class EnvAnalPage implements OnInit { ...@@ -146,33 +144,33 @@ export class EnvAnalPage implements OnInit {
this.showerOptions = { this.showerOptions = {
backgroundColor: '#fff', backgroundColor: '#fff',
color: ['#B2E8E8', '#cb595c'], color: ['#B2E8E8', '#cb595c'],
// title: {
// text: '动态数据',
// subtext: '纯属虚构'
// },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: true
// axisPointer: {
// type: 'cross'
// }
// axisPointer: { // axisPointer: {
// type: 'cross', // type: 'cross',
// label: { // label: {
// backgroundColor: '#72efff' // backgroundColor: '#72efff'
// } // }
// } // }
axisPointer: { // axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow' // type: 'line', // 默认为直线，可选为：'line' | 'shadow'
label: 'cross', // label: 'cross',
show: true // show: true
}, // },
}, },
legend: { legend: {
data: ['运行时长/小时', '平均压力/兆帕'] data: ['运行时长/小时(H)', '平均压力/兆帕(Mpa)']
},
dataZoom: {
show: false,
start: 0,
end: 100
}, },
// dataZoom: {
// show: false,
// start: 0,
// end: 100
// },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
...@@ -193,39 +191,39 @@ export class EnvAnalPage implements OnInit { ...@@ -193,39 +191,39 @@ export class EnvAnalPage implements OnInit {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
scale: true, // scale: true,
name: '运行时长', // name: '运行时长/小时(H)',
// max: 1200, // max: 1200,
// min: 0, // min: 0,
boundaryGap: [0.1, 0.1] // boundaryGap: [0.1, 0.1]
}, },
{ {
type: 'value', type: 'value',
scale: true, // scale: true,
name: '平均压力', // name: '平均压力/兆帕(Mpa)',
// max: 1200, // max: 1200,
// min: 0, // min: 0,
boundaryGap: [0.1, 0.1] // boundaryGap: [0.1, 0.1]
} }
], ],
series: [ series: [
{ {
name: '运行时长', name: '运行时长/小时(H)',
type: 'bar', type: 'bar',
xAxisIndex: 1, // xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
barWidth: 20, barWidth: 20,
data: [100, 80, 90, 95, 85, 70] data: [100, 80, 90, 95, 85, 70]
}, },
{ {
name: '平均压力', name: '平均压力/兆帕(Mpa)',
type: 'line', type: 'line',
data: [80, 70, 60, 66, 85, 90] data: [80, 70, 60, 66, 85, 90]
} }
], ],
grid : { grid : {
left : '1%', // 组件离容器左侧的距离 left : '5%', // 组件离容器左侧的距离
right : '1%', right : '5%',
bottom : '0%', bottom : '0%',
top : '15%', top : '15%',
containLabel : true // grid 区域是否包含坐标轴的刻度标签 containLabel : true // grid 区域是否包含坐标轴的刻度标签
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment