@@ -2,6 +2,9 @@ import * as echarts from 'echarts'; | |||||
import elementResizeDetectorMaker from 'element-resize-detector'; | import elementResizeDetectorMaker from 'element-resize-detector'; | ||||
export default { | export default { | ||||
props: { | props: { | ||||
titleStr: { | |||||
}, | |||||
id: { | id: { | ||||
type: String, | type: String, | ||||
default: 'pie' | default: 'pie' | ||||
@@ -121,8 +124,8 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
text: "1000 万元", | |||||
left: "20%", | |||||
text: this.titleStr, | |||||
left: "22%", | |||||
top: "50%", | top: "50%", | ||||
padding: [0, 0], | padding: [0, 0], | ||||
textStyle: { | textStyle: { | ||||
@@ -152,13 +155,14 @@ export default { | |||||
var itemvalue = 0 | var itemvalue = 0 | ||||
let index = 0 | let index = 0 | ||||
echartData.forEach((value, i, array) => { | echartData.forEach((value, i, array) => { | ||||
total += value.value; | total += value.value; | ||||
if (value.name === params) { | if (value.name === params) { | ||||
index = i | index = i | ||||
itemvalue = value.value | itemvalue = value.value | ||||
} | } | ||||
}); | }); | ||||
percent = ((itemvalue / total) * 100).toFixed(1); | |||||
percent = itemvalue === 0 ? 0 : ((itemvalue / total) * 100).toFixed(1); | |||||
return ( | return ( | ||||
'{blue|' + params + '}\n{hr|}' + '\n' + | '{blue|' + params + '}\n{hr|}' + '\n' + | ||||
`{color${index}|` + percent + '%' + '}' + '' | `{color${index}|` + percent + '%' + '}' + '' | ||||
@@ -1,3 +1,8 @@ | |||||
<Pannel title="债务类别分析" height="305"> | |||||
<PieLegend></PieLegend> | |||||
<Pannel title="债务类别分析" height="305" | |||||
v-loading="!isLoad" | |||||
element-loading-text="拼命加载中" | |||||
element-loading-spinner="el-icon-loading" | |||||
element-loading-background="rgba(0, 0, 0, 0.1)" | |||||
> | |||||
<PieLegend v-if="isLoad" :data="data" :titleStr="total"></PieLegend> | |||||
</Pannel> | </Pannel> |
@@ -27,18 +27,26 @@ export default { | |||||
data () { | data () { | ||||
return { | return { | ||||
isLoad: false, | isLoad: false, | ||||
total: 0, | |||||
data: [] | data: [] | ||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getData () { | getData () { | ||||
if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
this.total = 0 | |||||
this.isLoad = false; | this.isLoad = false; | ||||
debtCategoryAnalysis(this.deptId, this.year).then(res => { | debtCategoryAnalysis(this.deptId, this.year).then(res => { | ||||
console.log('debtCategoryAnalysis', res); | |||||
let data = res.data.map(item => { | |||||
return [item.name, item.resourceSort, item.resourceType, item.deptName] | |||||
// console.log('debtCategoryAnalysis', res); | |||||
let total = 0 | |||||
let data = res.data.list.map(item => { | |||||
total += item.value | |||||
return { | |||||
...item, | |||||
unit: '万元' | |||||
} | |||||
}) | }) | ||||
this.total = total + '万元' | |||||
this.data = data; | this.data = data; | ||||
this.isLoad = true; | this.isLoad = true; | ||||
}) | }) | ||||