167 lines
3.4 KiB
Vue
167 lines
3.4 KiB
Vue
<template>
|
||
<div class="half-height-chart-container">
|
||
<dv-border-box-10 class="border-box">
|
||
<div class="chart-title">事件高发场景/区域分布</div>
|
||
<div ref="barChart" class="chart"></div>
|
||
</dv-border-box-10>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
|
||
const barChart = ref(null)
|
||
|
||
onMounted(() => {
|
||
const barOption = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||
borderColor: 'rgba(64, 158, 255, 0.8)',
|
||
borderWidth: 1,
|
||
textStyle: { color: '#fff' }
|
||
},
|
||
legend: {
|
||
data: ['检测数据1', '检测数据2'],
|
||
bottom: 10, // 距离底部10px
|
||
left: 'center', // 水平居中
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
},
|
||
itemWidth: 12,
|
||
itemHeight: 8,
|
||
itemGap: 30
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '15%', // 增加底部间距给图例留空间
|
||
top: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 250,
|
||
interval: 50,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(124, 208, 255, 0.5)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(124, 208, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(124, 208, 255, 0.8)',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: [
|
||
'办公走廊/楼道区',
|
||
'会议室区域',
|
||
'值班岗亭区',
|
||
'边检通道区',
|
||
'港口泊位区'
|
||
],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(124, 208, 255, 0.5)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(124, 208, 255, 0.8)',
|
||
fontSize: 12
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '检测数据1',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
color: '#FFA500',
|
||
fontSize: 12,
|
||
formatter: '{c}'
|
||
},
|
||
itemStyle: {
|
||
color: '#FFA500',
|
||
borderRadius: [0, 4, 4, 0]
|
||
},
|
||
data: [120, 150, 200, 100, 150]
|
||
},
|
||
{
|
||
name: '检测数据2',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
color: '#00FFC0',
|
||
fontSize: 12,
|
||
formatter: '{c}'
|
||
},
|
||
itemStyle: {
|
||
color: '#00FFC0',
|
||
borderRadius: [0, 4, 4, 0]
|
||
},
|
||
data: [100, 120, 100, 80, 100]
|
||
}
|
||
]
|
||
}
|
||
|
||
const chartInstance = echarts.init(barChart.value)
|
||
chartInstance.setOption(barOption)
|
||
|
||
window.addEventListener('resize', () => {
|
||
chartInstance.resize()
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.half-height-chart-container {
|
||
width: 100%;
|
||
height: 40vh; /* 关键修改：高度设为视口高度的50% */
|
||
padding: 15px 30px;
|
||
box-sizing: border-box;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.border-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
/* padding: 20px; */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 16px;
|
||
color: #7cd0ff;
|
||
text-align: center;
|
||
padding-top: 15px;
|
||
font-weight: 500;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.chart {
|
||
width: 100%;
|
||
height: calc(100% - 30px);
|
||
padding: 20px;
|
||
}
|
||
</style> |