u

code/container-ocr/ocr-vue/src/views/home/components/chart-release-bar.vue

@@ -0,0 +1,160 @@
+<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>