项目创建

2025-07-04 17:16:38 +08:00
parent ce47b39fa5
commit 719911918f
372 changed files with 105035 additions and 32 deletions
@@ -0,0 +1,101 @@
+<template>
+  <div ref="chartRef" class="bar-chart" :style="{ height: props.height }"></div>
+</template>
+
+<script setup lang="ts">
+  import { useChartOps, useChart } from '@/composables/useChart'
+  import { getCssVar } from '@/utils/ui'
+  import { EChartsOption } from 'echarts'
+  import * as echarts from 'echarts'
+
+  const {
+    chartRef,
+    isDark,
+    initChart,
+    getAxisLineStyle,
+    getAxisLabelStyle,
+    getAxisTickStyle,
+    getSplitLineStyle
+  } = useChart()
+
+  interface Props {
+    data?: number[]
+    xAxisData?: string[]
+    color?: string
+    height?: string
+    barWidth?: string | number
+    showAxisLabel?: boolean
+    showAxisLine?: boolean
+    showSplitLine?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [0, 0, 0, 0, 0, 0, 0],
+    xAxisData: () => [],
+    color: '',
+    height: useChartOps().chartHeight,
+    barWidth: '40%',
+    showAxisLabel: true,
+    showAxisLine: true,
+    showSplitLine: true
+  })
+
+  const options: () => EChartsOption = () => {
+    const computedColor =
+      props.color ||
+      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: getCssVar('--el-color-primary-light-4')
+        },
+        {
+          offset: 1,
+          color: getCssVar('--el-color-primary')
+        }
+      ])
+
+    return {
+      grid: {
+        top: 15,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'item'
+      },
+      xAxis: {
+        type: 'category',
+        data: props.xAxisData,
+        axisTick: getAxisTickStyle(),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisLabel: getAxisLabelStyle(props.showAxisLabel)
+      },
+      yAxis: {
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        splitLine: getSplitLineStyle(props.showSplitLine)
+      },
+      series: [
+        {
+          data: props.data,
+          type: 'bar',
+          itemStyle: {
+            borderRadius: 4,
+            color: computedColor
+          },
+          barWidth: props.barWidth
+        }
+      ]
+    }
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>