diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue index ffffac93..f863b797 100644 --- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue +++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue @@ -2,7 +2,9 @@
{{ title }}
- +
+ +
@@ -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); } - } + }, }; @@ -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%; } }