161 lines
3.8 KiB
Vue
161 lines
3.8 KiB
Vue
<template>
|
|
<div class="g3-bar">
|
|
<el-card style="width: 100%; border: 0px" shadow="never">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div>{{ props.item.b_name }}</div>
|
|
</div>
|
|
</template>
|
|
<div style="background-color: #fff; height: 336px">
|
|
<G3Echarts v-if="option" :option="option" style="height: 330px" />
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import G3Echarts from "../g3-echarts.vue";
|
|
import { useUserStore } from "@/store/user";
|
|
import { loadDataBySqlApi } from "@/request/api";
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const option = ref(null);
|
|
const update_datetime = ref("");
|
|
|
|
const props = defineProps({
|
|
item: Object,
|
|
});
|
|
|
|
const loadChartData = async (item) => {
|
|
if (!item) return;
|
|
|
|
update_datetime.value = item.b_update_datetime;
|
|
|
|
let seriesData = [];
|
|
const b_graph_name = item.b_graph_name;
|
|
|
|
const b_graph_x = item.b_graph_x.split(",").map((m) => {
|
|
const date = new Date();
|
|
date.setMonth(date.getMonth() - Number(m));
|
|
return `${date.getFullYear()}-${date.getMonth() + 1}月`;
|
|
});
|
|
|
|
// 数据来源
|
|
if (item.b_result) {
|
|
seriesData = item.b_result.split(",").map(Number);
|
|
} else {
|
|
const sqlQuery = item.b_polyline.replace(/:b_inputuser_id/g, `'${userStore.userInfo.userid}'`);
|
|
const res = await loadDataBySqlApi(sqlQuery);
|
|
if (res.success && res.data.length > 0) {
|
|
seriesData = Object.values(res.records[0]);
|
|
}
|
|
}
|
|
|
|
option.value = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
top: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
boundaryGap: [0, 0.01],
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
data: b_graph_x, // Your categories
|
|
axisLine: {
|
|
show: true, // Show or hide the axis line
|
|
lineStyle: {
|
|
color: "#dcdcdc", // Color of the axis line
|
|
width: 1, // Width of the axis line
|
|
type: "solid", // Style of the axis line (solid, dashed, dotted)
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false, // Hide the ticks if not needed
|
|
},
|
|
axisLabel: {
|
|
show: true, // Show axis labels
|
|
textStyle: {
|
|
color: "#333", // Font color
|
|
fontSize: 12, // Font size
|
|
fontFamily: "Arial", // Font family
|
|
fontWeight: "normal", // Font weight
|
|
},
|
|
interval: 0,
|
|
margin: 15,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
//name: b_graph_name,
|
|
type: "bar",
|
|
data: seriesData,
|
|
label: {
|
|
show: true, // 显示标签
|
|
position: "right", // 标签位置
|
|
// 可以通过 formatter 自定义显示格式
|
|
formatter: "{c}", // {c} 表示数据值
|
|
},
|
|
barCategoryGap: "60%",
|
|
itemStyle: {
|
|
color: function (params) {
|
|
var colors = [
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#1990ff",
|
|
"#48bfe3",
|
|
"#ff904d",
|
|
"#fc619d",
|
|
]; // Define your custom colors here
|
|
return colors[params.dataIndex]; // Use dataIndex to assign a color to each bar
|
|
},
|
|
borderRadius: [25, 25, 25, 25],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
watch(
|
|
() => props.item?.b_id,
|
|
() => {
|
|
loadChartData(props.item);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.g3-bar {
|
|
width: 50%;
|
|
height: 394px;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
:deep(.el-card__header) {
|
|
padding: 13px 20px 13px 20px;
|
|
}
|
|
.g3-refresh {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|