|
|
|
@ -2,8 +2,8 @@ |
|
|
|
<div style="margin-top:10px"> |
|
|
|
<div class="chart-container"> |
|
|
|
<div id="chart1" class="chart"></div> |
|
|
|
<div id="chart2" class="chart"></div> |
|
|
|
<div id="chart3" class="chart"></div> |
|
|
|
<div v-if="showchart2" id="chart2" class="chart"></div> |
|
|
|
<div v-if="showchart3" id="chart3" class="chart"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -15,6 +15,8 @@ export default { |
|
|
|
//数据 |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showchart2:true, |
|
|
|
showchart3:true, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 3000, |
|
|
|
@ -43,26 +45,45 @@ export default { |
|
|
|
//创建前 |
|
|
|
created() { }, |
|
|
|
async mounted() { |
|
|
|
this.initChart("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|
|
|
this.initChart1("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|
|
|
this.initChart2("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org"); |
|
|
|
console.log(this.formData,"sdlkjslkfd"); |
|
|
|
this.getCategoryTree() |
|
|
|
}, |
|
|
|
//方法 |
|
|
|
methods: { |
|
|
|
initChart(url) { |
|
|
|
//事件类型统计 |
|
|
|
async getCategoryTree() { |
|
|
|
const url = "/governance/icEventCategoryMapping/getCategoryTree"; |
|
|
|
let param = { |
|
|
|
endDate: this.formData.queryDateStart, |
|
|
|
startDate: this.formData.queryDateEnd, |
|
|
|
usableFlag: true |
|
|
|
} |
|
|
|
const { data, code, msg } = await requestGet(url, param); |
|
|
|
if (code === 0) { |
|
|
|
// this.orgOptions = data |
|
|
|
this.initChart(data) |
|
|
|
console.log(this.data, "sdfjklsdf"); |
|
|
|
} else { |
|
|
|
this.$message.error(msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
initChart(data) { |
|
|
|
const myChart = echarts.init(document.getElementById('chart1')); |
|
|
|
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|
|
|
const maxIndex = data.findIndex(item => item.eventNum === Math.max(...data.map(d => d.eventNum))); |
|
|
|
console.log(data[maxIndex],"sdkljfsdlkf"); |
|
|
|
if (data[maxIndex].childData) { |
|
|
|
this.showchart2=true |
|
|
|
this.initChart1(data[maxIndex].childData) |
|
|
|
} |
|
|
|
data.forEach(item => { |
|
|
|
console.log(item, "sdklnslkdj"); |
|
|
|
item.name = item.categoryName |
|
|
|
item.value=item.eventNum |
|
|
|
}); |
|
|
|
const option = { |
|
|
|
color: ['#3C94FE', '#FE9166', '#FAC156', '#22C1C3', '#F0D915', '#6FC364', "#BA9CFF",], |
|
|
|
tooltip: { |
|
|
|
show:"true", |
|
|
|
formatter: '{b}<br/> <br/>{c} ({d}%)', |
|
|
|
trigger: 'item', |
|
|
|
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|
|
|
borderWidth: 0, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' // 文字颜色 |
|
|
|
} |
|
|
|
formatter: '{b} <br/> 数量: {c} ({d}%)' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
orient: 'horizontal', |
|
|
|
@ -73,9 +94,7 @@ export default { |
|
|
|
radius: ["0", "120"], |
|
|
|
type: 'pie', |
|
|
|
selectedMode: 'single', // 单选模式 |
|
|
|
data: this.data.map((item, idx) => ({ |
|
|
|
...item, |
|
|
|
})), |
|
|
|
data: data, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'inside', |
|
|
|
@ -102,6 +121,20 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
myChart.setOption(option); //数据集 |
|
|
|
myChart.on("mouseover", (params) => { |
|
|
|
console.log("鼠标悬停在:", params); |
|
|
|
if(data[params.dataIndex].childData){ |
|
|
|
this.showchart2=true |
|
|
|
this.showchart3=true |
|
|
|
this.initChart1(data[params.dataIndex].childData) |
|
|
|
}else{ |
|
|
|
this.showchart2=false |
|
|
|
this.showchart3=false |
|
|
|
// this.initChart1() |
|
|
|
} |
|
|
|
|
|
|
|
// this.onHover(params); |
|
|
|
}); |
|
|
|
setTimeout(() => { |
|
|
|
myChart.dispatchAction({ |
|
|
|
type: 'showTip', |
|
|
|
@ -115,25 +148,43 @@ export default { |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
|
|
|
|
// myChart.dispatchAction({ |
|
|
|
// type: 'showTip', // 显示提示框 |
|
|
|
// seriesIndex: 0, |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
myChart.dispatchAction({ |
|
|
|
type: 'showTip', // 显示提示框 |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: maxIndex |
|
|
|
}); |
|
|
|
}, |
|
|
|
initChart1(url) { |
|
|
|
initChart1(data) { |
|
|
|
console.log(data,"sdkljklsd"); |
|
|
|
const myChart = echarts.init(document.getElementById('chart2')); |
|
|
|
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|
|
|
data.forEach(item => { |
|
|
|
console.log(item, "sdklnslkdj"); |
|
|
|
item.name = item.categoryName |
|
|
|
item.value=item.eventNum |
|
|
|
}); |
|
|
|
const maxIndex = data.findIndex(item => item.eventNum === Math.max(...data.map(d => d.eventNum))); |
|
|
|
if (data[maxIndex].childData) { |
|
|
|
this.initChart2(data[maxIndex].childData) |
|
|
|
} |
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
formatter: '{b}<br/> <br/>{c} ({d}%)', |
|
|
|
trigger: 'item', |
|
|
|
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|
|
|
borderWidth: 0, |
|
|
|
title: { |
|
|
|
text: data.categoryName, |
|
|
|
subtext: '城管类诉求', |
|
|
|
left: 'center', |
|
|
|
top: '42%', |
|
|
|
textStyle: { |
|
|
|
color: '#fff' // 文字颜色 |
|
|
|
fontSize: 22, |
|
|
|
fontWeight: 'bold' |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
fontSize: 14, |
|
|
|
color: '#666' |
|
|
|
} |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: '{b} <br/> 数量: {c} ({d}%)' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
orient: 'horizontal', |
|
|
|
bottom: 0, |
|
|
|
@ -145,23 +196,36 @@ export default { |
|
|
|
type: 'pie', |
|
|
|
avoidLabelOverlap: false, |
|
|
|
selectedMode: 'single', // 单选模式 |
|
|
|
data: this.data.map((item, idx) => ({ |
|
|
|
...item, |
|
|
|
})), |
|
|
|
data: data, |
|
|
|
label: { |
|
|
|
formatter: '{b}: {c} ({d}%)', |
|
|
|
formatter: (params) => `{num|${params.value}} {percent|${params.percent}%}\n{b|${params.name}}`, |
|
|
|
show: true, |
|
|
|
position: 'outside', |
|
|
|
color:"#ffffff", |
|
|
|
fontSize:"20" |
|
|
|
color:"#525353", |
|
|
|
fontSize:"15", |
|
|
|
rich: { |
|
|
|
num: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'bold', |
|
|
|
color: '#000' |
|
|
|
}, |
|
|
|
percent: { |
|
|
|
fontSize: 14, |
|
|
|
color: '#1E88E5' |
|
|
|
}, |
|
|
|
b: { |
|
|
|
fontSize: 12, |
|
|
|
color: '#666' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
fontSize: '30', |
|
|
|
fontWeight: 'bold' |
|
|
|
}, |
|
|
|
} |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// fontSize: '30', |
|
|
|
// fontWeight: 'bold' |
|
|
|
// }, |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
@ -181,30 +245,34 @@ export default { |
|
|
|
dataIndex: maxIndex |
|
|
|
}); |
|
|
|
}, 500); |
|
|
|
// myChart.dispatchAction({ |
|
|
|
// type: 'highlight', // 高亮选中扇区 |
|
|
|
// seriesIndex: 0, |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
myChart.dispatchAction({ |
|
|
|
type: 'showTip', // 显示提示框 |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: maxIndex |
|
|
|
}); |
|
|
|
myChart.on("mouseover", (params) => { |
|
|
|
console.log("鼠标悬停在:", params); |
|
|
|
if(data[params.dataIndex].childData){ |
|
|
|
this.showchart3=true |
|
|
|
this.initChart2(data[params.dataIndex].childData) |
|
|
|
}else{ |
|
|
|
this.showchart3=false |
|
|
|
} |
|
|
|
|
|
|
|
// myChart.dispatchAction({ |
|
|
|
// type: 'showTip', // 显示提示框 |
|
|
|
// seriesIndex: 0, |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
}); |
|
|
|
}, |
|
|
|
initChart2(url) { |
|
|
|
initChart2(data) { |
|
|
|
const myChart = echarts.init(document.getElementById('chart3')); |
|
|
|
const maxIndex = this.data.findIndex(item => item.value === Math.max(...this.data.map(d => d.value))); |
|
|
|
data.forEach(item => { |
|
|
|
console.log(item, "sdklnslkdj"); |
|
|
|
item.name = item.categoryName |
|
|
|
item.value=item.eventNum |
|
|
|
}); |
|
|
|
const maxIndex = data.findIndex(item => item.eventNum === Math.max(...data.map(d => d.eventNum))); |
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
formatter: '{b}<br/> <br/>{c} ({d}%)', |
|
|
|
trigger: 'item', |
|
|
|
backgroundColor: 'rgba(150, 150, 150, 0.7)', // 灰色背景，透明度 0.7 |
|
|
|
borderWidth: 0, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' // 文字颜色 |
|
|
|
} |
|
|
|
formatter: '{b} <br/> 数量: {c} ({d}%)' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
orient: 'horizontal', |
|
|
|
@ -215,21 +283,38 @@ export default { |
|
|
|
{ |
|
|
|
radius: ["80", "120"], |
|
|
|
type: 'pie', |
|
|
|
avoidLabelOverlap: false, |
|
|
|
selectedMode: 'single', // 单选模式 |
|
|
|
data: this.data.map((item, idx) => ({ |
|
|
|
...item, |
|
|
|
})), |
|
|
|
data: data, |
|
|
|
label: { |
|
|
|
formatter: '{b}: {c} ({d}%)', |
|
|
|
formatter: (params) => `{num|${params.value}} {percent|${params.percent}%}\n{b|${params.name}}`, |
|
|
|
show: true, |
|
|
|
position: 'outside', |
|
|
|
color:"#ffffff", |
|
|
|
fontSize:"20" |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: 'center' |
|
|
|
color:"#525353", |
|
|
|
fontSize:"15", |
|
|
|
rich: { |
|
|
|
num: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'bold', |
|
|
|
color: '#000' |
|
|
|
}, |
|
|
|
percent: { |
|
|
|
fontSize: 14, |
|
|
|
color: '#1E88E5' |
|
|
|
}, |
|
|
|
b: { |
|
|
|
fontSize: 12, |
|
|
|
color: '#666' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// fontSize: '30', |
|
|
|
// fontWeight: 'bold' |
|
|
|
// }, |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
@ -256,11 +341,11 @@ export default { |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
|
|
|
|
// myChart.dispatchAction({ |
|
|
|
// type: 'showTip', // 显示提示框 |
|
|
|
// seriesIndex: 0, |
|
|
|
// dataIndex: maxIndex |
|
|
|
// }); |
|
|
|
myChart.dispatchAction({ |
|
|
|
type: 'showTip', // 显示提示框 |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: maxIndex |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
//子组件注册 |
|
|
|
@ -269,9 +354,15 @@ export default { |
|
|
|
computed: {}, |
|
|
|
//监听 |
|
|
|
watch: {}, |
|
|
|
props:{ |
|
|
|
formData:{ |
|
|
|
type:Object, |
|
|
|
default:'' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.chart-container { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
@ -280,7 +371,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.chart { |
|
|
|
width: 33.3%; |
|
|
|
width: 500px; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
是小王呀\24601
5 months ago