admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(环境管理):环境监测样式更改

Browse Source
This commit is contained in:
骆乐 2022-08-03 14:38:54 +08:00
parent 84344eb00b
commit 2874210f88
1 changed files with 6 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue
View File

@ -2,7 +2,9 @@
<!-- 环境监测 -->
<div class="contentBox">
<div class="titleTxt">{{ title }}</div>
<airQulityChart ></airQulityChart>
<div class="air" >
<airQulityChart :show="true"></airQulityChart>
</div>
<!-- :show="true" -->
</div>
</template>
@ -20,227 +22,8 @@ export default {
},
data() {
return {
lineColor: "#1FCCC6",
todayAir: {
analysisData: "0",
analysisType: "优"
}
};
},
mounted() {
this.createdEcharts3();
},
methods: {
createdEcharts3() {
let that = this;
//项目进度
let monitor = echarts.init(this.$refs.monitor);
this.chart = monitor;
monitor.clear();
const option = {
title: {
show: true,
text: this.todayAir.analysisType,
x: "49%",
y: "55%",
z: 8,
textAlign: "center",
textStyle: {
color: " rgb(147,169,205) ",
fontSize: 12
}
},
series: [
{
type: "gauge",
radius: "62%",
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[this.todayAir.analysisData / 100, this.lineColor],
[1, "#111F42"]
],
width: 6
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
pointer: {
show: false
}
},
{
type: "gauge",
// center: ['20%', '50%'],
radius: "80%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: [[1, "rgba(0,0,0,0)"]]
}
},
//仪表盘轴线
axisLabel: {
show: true,
color: "#4d5bd1"
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 7,
lineStyle: {
color: "#468EFD",
width: 2
},
length: -4
}, //刻度样式
splitLine: {
show: true,
length: -10,
lineStyle: {
color: "#468EFD"
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
/*内部*/
{
type: "pie",
radius: ["0", "35%"],
center: ["50%", "50%"],
z: 8,
hoverAnimation: false,
data: [
{
value: this.todayAir.analysisData,
itemStyle: {
normal: {
color: "#091F4B"
}
},
label: {
normal: {
rich: {
a: {
color: this.lineColor,
align: "center",
fontSize: 31,
fontWeight: "bold"
}
},
formatter: function(params) {
return "{a|" + params.value + "}";
},
position: "center",
show: true
}
},
labelLine: {
show: false
}
}
]
},
/*外一层*/
{
type: "pie",
radius: "40%",
startAngle: 220,
endAngle: -40,
hoverAnimation: false,
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
value: 1
}
],
itemStyle: {
normal: {
color: "rgba(69, 161, 255,0.8)"
}
}
},
//外二层圈
{
type: "pie",
radius: "45%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
z: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
value: 1
}
],
itemStyle: {
normal: {
color: "rgba(69, 161, 255,0.5)"
}
}
},
//最外层圈
{
type: "pie",
radius: "50%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
z: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
value: 1
}
],
itemStyle: {
normal: {
color: "rgba(69, 161, 255,0.3)"
}
}
}
]
};
monitor.setOption(this.option);
}
}
},
};
</script>
@ -256,31 +39,9 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.monitor {
.air{
width: 100%;
height: 100%;
}
}
.colour {
position: absolute;
bottom: 0;
width: 100%;
font-size: 10px;
left: 2%;
.colour_content {
width: 16%;
text-align: center;
float: left;
.bg {
width: 100%;
height: 5px;
}
.size {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
height: 85%;
}
}
</style>