LNYD_Web/src/views/project/details/components/BarDetail.vue

<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme
});
const props = defineProps({
  barInfo: {
    type: Object
  }
});

const barData = ref({ ...props.barInfo });

setOptions(
  {
    title: {
      text: "缺陷监测数据",
      left: "left",
      textStyle: {
        fontSize: 14,
        color: "#333"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      bottom: "30px",
      right: "30px",
      left: "40px"
    },
    // legend: {
    //   //@ts-expect-error
    //   right: true,
    //   // data: ["star"]
    //   // data: ["watchers", "fork", "star"]
    // },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          color: "#333"
          // width: "70",
          // overflow: "truncate"
        },
        data: ["10.15", "10.16", "10.17", "10.18", "10.19"],
        triggerEvent: true
      }
    ],
    yAxis: [
      {
        type: "value",
        triggerEvent: true,
        axisLabel: {
          //y轴字体
          color: "#333"
        }
      },
      {
        type: "value",

        splitLine: {
          //分割线配置
          show: false
        },
        triggerEvent: true,
        axisLabel: {
          //y轴字体
          color: "#333"
        }
      }
    ],
    series: [
      // {
      //   name: "watchers",
      //   type: "bar",
      //   barWidth: "10%",
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "#e6a23c"
      //       },
      //       {
      //         offset: 1,
      //         color: "#eebe77"
      //       }
      //     ])
      //   },
      //   data: [200, 320, 800]
      // },
      // {
      //   name: "fork",
      //   type: "bar",
      //   barWidth: "15%",
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "#f56c6c"
      //       },
      //       {
      //         offset: 1,
      //         color: "#f89898"
      //       }
      //     ])
      //   },
      //   data: [1600, 2460, 4500]
      // },
      {
        name: "已检出",
        type: "bar",
        barWidth: "30%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#F7B303"
            },
            {
              offset: 1,
              color: "#F7B303"
            }
          ])
        },
        data: barData.value.barList
      },
      {
        //折线(右边数据)
        name: "缺陷检出",
        type: "line",
        yAxisIndex: 1,
        data: barData.value.lineList,
        itemStyle: {
          //折线颜色
          color: "#0246F6"
        }
      }
    ],
    addTooltip: true
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="barChartRef" style="width: 100%; height: 35vh" />
</template>