206 lines
4.5 KiB
Vue
206 lines
4.5 KiB
Vue
<template>
|
||
<div style="position: relative">
|
||
<Chart ref="chart" :chartOption="option" width="100%" height="100%"
|
||
></Chart>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
import Chart from '../chart.vue'
|
||
const MAX_LABEL = 8
|
||
export default {
|
||
props: {
|
||
// 父组件传递过来的图表数据
|
||
// chartData: {
|
||
// type: Array,
|
||
// required: true
|
||
// },
|
||
highIssues:{
|
||
type:Array,
|
||
default:null
|
||
}
|
||
},
|
||
components: {
|
||
Chart
|
||
},
|
||
data() {
|
||
return {
|
||
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
|
||
tipContent: '',
|
||
list: [{
|
||
name: '电缆沟挖方：',
|
||
value: 11
|
||
},
|
||
{
|
||
name: '建筑用电：',
|
||
value: 20
|
||
}, {
|
||
name: '保护接地或接零：',
|
||
value: 13
|
||
}, {
|
||
name: '现场作业准备及布置：',
|
||
value:9
|
||
}, {
|
||
name: '焊接：',
|
||
value: 6
|
||
}]
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
// 监听父组件中的数据变化，重新触发Echarts
|
||
// chartData: {
|
||
// deep: true,
|
||
// handler() {
|
||
// this.resetOption()
|
||
// }
|
||
// },
|
||
highIssues:{
|
||
deep: true,
|
||
handler() {
|
||
this.resetOption()
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
option() {
|
||
let dataX= [] //名称
|
||
let dataY = [] //数量
|
||
this.highIssues.forEach((item,index) => {
|
||
dataX.push(item.name)
|
||
dataY.push(item.count)
|
||
});
|
||
const self = this
|
||
return {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '45',
|
||
right: '58',
|
||
bottom: '0',
|
||
top: '36',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#078DF0',
|
||
opacity: 0.3
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
inside: true,
|
||
lineStyle: {
|
||
color: '#078DF0',
|
||
opacity: 0.3
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0, // 横轴信息全部显示
|
||
fontSize: 13, // 横轴字体大小
|
||
color: '#70A4E9' // 颜色
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: this.yAxisName,
|
||
type: 'category',
|
||
nameTextStyle: this.yNameTextStyle,
|
||
data: this.yAxisData,
|
||
position: this.yAxisPosition || null,
|
||
// 刻度轴
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
// 刻度线
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
inside: true,
|
||
splitNumber: 50,
|
||
boundaryGap: [20, 20],
|
||
textStyle: {
|
||
color: "#ADFFFE",
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
padding: [-20, 0, 14, 0],
|
||
},
|
||
},
|
||
data:dataX,
|
||
triggerEvent: true,
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
data: dataY,
|
||
type: 'bar',
|
||
barWidth: 16,
|
||
barGap: '-30%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: 'bar',
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00CAD9' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#00DBEF' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false, // 缺省为 false
|
||
}
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
color: '#FFFFFF',
|
||
show: true,
|
||
position: 'right',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
fontWeight: 'bold'
|
||
},
|
||
formatter: function (data) {
|
||
return data.value+'次'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
resetOption() {
|
||
this.$refs.chart.setOption(this.option)
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|