|
@@ -3,20 +3,7 @@
|
|
|
<div class="dmaone">
|
|
|
<div class="dmatitle"><div class="zdytitle">一级分区</div></div>
|
|
|
<div class="onecontent">
|
|
|
- <div ref="one_left_chart" class="dma_left" />
|
|
|
- <!-- <div class="dma_content">
|
|
|
- <div class="titlelabel">
|
|
|
- <div class="jt1" />
|
|
|
- <div class="title">
|
|
|
- <div class="usernum"><label class="ledfont">{{ dmaOnePercent || 0 }}</label><label>%</label></div>
|
|
|
- <div class="usertitle">综合漏损率</div>
|
|
|
- </div>
|
|
|
- <div class="jt2" />
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div ref="one_right_chart" class="dma_right" />
|
|
|
- <div ref="one_three_chart" class="dma_right" />
|
|
|
- <div ref="one_four_chart" class="dma_right" />
|
|
|
+ <div v-for="item in dmaOneList" :key="item.id" ref="onechart" class="dma_one_chart" :style="'height:100%;width:'+(100/(dmaOneList.length > 0 ? dmaOneList.length : 1))+'%;'"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dmatwo">
|
|
@@ -69,6 +56,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
dmaTwoList: this.data.twoLeakList,
|
|
|
+ dmaOneList: this.data.oneLeakList,
|
|
|
dmaOnePercent: 0,
|
|
|
chart3_legend: [],
|
|
|
seriesData1: [],
|
|
@@ -91,515 +79,33 @@ export default {
|
|
|
}, 0) / this.data.oneLeakList.length).toFixed(2) || 0
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.drawOneLeftChart()
|
|
|
- this.drawOneRightChart()
|
|
|
- this.drawOneThreeChart()
|
|
|
- this.drawOneFourChart()
|
|
|
+ this.drawOneChart()
|
|
|
|
|
|
this.drawTwoChart()
|
|
|
this.drawThreeChart()
|
|
|
},
|
|
|
methods: {
|
|
|
- drawOneLeftChart() {
|
|
|
- const that = this
|
|
|
- const chartReady = that.$echarts.init(that.$refs.one_left_chart)
|
|
|
- var data = Number(this.data.oneLeakList[0].leakageRate) // 百分比
|
|
|
- var width = 90 // 宽度
|
|
|
- var cant = 20 // 面
|
|
|
- var cantoffset = 10
|
|
|
-
|
|
|
- const options = {
|
|
|
- // backgroundColor: '#0e202d',
|
|
|
- tooltip: {
|
|
|
- trigger: 'none'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '15%',
|
|
|
- bottom: '20%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: ['百分比'],
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- textStyle: {
|
|
|
- color: '#e54035'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '最上层立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#E6EFFF'
|
|
|
- // opacity: 0.14
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- offset: [0, 20],
|
|
|
- formatter: this.data.oneLeakList[0].name,
|
|
|
- color: '#555555',
|
|
|
- fontSize: 13,
|
|
|
- fontWeight: 'bold'
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 100,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '中间立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: data,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '最底部立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, 10],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4E87E2'
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: '#FFFFFF',
|
|
|
- fontSize: 20,
|
|
|
- fontFamily: 'myFont',
|
|
|
- position: parseFloat(data) > 20 ? 'inside' : 'insideBottom',
|
|
|
- formatter: data + '%'
|
|
|
- },
|
|
|
- data: [100 - data]
|
|
|
- }, {
|
|
|
- // 底部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- 'normal': {
|
|
|
- 'color': {
|
|
|
- 'x': 0,
|
|
|
- 'y': 0,
|
|
|
- 'x2': 0,
|
|
|
- 'y2': 1,
|
|
|
- 'type': 'linear',
|
|
|
- 'global': false,
|
|
|
- 'colorStops': [{// 第一节下面
|
|
|
- 'offset': 0,
|
|
|
- 'color': '#8EB9FE'
|
|
|
- }, {
|
|
|
- 'offset': 1,
|
|
|
- 'color': '#4E87E2'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [data]
|
|
|
- }, {
|
|
|
- // 上部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [100 - data]
|
|
|
- }]
|
|
|
- }
|
|
|
- chartReady.setOption(options)
|
|
|
-
|
|
|
- // 自定义缩放
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- if (chartReady) {
|
|
|
- chartReady.resize()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- drawOneRightChart() {
|
|
|
- const that = this
|
|
|
- const chartReady = that.$echarts.init(that.$refs.one_right_chart)
|
|
|
- if (!this.data.oneLeakList?.[1]) {
|
|
|
- return
|
|
|
- }
|
|
|
- var data = Number(this.data.oneLeakList[1].leakageRate) // 百分比 // 百分比
|
|
|
- var width = 90 // 宽度
|
|
|
- var cant = 20 // 面
|
|
|
- var cantoffset = 10
|
|
|
-
|
|
|
- const options = {
|
|
|
- // backgroundColor: '#0e202d',
|
|
|
- tooltip: {
|
|
|
- trigger: 'none'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '15%',
|
|
|
- bottom: '20%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: ['百分比'],
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- textStyle: {
|
|
|
- color: '#e54035'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '最上层立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#E6EFFF'
|
|
|
- // opacity: 0.14
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- offset: [0, 20],
|
|
|
- formatter: this.data.oneLeakList[2].name,
|
|
|
- color: '#555555',
|
|
|
- fontSize: 13,
|
|
|
- fontWeight: 'bold'
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 100,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '中间立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: data,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '最底部立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, 10],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4E87E2'
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: '#FFFFFF',
|
|
|
- fontSize: 20,
|
|
|
- fontFamily: 'myFont',
|
|
|
- position: parseFloat(data) > 20 ? 'inside' : 'insideBottom',
|
|
|
- formatter: data + '%'
|
|
|
- },
|
|
|
- data: [100 - data]
|
|
|
- }, {
|
|
|
- // 底部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- 'normal': {
|
|
|
- 'color': {
|
|
|
- 'x': 0,
|
|
|
- 'y': 0,
|
|
|
- 'x2': 0,
|
|
|
- 'y2': 1,
|
|
|
- 'type': 'linear',
|
|
|
- 'global': false,
|
|
|
- 'colorStops': [{// 第一节下面
|
|
|
- 'offset': 0,
|
|
|
- 'color': '#8EB9FE'
|
|
|
- }, {
|
|
|
- 'offset': 1,
|
|
|
- 'color': '#4E87E2'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [data]
|
|
|
- }, {
|
|
|
- // 上部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [100 - data]
|
|
|
- }]
|
|
|
- }
|
|
|
- chartReady.setOption(options)
|
|
|
-
|
|
|
- // 自定义缩放
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- if (chartReady) {
|
|
|
- chartReady.resize()
|
|
|
+ drawOneChart(){
|
|
|
+ this.dmaOneList.forEach((item, index) => {
|
|
|
+ let data = {
|
|
|
+ id: item.id,
|
|
|
+ leakage: item.leakageRate || 0,
|
|
|
+ name: item.name
|
|
|
}
|
|
|
+ //data.leakage = data.leakage >= 100 ? 100 : (data.leakage <= 0 ? 0 : data.leakage)
|
|
|
+ this.drawOnePipeChart(data, index)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- drawOneThreeChart() {
|
|
|
- const that = this
|
|
|
- const chartReady = that.$echarts.init(that.$refs.one_three_chart)
|
|
|
- if (!this.data.oneLeakList?.[2]) {
|
|
|
- return
|
|
|
- }
|
|
|
- var data = Number(this.data.oneLeakList[2].leakageRate) // 百分比 // 百分比
|
|
|
- var width = 90 // 宽度
|
|
|
- var cant = 20 // 面
|
|
|
- var cantoffset = 10
|
|
|
|
|
|
- const options = {
|
|
|
- // backgroundColor: '#0e202d',
|
|
|
- tooltip: {
|
|
|
- trigger: 'none'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '15%',
|
|
|
- bottom: '20%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: ['百分比'],
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- textStyle: {
|
|
|
- color: '#e54035'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '最上层立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#E6EFFF'
|
|
|
- // opacity: 0.14
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- offset: [0, 20],
|
|
|
- formatter: this.data.oneLeakList[2].name,
|
|
|
- color: '#555555',
|
|
|
- fontSize: 13,
|
|
|
- fontWeight: 'bold'
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 100,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '中间立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, -cantoffset],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: data,
|
|
|
- symbolPosition: 'end'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- name: '最底部立体圆',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [width, cant],
|
|
|
- symbolOffset: [0, 10],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4E87E2'
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: '#FFFFFF',
|
|
|
- fontSize: 20,
|
|
|
- fontFamily: 'myFont',
|
|
|
- position: parseFloat(data) > 20 ? 'inside' : 'insideBottom',
|
|
|
- formatter: data + '%'
|
|
|
- },
|
|
|
- data: [100 - data]
|
|
|
- }, {
|
|
|
- // 底部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- 'normal': {
|
|
|
- 'color': {
|
|
|
- 'x': 0,
|
|
|
- 'y': 0,
|
|
|
- 'x2': 0,
|
|
|
- 'y2': 1,
|
|
|
- 'type': 'linear',
|
|
|
- 'global': false,
|
|
|
- 'colorStops': [{// 第一节下面
|
|
|
- 'offset': 0,
|
|
|
- 'color': '#8EB9FE'
|
|
|
- }, {
|
|
|
- 'offset': 1,
|
|
|
- 'color': '#4E87E2'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [data]
|
|
|
- }, {
|
|
|
- // 上部立体柱
|
|
|
- stack: '1',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
- opacity: 0.3
|
|
|
- }
|
|
|
- },
|
|
|
- silent: true,
|
|
|
- barWidth: width,
|
|
|
- barGap: '-100%', // Make series be overlap
|
|
|
- data: [100 - data]
|
|
|
- }]
|
|
|
- }
|
|
|
- chartReady.setOption(options)
|
|
|
-
|
|
|
- // 自定义缩放
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- if (chartReady) {
|
|
|
- chartReady.resize()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- drawOneFourChart() {
|
|
|
+ drawOnePipeChart(reust, index) {
|
|
|
const that = this
|
|
|
- const chartReady = that.$echarts.init(that.$refs.one_four_chart)
|
|
|
- if (!this.data.oneLeakList?.[3]) {
|
|
|
- return
|
|
|
- }
|
|
|
- var data = Number(this.data.oneLeakList[3].leakageRate) // 百分比 // 百分比
|
|
|
+ const chartReady = that.$echarts.init(that.$refs.onechart[index])
|
|
|
+ var data = reust.leakage // 百分比
|
|
|
var width = 90 // 宽度
|
|
|
var cant = 20 // 面
|
|
|
- var cantoffset = 10
|
|
|
- const options = {
|
|
|
+ var cantoffset = 10
|
|
|
+ const options = {
|
|
|
// backgroundColor: '#0e202d',
|
|
|
tooltip: {
|
|
|
trigger: 'none'
|
|
@@ -646,15 +152,15 @@ export default {
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#E6EFFF'
|
|
|
- // opacity: 0.14
|
|
|
+ color: '#E1F3FD'
|
|
|
+ // opacity: 0.3
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
offset: [0, 20],
|
|
|
- formatter: this.data.oneLeakList[2].name,
|
|
|
+ formatter: reust.name,
|
|
|
color: '#555555',
|
|
|
fontSize: 13,
|
|
|
fontWeight: 'bold'
|
|
@@ -671,12 +177,12 @@ export default {
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
+ color: '#2AAAF1',
|
|
|
opacity: 0.3
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
- value: data,
|
|
|
+ value: data >= 100 ? 100 :(data < 0 ? 0 : data),
|
|
|
symbolPosition: 'end'
|
|
|
}]
|
|
|
}, {
|
|
@@ -687,18 +193,19 @@ export default {
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#4E87E2'
|
|
|
+ color: '#47CFFA'
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: '#FFFFFF',
|
|
|
- fontSize: 20,
|
|
|
+ fontSize: 16,
|
|
|
fontFamily: 'myFont',
|
|
|
+ //position: 'inside',
|
|
|
position: parseFloat(data) > 20 ? 'inside' : 'insideBottom',
|
|
|
formatter: data + '%'
|
|
|
},
|
|
|
- data: [100 - data]
|
|
|
+ data: data >= 100 ? [100] : (data < 0 ? [100] : [100 - data])
|
|
|
}, {
|
|
|
// 底部立体柱
|
|
|
stack: '1',
|
|
@@ -714,10 +221,12 @@ export default {
|
|
|
'global': false,
|
|
|
'colorStops': [{// 第一节下面
|
|
|
'offset': 0,
|
|
|
- 'color': '#8EB9FE'
|
|
|
+ 'color': '#6BE3FD',
|
|
|
+ 'opacity': 1
|
|
|
}, {
|
|
|
'offset': 1,
|
|
|
- 'color': '#4E87E2'
|
|
|
+ 'color': '#47CFFA',
|
|
|
+ 'opacity': 1
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
@@ -725,21 +234,21 @@ export default {
|
|
|
silent: true,
|
|
|
barWidth: width,
|
|
|
barGap: '-100%', // Make series be overlap
|
|
|
- data: [data]
|
|
|
+ data: data >= 100 ? [100] : (data < 0 ? 0 : [data])
|
|
|
}, {
|
|
|
// 上部立体柱
|
|
|
stack: '1',
|
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#4D8DF5',
|
|
|
+ color: '#2AAAF1',
|
|
|
opacity: 0.3
|
|
|
}
|
|
|
},
|
|
|
silent: true,
|
|
|
barWidth: width,
|
|
|
barGap: '-100%', // Make series be overlap
|
|
|
- data: [100 - data]
|
|
|
+ data: data >= 100 ? [0] : (data < 0 ? [100] : [100 - data])
|
|
|
}]
|
|
|
}
|
|
|
chartReady.setOption(options)
|