From 41711b174f978a0f9ff58331c268e70e4c15aa06 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 2 Feb 2022 18:17:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/config.ts           |  8 +--
 .../Charts/Bars/BarCommon/index.vue           | 11 +---
 .../Charts/Bars/BarCrossrange/config.ts       |  5 +-
 .../Charts/Bars/BarCrossrange/index.vue       |  9 +--
 .../Charts/Lines/LineCommon/config.ts         | 37 +++++++++++
 .../Charts/Lines/LineCommon/config.vue        |  7 ++
 .../Charts/Lines/LineCommon/index.vue         | 37 +++++++++--
 .../Charts/Pies/PieCommon/config.ts           | 65 +++++++++++++++++++
 .../Charts/Pies/PieCommon/config.vue          |  7 ++
 .../components/Charts/Pies/PieCommon/index.ts |  2 +-
 .../Charts/Pies/PieCommon/index.vue           | 37 +++++++++--
 src/packages/index.d.ts                       |  2 +-
 src/packages/utils/chart.ts                   |  8 +++
 src/packages/utils/index.ts                   |  1 +
 14 files changed, 200 insertions(+), 36 deletions(-)
 create mode 100644 src/packages/components/Charts/Lines/LineCommon/config.ts
 create mode 100644 src/packages/components/Charts/Lines/LineCommon/config.vue
 create mode 100644 src/packages/components/Charts/Pies/PieCommon/config.ts
 create mode 100644 src/packages/components/Charts/Pies/PieCommon/config.vue
 create mode 100644 src/packages/utils/chart.ts
 create mode 100644 src/packages/utils/index.ts

diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index 15bb9b6f..2bf4feb6 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -1,4 +1,5 @@
 import { getUUID } from '@/utils'
+import { echartOptionProfixHandle } from '@/packages/utils/chart'
 import { BarCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
@@ -12,8 +13,7 @@ export default class Config implements CreateComponentType {
   public attr = { x: 0, y: 0, w: 500, h: 300 }
 
   // 图表配置项
-  public config = {
-    backgroundColor: 'rgba(0,0,0,0)',
+  public option = echartOptionProfixHandle({
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -33,11 +33,11 @@ export default class Config implements CreateComponentType {
         type: 'bar'
       }
     ]
-  }
+  })
 
   // 设置坐标
   public setPosition(x: number, y: number): void {
     this.attr.x = x
     this.attr.y = y
   }
-}
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index e3773fb9..d9154456 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-chart theme="dark" :option="option" autoresize />
+  <VChart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
-import { computed, toRef, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -31,11 +31,6 @@ use([
 ])
 
 const option = computed(() => {
-  return props.chartData.config
+  return props.chartData.option
 })
-
-const attr = toRef(props.chartData, 'attr')
-
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index f1333095..f3f76efe 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -1,4 +1,5 @@
 import { getUUID } from '@/utils'
+import { echartOptionProfixHandle } from '@/packages/utils/chart'
 import { BarCrossrangefig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
@@ -12,7 +13,7 @@ export default class Config implements CreateComponentType {
   public attr = { x: 0, y: 0, w: 500, h: 300 }
 
   // 图表配置项
-  public config = {
+  public option = echartOptionProfixHandle({
     backgroundColor: 'rgba(0,0,0,0)',
     tooltip: {
       trigger: 'axis',
@@ -33,7 +34,7 @@ export default class Config implements CreateComponentType {
         type: 'bar'
       }
     ]
-  }
+  })
 
   // 设置坐标
   public setPosition(x: number, y: number): void {
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index e3773fb9..e520cd5c 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-chart theme="dark" :option="option" autoresize />
+  <VChart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
-import { computed, toRef, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -31,11 +31,8 @@ use([
 ])
 
 const option = computed(() => {
-  return props.chartData.config
+  return props.chartData.option
 })
-
-const attr = toRef(props.chartData, 'attr')
-
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
new file mode 100644
index 00000000..d1af1821
--- /dev/null
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -0,0 +1,37 @@
+import { getUUID } from '@/utils'
+import { echartOptionProfixHandle } from '@/packages/utils/chart'
+import { LineCommonConfig } 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 = LineCommonConfig.key
+
+  public chartData: Exclude<ConfigType, ['node']> = omit(LineCommonConfig, ['node'])
+
+  public attr = { x: 0, y: 0, w: 500, h: 300 }
+
+  // 图表配置项
+  public option = echartOptionProfixHandle({
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'line'
+      }
+    ]
+  })
+
+  // 设置坐标
+  public setPosition(x: number, y: number): void {
+    this.attr.x = x
+    this.attr.y = y
+  }
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
new file mode 100644
index 00000000..3e3b929c
--- /dev/null
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 850cdeef..23c18fae 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -1,13 +1,36 @@
 <template>
-  <div>
-    line组件渲染
-  </div>
+  <VChart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } 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,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+])
+
+const option = computed(() => {
+  return props.chartData.option
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
new file mode 100644
index 00000000..48bc07c6
--- /dev/null
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -0,0 +1,65 @@
+import { getUUID } from '@/utils'
+import { echartOptionProfixHandle } from '@/packages/utils/chart'
+import { PieCommonConfig } 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 = PieCommonConfig.key
+
+  public chartData: Exclude<ConfigType, ['node']> = omit(PieCommonConfig, ['node'])
+
+  public attr = { x: 0, y: 0, w: 500, h: 300 }
+
+  // 图表配置项
+  public option = echartOptionProfixHandle({
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '5%',
+      left: 'center'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ]
+      }
+    ]
+  })
+
+  // 设置坐标
+  public setPosition(x: number, y: number): void {
+    this.attr.x = x
+    this.attr.y = y
+  }
+}
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue
new file mode 100644
index 00000000..3e3b929c
--- /dev/null
+++ b/src/packages/components/Charts/Pies/PieCommon/config.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.ts b/src/packages/components/Charts/Pies/PieCommon/index.ts
index feee1e4d..5e9c49d8 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/index.ts
@@ -5,7 +5,7 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PieCommonConfig: ConfigType = {
   key: 'VPieCommon',
-  title: '计量图',
+  title: '饼图',
   category: ChatCategoryEnum.PIE,
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index e15fdb68..ee92e30f 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -1,13 +1,36 @@
 <template>
-  <div>
-    饼图渲染
-  </div>
+  <VChart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } 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,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+])
+
+const option = computed(() => {
+  return props.chartData.option
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index d0e514d4..03f000e3 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -18,7 +18,7 @@ export interface CreateComponentType {
   key: string
   attr: { x: number; y: number; w: number; h: number }
   chartData: ConfigType
-  config: object
+  option: object
   setPosition: Function
 }
 
diff --git a/src/packages/utils/chart.ts b/src/packages/utils/chart.ts
new file mode 100644
index 00000000..9e9c72a2
--- /dev/null
+++ b/src/packages/utils/chart.ts
@@ -0,0 +1,8 @@
+/**
+ * * ECharts option 统一前置处理
+ * @param option
+ */
+export const echartOptionProfixHandle = (option: any) => {
+  option['backgroundColor'] = 'rgba(0,0,0,0)'
+  return option
+}
diff --git a/src/packages/utils/index.ts b/src/packages/utils/index.ts
new file mode 100644
index 00000000..e852bd1b
--- /dev/null
+++ b/src/packages/utils/index.ts
@@ -0,0 +1 @@
+export * from '@/packages/utils/chart'