<template>
|
<el-tabs v-model="tabActive" class="demo-tabs" @tab-change="handleTabChange">
|
<el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
|
</el-tabs>
|
<div class="echarts">
|
<ECharts :option="option" />
|
</div>
|
</template>
|
|
<script setup lang="ts" name="cure">
|
import { ECOption } from "@/components/ECharts/config";
|
import ECharts from "@/components/ECharts/index.vue";
|
import { ref, onMounted, computed } from "vue";
|
import { useI18n } from "vue-i18n";
|
import { FindDayWarningCount } from "@/api/modules/hxzk/count/count";
|
|
const { t } = useI18n();
|
const loading = ref(false);
|
const tabActive = ref(1);
|
|
// 使用计算属性来获取翻译后的标签
|
const tab = computed(() => [
|
{ label: t("curve.last7Days"), name: 1 },
|
{ label: t("curve.lastMonth"), name: 2 },
|
{ label: t("curve.last3Months"), name: 3 },
|
{ label: t("curve.lastHalfYear"), name: 4 },
|
{ label: t("curve.lastYear"), name: 5 }
|
]);
|
|
// 将对象格式的数据转换为ECharts需要的格式
|
const transformData = (data: Record<string, number>) => {
|
return Object.entries(data).map(([spotName, value]) => ({
|
spotName,
|
value
|
}));
|
};
|
|
const option = ref<ECOption>({
|
xAxis: { type: "category", data: [] },
|
yAxis: { type: "value" },
|
series: [{ type: "bar", data: [] }]
|
});
|
|
// 获取数据的方法
|
const fetchData = async (timeRange: number) => {
|
try {
|
loading.value = true;
|
const params = {
|
time: timeRange
|
};
|
const res = await FindDayWarningCount(params);
|
|
// 转换数据格式
|
const transformedData = transformData(res || {});
|
console.log(transformedData);
|
updateChartOption(transformedData);
|
} catch (error) {
|
console.error(t("curve.fetchDataError"), error);
|
updateChartOption([]); // 出错时传入空数组
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 更新图表配置的方法
|
const updateChartOption = (data: Array<{ spotName: string; value: number }>) => {
|
option.value = {
|
tooltip: {
|
trigger: "axis",
|
backgroundColor: "transparent",
|
axisPointer: {
|
type: "none"
|
},
|
padding: 0,
|
formatter: (p: any) => {
|
let dom = `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
|
color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
|
<div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>${t("curve.platform")} : ${p[0].name}</div>
|
<div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>${t("curve.dataVolume")} : ${p[0].value}</div>
|
</div>`;
|
return dom;
|
}
|
},
|
toolbox: {
|
show: true,
|
orient: "horizontal"
|
},
|
grid: {
|
left: "0",
|
right: "0"
|
},
|
dataZoom: [
|
{
|
show: false,
|
height: 10,
|
xAxisIndex: [0],
|
bottom: 0,
|
startValue: 0,
|
endValue: 9,
|
handleStyle: {
|
color: "#6b9dfe"
|
},
|
textStyle: {
|
color: "transparent"
|
}
|
},
|
{
|
type: "inside",
|
show: true,
|
height: 0,
|
zoomLock: true
|
}
|
],
|
xAxis: [
|
{
|
type: "category",
|
data: data.map(item => item.spotName),
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
margin: 20,
|
interval: 0,
|
color: "#a1a1a1",
|
fontSize: 14,
|
formatter: function (name: string) {
|
return name.length > 8 ? name.slice(0, 8) + "..." : name;
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#c0c0c0"
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
min: 0,
|
axisLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: "#c0c0c0"
|
}
|
},
|
axisLabel: {
|
color: "#a1a1a1",
|
fontSize: 16,
|
fontWeight: 400,
|
formatter: function (value: number) {
|
if (value === 0) {
|
return value + "";
|
} else if (value >= 10000) {
|
return value / 10000 + "w";
|
}
|
return value + "";
|
}
|
}
|
}
|
],
|
series: [
|
{
|
name: "Direct",
|
type: "bar",
|
data: data.map(item => item.value),
|
barWidth: "45px",
|
itemStyle: {
|
color: "#C5D8FF",
|
borderRadius: [12, 12, 0, 0]
|
},
|
emphasis: {
|
itemStyle: {
|
color: "#6B9DFE"
|
}
|
}
|
}
|
]
|
};
|
};
|
|
// 标签切换事件处理
|
const handleTabChange = (name: number) => {
|
fetchData(name);
|
};
|
|
// 初始化时加载数据
|
onMounted(() => {
|
fetchData(tabActive.value);
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.echarts {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
