203 lines
4.7 KiB
Vue
203 lines
4.7 KiB
Vue
<template>
|
||
<div class="left-center-warp">
|
||
|
||
<item :title="'电站区域分布'">
|
||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||
<div v-else class="chart-box">
|
||
<Chart :options="options" :class-name="'chart'" />
|
||
</div></item>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import item from './item-warp.vue'
|
||
import { GetRegionalDistribution } from '@/api/screen/zzScreen'
|
||
|
||
export default {
|
||
components: { item },
|
||
data() {
|
||
return {
|
||
options: {},
|
||
loading: true
|
||
}
|
||
},
|
||
methods: {
|
||
async getData(deptId) {
|
||
try {
|
||
this.loading = true
|
||
const res = await GetRegionalDistribution({
|
||
deptId: deptId
|
||
})
|
||
this.initChart(res.data)
|
||
} catch (error) {
|
||
console.log(error)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
initChart(val) {
|
||
if (val.length) {
|
||
val.sort((a, b) => b.regionValue - a.regionValue)
|
||
|
||
var ydata = []
|
||
var legend = []
|
||
val.forEach(i => {
|
||
const param = {
|
||
name: i.addName,
|
||
value: i.regionValue
|
||
}
|
||
legend.push(param.name)
|
||
ydata.push(param)
|
||
})
|
||
const count = this.arrCount(ydata)
|
||
this.options = {
|
||
title: [{
|
||
text: '电站总数',
|
||
subtext: count,
|
||
|
||
subtextStyle: {
|
||
color: '#fff',
|
||
fontSize: 37,
|
||
fontWeight: 500
|
||
|
||
},
|
||
|
||
left: '35%',
|
||
top: '40%',
|
||
padding: [0, 0],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 18
|
||
},
|
||
textAlign: 'center'
|
||
|
||
}],
|
||
tooltip: {},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 20,
|
||
bottom: 20,
|
||
padding: [0, 10],
|
||
data: legend,
|
||
icon: 'circle',
|
||
align: 'left',
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
itemGap: 15,
|
||
textStyle: {
|
||
color: '#fff',
|
||
rich: {
|
||
name: {
|
||
fontSize: 12,
|
||
color: '#ffffff',
|
||
padding: [0, 10, 0, 0]
|
||
},
|
||
num: {
|
||
fontSize: 16,
|
||
color: '#ffffff'
|
||
},
|
||
unit: {
|
||
fontSize: 16,
|
||
color: '#ffffff'
|
||
}
|
||
}
|
||
},
|
||
formatter: function(name) {
|
||
const val = ydata.filter(item => {
|
||
return item.name === name
|
||
})
|
||
const num = (((val[0].value / count)) * 100).toFixed(2)
|
||
return [
|
||
`{name|${name.length > 5 ? name.slice(0, 2) : name}}`,
|
||
`{num|${num}}{unit|%}`
|
||
].join(' ')
|
||
}
|
||
|
||
},
|
||
series: [{
|
||
name: '电站个数',
|
||
type: 'pie',
|
||
clockwise: false, // 饼图的扇区是否是顺时针排布
|
||
minAngle: 20, // 最小的扇区角度（0 ~ 360）
|
||
radius: ['60%', '75%'],
|
||
center: ['35%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: { // 图形样式
|
||
normal: {
|
||
borderColor: '#070A0C',
|
||
borderWidth: 5
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
position: 'outer',
|
||
alignTo: 'edge',
|
||
margin: 10,
|
||
formatter: '{text|{b}}\n{value|{d}%}',
|
||
rich: {
|
||
text: {
|
||
fontSize: 14,
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
padding: 5
|
||
},
|
||
value: {
|
||
fontSize: 24,
|
||
align: 'center',
|
||
verticalAlign: 'middle'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: ydata
|
||
}]
|
||
}
|
||
} else {
|
||
this.options = {
|
||
title: {
|
||
text: '暂无数据',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgb(153, 153, 153)',
|
||
fontWeight: 'normal'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
arrCount(arr) {
|
||
let count = 0
|
||
arr.forEach(item => {
|
||
count = count + item.value
|
||
})
|
||
return count
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.left-center-warp {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.chart-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
</style>
|