From ccf78c6dd24f93de7e06767ff04b6148092365c6 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 2 Feb 2022 00:46:42 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=A8=AA?=
 =?UTF-8?q?=E5=90=91=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCrossrange/config.ts       | 43 +++++++++++++++++++
 .../Charts/Bars/BarCrossrange/config.vue      |  7 +++
 .../Charts/Bars/BarCrossrange/index.vue       | 40 ++++++++++++++---
 3 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 src/packages/components/Charts/Bars/BarCrossrange/config.ts
 create mode 100644 src/packages/components/Charts/Bars/BarCrossrange/config.vue

diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
new file mode 100644
index 00000000..f1333095
--- /dev/null
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -0,0 +1,43 @@
+import { getUUID } from '@/utils'
+import { BarCrossrangefig } from './index'
+import { ConfigType, CreateComponentType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
+export default class Config implements CreateComponentType {
+  public id: string = getUUID()
+  public key: string = BarCrossrangefig.key
+
+  public chartData: Exclude<ConfigType, ['node']> = omit(BarCrossrangefig, ['node'])
+
+  public attr = { x: 0, y: 0, w: 500, h: 300 }
+
+  // 图表配置项
+  public config = {
+    backgroundColor: 'rgba(0,0,0,0)',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'value',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'category'
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar'
+      }
+    ]
+  }
+
+  // 设置坐标
+  public setPosition(x: number, y: number): void {
+    this.attr.x = x
+    this.attr.y = y
+  }
+}
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
new file mode 100644
index 00000000..3e3b929c
--- /dev/null
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index f3abbb36..e3773fb9 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -1,13 +1,41 @@
 <template>
-  <div>
-    柱状图组件渲染
-  </div>
+  <v-chart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
+import { computed, toRef, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import config from './config'
+
+const props = defineProps({
+  chartData: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  CanvasRenderer,
+  BarChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+])
+
+const option = computed(() => {
+  return props.chartData.config
+})
+
+const attr = toRef(props.chartData, 'attr')
 
 </script>
 
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>