|
@@ -419,8 +419,8 @@ export default {
|
|
|
}
|
|
|
getRubbishTypeTotal(params).then(res => {
|
|
|
console.log(res)
|
|
|
- const data = []
|
|
|
- if (res.status == 200) {
|
|
|
+ let data = []
|
|
|
+ if (res.status == 200 && res.data) {
|
|
|
// this.initChart3(res.data)
|
|
|
Object.keys(this.rubbishWeightData).map(item => {
|
|
|
const p = res.data.find(key => key.rubbishType == item)
|
|
@@ -431,6 +431,28 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ data = [{
|
|
|
+ name: '可回收垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '厨余垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '建筑垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '有害垃圾',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
const con5 = document.getElementById('con5')
|
|
|
const chart5 = echarts.init(con5)
|
|
@@ -594,81 +616,24 @@ export default {
|
|
|
// 设备分布比例
|
|
|
const con3 = document.getElementById('con3')
|
|
|
const chart3 = echarts.init(con3)
|
|
|
- const option3 = {
|
|
|
- color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
|
- title: {
|
|
|
- text: '设备分布比例',
|
|
|
- top: 20,
|
|
|
- left: 20,
|
|
|
- textStyle: {
|
|
|
- color: '#abd7ff'
|
|
|
- },
|
|
|
- textAlingn: 'left'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: `{b} : {d}%`
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- radius: ['30%', '50%'],
|
|
|
- startAngle: 75,
|
|
|
- top: 50,
|
|
|
- avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: params => {
|
|
|
- // console.log(params, 'ppppppp')
|
|
|
- return (
|
|
|
- '{name|' + params.name + '}{value|' +
|
|
|
- params.percent + '%' + '}'
|
|
|
- )
|
|
|
- },
|
|
|
- padding: [0, -70, 25, -70],
|
|
|
- rich: {
|
|
|
- name: {
|
|
|
- fontSize: 12,
|
|
|
- padding: [0, 4, 0, 4],
|
|
|
- color: '#999'
|
|
|
- },
|
|
|
- value: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#999'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- length: 20,
|
|
|
- length2: 70,
|
|
|
- lineStyle: {
|
|
|
- color: '#e6e6e6'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- name: '居民小区',
|
|
|
- value: 49
|
|
|
- },
|
|
|
- {
|
|
|
- name: '学校',
|
|
|
- value: 14
|
|
|
- },
|
|
|
- {
|
|
|
- name: '公共机构',
|
|
|
- value: 32
|
|
|
- },
|
|
|
- {
|
|
|
- name: '企业',
|
|
|
- value: 5
|
|
|
- }
|
|
|
- ],
|
|
|
- insideLabel: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }]
|
|
|
+ const data = [{
|
|
|
+ name: '居民小区',
|
|
|
+ value: 49
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '学校',
|
|
|
+ value: 14
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公共机构',
|
|
|
+ value: 32
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '企业',
|
|
|
+ value: 5
|
|
|
}
|
|
|
+ ]
|
|
|
+ const option3 = this.initPie(chart3, '设备分布比例', data)
|
|
|
chart3.setOption(option3)
|
|
|
this.chart3 = chart3
|
|
|
this.chart3.resize()
|
|
@@ -898,7 +863,7 @@ export default {
|
|
|
// 初始化饼图
|
|
|
initPie (chart, title, data) {
|
|
|
const option = {
|
|
|
- color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
|
+ color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
|
|
|
title: {
|
|
|
text: title,
|
|
|
top: 20,
|
|
@@ -967,6 +932,8 @@ export default {
|
|
|
that.chart2.resize()
|
|
|
that.chart3.resize()
|
|
|
that.chart4.resize()
|
|
|
+ that.chart5.resize()
|
|
|
+ that.chart6.resize()
|
|
|
})()
|
|
|
}
|
|
|
},
|