130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
|
<div ref="chartRef" style="width: 100%; height: 100%"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onBeforeUnmount, watch, useTemplateRef } from "vue";
|
|
import * as echarts from "echarts";
|
|
import dayjs from "dayjs";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({
|
|
labels: [],
|
|
values: [],
|
|
}),
|
|
},
|
|
});
|
|
|
|
const chartRef = useTemplateRef("chartRef");
|
|
let chartInstance = null;
|
|
|
|
onMounted(() => {
|
|
chartInstance = echarts.init(chartRef.value);
|
|
chartInstance.setOption(options);
|
|
window.addEventListener("resize", resizeHandler);
|
|
chartInstance.on("click", (params) => {
|
|
if (!params.name) return;
|
|
const _params = {
|
|
swingTimeList: [dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss")],
|
|
personName: params.name,
|
|
isMainFloor: "1",
|
|
};
|
|
console.log(`|点击跳转|-|今日出入机关楼次数排行|-|${params.name}|params:|{${JSON.stringify(_params)}}|`);
|
|
jumpAdminPath("door_record", _params);
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", resizeHandler);
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
chartInstance = null;
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
if (!chartInstance) return;
|
|
chartInstance.setOption({
|
|
yAxis: { data: props.data?.labels ?? [] },
|
|
series: [{ data: props.data?.values ?? [] }],
|
|
});
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const options = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
borderColor: "#000000",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 12,
|
|
},
|
|
padding: 10,
|
|
axisPointer: { type: "shadow" },
|
|
// formatter: (params) => {
|
|
// return `${params[0].value}次`;
|
|
// },
|
|
confine: true,
|
|
},
|
|
backgroundColor: "transparent",
|
|
grid: {
|
|
top: "0%",
|
|
left: "0%",
|
|
right: "4%",
|
|
bottom: "0%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { color: "rgba(255,255,255,0.6)" },
|
|
splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,0.08)" } },
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
data: [],
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { color: "#fff" },
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
data: [],
|
|
barWidth: 14,
|
|
showBackground: true,
|
|
backgroundStyle: { color: "rgba(255,255,255,0.06)" },
|
|
itemStyle: {
|
|
borderRadius: [0, 10, 10, 0],
|
|
color: (params) => {
|
|
const palette = [
|
|
["#F47E3D", "#F4C93D"],
|
|
["#1F4F68", "#2FC6DC"],
|
|
["#1F4F68", "#2FC6DC"],
|
|
["#1F4F68", "#2FC6DC"],
|
|
["#1F4F68", "#2FC6DC"],
|
|
];
|
|
const [c1, c2] = palette[params.dataIndex % palette.length];
|
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
{ offset: 0, color: c2 },
|
|
{ offset: 1, color: c1 },
|
|
]);
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const resizeHandler = () => {
|
|
if (chartInstance) chartInstance.resize();
|
|
};
|
|
</script>
|