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