From 62f012f2e9896717dfca7760bd270c28efcdf32c Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Tue, 25 Jan 2022 22:29:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/config.ts           | 29 +++++++++++---
 .../Charts/Bars/BarCommon/index.vue           | 38 ++++++++++++++++---
 src/utils/utils.ts                            |  2 +-
 .../chart/components/ContentEdit/index.vue    |  2 +-
 4 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index 52b4c470..72be61bf 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -2,17 +2,36 @@ import { getUUID } from '@/utils'
 import { BarCommonConfig } from './index'
 
 export default class Config {
-  id: string = getUUID()
-  key: string = BarCommonConfig.key
-  attr = { x: 0, y: 0, w: 500, h: 300 }
+  private id: string = getUUID()
+  private key: string = BarCommonConfig.key
+  public attr = { x: 0, y: 0, w: 500, h: 300 }
 
   // 图表配置项
   public config = {
-    global: {}
+    backgroundColor: 'rgba(0,0,0,0)',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+      },
+    ],
   }
 
   // 设置坐标
-  setPosition(x: number, y: number) {
+  public setPosition(x: number, y: number):void {
     this.attr.x = x
     this.attr.y = y
   }
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index fbd1331d..d47a6ef8 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -1,14 +1,42 @@
 <template>
-  <div>
-    这里是柱状图组件渲染
+  <div :style="wrapperStyle">
+    <v-chart theme="dark" :option="option" autoresize />
   </div>
 </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({
-  chart: {
-    type: Object,
-    require: true
+  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')
+const wrapperStyle = computed(() => {
+  return {
+    width: `${attr.value.w}px`,
+    height: `${attr.value.h}px`,
   }
 })
 </script>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 6f5316f9..014b155b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -7,7 +7,7 @@ import debounce from 'lodash/debounce'
  * * 生成一个不重复的ID
  * @param { Number } randomLength
  */
-export function getUUID(randomLength: number = 10) {
+export function getUUID(randomLength = 10) {
   return Number(
     Math.random().toString().substr(2, randomLength) + Date.now()
   ).toString(36)
diff --git a/src/views/chart/components/ContentEdit/index.vue b/src/views/chart/components/ContentEdit/index.vue
index 8be920d0..f8be08d0 100644
--- a/src/views/chart/components/ContentEdit/index.vue
+++ b/src/views/chart/components/ContentEdit/index.vue
@@ -14,7 +14,7 @@
       <EditRange>
         <!-- 组件名称会重复，必须使用 id -->
         <div v-for="item in chartEditStore.getComponentList" :key="item.id">
-          <component :is="item.key" />
+          <component :is="item.key" :chartData="item"/>
         </div>
       </EditRange>
     </div>