ACS

src/components/Charts/BarChart.vue

@@ -0,0 +1,109 @@
+<template>
+  <BaseEChart :options="chartOptions" v-bind="$attrs" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BaseEChart from './BaseEChart.vue'
+
+defineOptions({
+  name: 'BarChart'
+})
+
+const props = defineProps({
+  // 数据项
+  data: {
+    type: Array,
+    required: true
+  },
+  // x轴数据
+  xAxis: {
+    type: Array,
+    required: true
+  },
+  // 是否显示背景
+  showBackground: {
+    type: Boolean,
+    default: true
+  },
+  // 系列配置
+  series: {
+    type: Array,
+    default: () => []
+  },
+  // 图表标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 柱子宽度
+  barWidth: {
+    type: Number,
+    default: 30
+  }
+})
+
+const chartOptions = computed(() => {
+  const series = props.series.length > 0 ? props.series : [{
+    name: '数值',
+    data: props.data,
+    type: 'bar',
+    barWidth: props.barWidth,
+    showBackground: props.showBackground,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.1)'
+    },
+    itemStyle: {
+      borderRadius: [4, 4, 0, 0]
+    }
+  }]
+
+  return {
+    title: props.title ? {
+      text: props.title,
+      left: 'center',
+      top: 10
+    } : null,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: props.title ? '60px' : '40px',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: props.xAxis,
+      axisLine: {
+        lineStyle: {
+          color: '#E5E7EB'
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#E5E7EB'
+        }
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      }
+    },
+    series
+  }
+})
+</script>