|
|
|
@ -45,15 +45,13 @@ |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
currentLevelData(val) { |
|
|
|
if (val.orgId) { |
|
|
|
if (val) { |
|
|
|
this.getData(); |
|
|
|
this.getChartData(val); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (this.currentLevelData.orgId) { |
|
|
|
this.getChartData(); |
|
|
|
this.getData() |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -70,188 +68,6 @@ |
|
|
|
this.showDialog = false; |
|
|
|
}, |
|
|
|
|
|
|
|
getChartData({ orgId, orgLevel }) { |
|
|
|
this.loading = true |
|
|
|
this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' + |
|
|
|
orgId + |
|
|
|
"&level=" + |
|
|
|
orgLevel |
|
|
|
).then(({data: {data}}) => { |
|
|
|
this.initCharts(data) |
|
|
|
}) |
|
|
|
}, |
|
|
|
initCharts(data) { |
|
|
|
let div = document.getElementById('zdgz'); |
|
|
|
this.myChart = echarts.init(div); |
|
|
|
let chartData = data.categoryList.map((item) => { |
|
|
|
return { |
|
|
|
name: resiCategoryMap[item.categoryName] || "", |
|
|
|
count: item.categoryCount, |
|
|
|
}; |
|
|
|
}).slice(0,8); |
|
|
|
let xData = chartData.map(item=>item.name); |
|
|
|
let yData = chartData.map(item=>item.count) |
|
|
|
let color = [[ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色 |
|
|
|
} |
|
|
|
]] |
|
|
|
let num = yData |
|
|
|
const max = Math.max(...num) |
|
|
|
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) |
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
show: false, |
|
|
|
text: '', |
|
|
|
x: 'center', |
|
|
|
top: '18px', |
|
|
|
textStyle: { |
|
|
|
color: '#333333', |
|
|
|
fontWeight: 500, |
|
|
|
fontSize: 12, |
|
|
|
}, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
backgroundColor: 'rgba(13,33,71,0.5)', |
|
|
|
borderColor: 'rgba(143,174,252,0.6)', |
|
|
|
padding: 8, |
|
|
|
textStyle: { |
|
|
|
color: '#fff', |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>' |
|
|
|
return res; |
|
|
|
}, |
|
|
|
}, |
|
|
|
/* dataZoom: [ |
|
|
|
{ |
|
|
|
"type": "slider", |
|
|
|
"start": 0, |
|
|
|
"end": parseInt((5 / xData.length) * 10) / 10 * 100, |
|
|
|
"height": 10, |
|
|
|
"bottom": 0, |
|
|
|
"showDetail": false, |
|
|
|
"showDataShadow": false, |
|
|
|
"borderColor": "transparent" |
|
|
|
} |
|
|
|
],*/ |
|
|
|
grid: { |
|
|
|
top: '18%', |
|
|
|
left: '2%', |
|
|
|
right: '4%', |
|
|
|
bottom: '8%', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#323c41' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
align: 'center', |
|
|
|
interval: 0, |
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
color: '#A3B9DA' |
|
|
|
} |
|
|
|
}, |
|
|
|
boundaryGap: true, |
|
|
|
data: xData, |
|
|
|
}, { |
|
|
|
type: 'category', |
|
|
|
data: xData, |
|
|
|
axisLine: {show: false}, |
|
|
|
axisLabel: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
boundaryGap: true, |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '单位：人', |
|
|
|
nameLocation: 'end', |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: 'rgba(4,187,255,0.18)', |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
}, |
|
|
|
nameTextStyle: { |
|
|
|
color: '#A3B9DA', |
|
|
|
textStyle: { |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
align: 'right', |
|
|
|
padding: [0, 5, -5, 5], |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
color: '#A3B9DA', |
|
|
|
textStyle: { |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "", |
|
|
|
type: 'bar', |
|
|
|
barWidth: 20, |
|
|
|
itemStyle: { |
|
|
|
opacity: 1, |
|
|
|
color: new echarts.graphic.LinearGradient( |
|
|
|
0, |
|
|
|
1, |
|
|
|
0, |
|
|
|
0, |
|
|
|
color[0], |
|
|
|
false |
|
|
|
) |
|
|
|
}, |
|
|
|
data: yData, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '', |
|
|
|
type: 'bar', |
|
|
|
barWidth: 40, |
|
|
|
barGap: '-60%', |
|
|
|
data: barArray, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'rgba(22,153,152, 0.1)' |
|
|
|
} |
|
|
|
}, |
|
|
|
zlevel: -1, |
|
|
|
xAxisIndex: 1, |
|
|
|
} |
|
|
|
], |
|
|
|
}; |
|
|
|
this.myChart.setOption(option); |
|
|
|
window.addEventListener("resize", () => this.myChart.resize()); |
|
|
|
this.loading = false |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
this.loading = true; |
|
|
|
this.$http |
|
|
|
|
