forked from dyf/dyf-vue-ui
140 lines
4.9 KiB
Vue
140 lines
4.9 KiB
Vue
<template>
|
||
|
||
<!-- 图表容器，设置宽高 -->
|
||
<div class="vchartPage">
|
||
<div ref="chartRef" class="chartRef"></div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import * as echarts from 'echarts'; // 引入 ECharts
|
||
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
|
||
const echartData = ref<any>({});
|
||
const props = defineProps({
|
||
alarmOverview: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
watch(() => props.alarmOverview, (newVal) => {
|
||
echartData.value = newVal;
|
||
console.log('newVal:', newVal);
|
||
}, { immediate: true, deep: true });
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
if (chartRef.value) {
|
||
const {
|
||
forcedAlarms,
|
||
intrusionImpactAlarms,
|
||
autoAlarms,
|
||
geoFenceAlarms
|
||
} = echartData.value;
|
||
// 初始化 ECharts 实例
|
||
const myChart = echarts.init(chartRef.value);
|
||
// 配置图表参数
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis', // 触发方式：坐标轴触发
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
top: '15%',
|
||
containLabel: true, // 网格包含坐标轴标签
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: '#DEEFFF', // X 轴文字颜色
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#1e3a8a', // Y 轴线颜色
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: '#DEEFFF', // Y 轴标签文字颜色
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
|
||
type: 'dashed', // 分割线为虚线
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '报警次数',
|
||
type: 'bar',
|
||
data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
|
||
barWidth: '20px', // 柱子宽度
|
||
// 为不同柱子设置渐变色
|
||
itemStyle: {
|
||
color: function (params: any) {
|
||
const colorList = [
|
||
// 强制报警：蓝色渐变
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0F3352' },
|
||
{ offset: 1, color: '#00A8FF' },
|
||
]),
|
||
// 撞击闯入：黄色渐变
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0F3352' },
|
||
{ offset: 1, color: '#E4B90C' },
|
||
]),
|
||
// 自动报警：青蓝渐变
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0F3352' },
|
||
{ offset: 1, color: '#15DBCB' },
|
||
]),
|
||
// 电子围栏告警：红色渐变
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0F3352' },
|
||
{ offset: 1, color: '#F00C0C' },
|
||
]),
|
||
];
|
||
return colorList[params.dataIndex];
|
||
},
|
||
borderRadius: 4
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
// 将配置项设置到图表实例
|
||
myChart.setOption(option);
|
||
|
||
// 窗口resize时，图表自适应
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
}, 200)
|
||
|
||
|
||
});
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.vchartPage {
|
||
margin-top:4.8vh;
|
||
}
|
||
|
||
.chartRef {
|
||
width: 100%;
|
||
height: 24.5vh;
|
||
}
|
||
</style> |