6 changed files with 346 additions and 14 deletions
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div> |
||||
|
<div ref="bar" style="width: 50%; height: 500px;float: left"></div> |
||||
|
<div ref="ele" style="width: 50%; height: 500px;float: right"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script > |
||||
|
import { getStatistics,getTypeNumber } from "@/api/build/risk"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import Div from "../../../../../build/div/index.vue"; |
||||
|
import {codeToText} from "element-china-area-data"; |
||||
|
|
||||
|
export default { |
||||
|
props:["proNo"], |
||||
|
components: {Div}, |
||||
|
created() { |
||||
|
this.getDicts("risk_type").then((response)=>{ |
||||
|
this.riskType1=response.data; |
||||
|
console.log(this.riskType1) |
||||
|
}) |
||||
|
this.getDicts("risk_state").then((response)=>{ |
||||
|
this.riskState=response.data; |
||||
|
console.log(this.riskState) |
||||
|
}) |
||||
|
getStatistics(this.proNo).then( |
||||
|
res=>{ |
||||
|
this.list=res |
||||
|
this.key=Object.keys(this.list) |
||||
|
this.value=Object.values(this.list) |
||||
|
this.barInit(); |
||||
|
} |
||||
|
) |
||||
|
getTypeNumber(this.proNo).then( |
||||
|
res=>{ |
||||
|
const keys = Object.keys(res); |
||||
|
this.formattedData = keys.map(key => ({ |
||||
|
value: res[key], // 将当前键对应的值作为 value |
||||
|
name: key // 将当前键作为 name |
||||
|
})); |
||||
|
this.eleInit() |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
riskType1:null, |
||||
|
riskState:null, |
||||
|
key:null, |
||||
|
value:null, |
||||
|
list:null, |
||||
|
typekey:null, |
||||
|
typeValues:null, |
||||
|
formattedData:null, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods:{ |
||||
|
riskStateFormatter(row, column) { |
||||
|
return this.selectDictLabel( |
||||
|
this.riskState, |
||||
|
row |
||||
|
); |
||||
|
}, |
||||
|
riskTypeFormatter(row, column) { |
||||
|
return this.selectDictLabel( |
||||
|
this.riskType1, |
||||
|
row |
||||
|
); |
||||
|
}, |
||||
|
barInit(){ |
||||
|
console.log(this.value) |
||||
|
// const xAxisData = Object.keys(this.list["危险等级"]); // 提取x轴刻度 ["0", "2"] |
||||
|
// const yAxisData = Object.values(this.list["危险等级"]); // 提取y轴值 [1, 1] |
||||
|
let chartDom = this.$refs.bar; |
||||
|
let myChart = echarts.init(chartDom); |
||||
|
let option = { |
||||
|
title: { |
||||
|
text: '风险等级对比', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: this.key.map(item=>this.riskStateFormatter(item)), |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
axisLine: { |
||||
|
show: false // 隐藏 X 轴线 |
||||
|
}, |
||||
|
name: '数量/个', |
||||
|
type: 'value', |
||||
|
interval: 1, |
||||
|
|
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '数量/个', |
||||
|
type: 'bar', |
||||
|
barWidth: '60%', |
||||
|
data:this.value |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
option && myChart.setOption(option); |
||||
|
window.addEventListener("resize", function () { |
||||
|
myChart.resize(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
eleInit(){ |
||||
|
|
||||
|
let chartDom1 = this.$refs.ele; |
||||
|
let myChart = echarts.init(chartDom1); |
||||
|
let option = { |
||||
|
|
||||
|
title: { |
||||
|
text: '风险类型对比', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '数量/个', |
||||
|
type: 'pie', |
||||
|
radius: '50%', |
||||
|
data:this.formattedData.map(item => ({ |
||||
|
...item, |
||||
|
name: this.riskTypeFormatter(item.name) |
||||
|
})), |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
option && myChart.setOption(option); |
||||
|
window.addEventListener("resize", function () { |
||||
|
myChart.resize(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue