From d63100938e027fc1e8333a16e95ddd251e06e0ed Mon Sep 17 00:00:00 2001
From: wangzhiqiang <wangzhiqiang@qq.com>
Date: Thu, 23 Jun 2022 16:36:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Gauges/GaugeRing/config.ts         | 70 +++++++++++++++++++
 .../Charts/Gauges/GaugeRing/config.vue        | 69 ++++++++++++++++++
 .../Charts/Gauges/GaugeRing/data.json         |  6 ++
 .../Charts/Gauges/GaugeRing/index.ts          | 14 ++++
 .../Charts/Gauges/GaugeRing/index.vue         | 64 +++++++++++++++++
 .../components/Charts/Gauges/index.ts         |  3 +
 src/packages/components/Charts/index.d.ts     |  4 +-
 src/packages/components/Charts/index.ts       |  3 +-
 8 files changed, 231 insertions(+), 2 deletions(-)
 create mode 100644 src/packages/components/Charts/Gauges/GaugeRing/config.ts
 create mode 100644 src/packages/components/Charts/Gauges/GaugeRing/config.vue
 create mode 100644 src/packages/components/Charts/Gauges/GaugeRing/data.json
 create mode 100644 src/packages/components/Charts/Gauges/GaugeRing/index.ts
 create mode 100644 src/packages/components/Charts/Gauges/GaugeRing/index.vue
 create mode 100644 src/packages/components/Charts/Gauges/index.ts

diff --git a/src/packages/components/Charts/Gauges/GaugeRing/config.ts b/src/packages/components/Charts/Gauges/GaugeRing/config.ts
new file mode 100644
index 00000000..fd751eff
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/GaugeRing/config.ts
@@ -0,0 +1,70 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { GaugeRingConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
+
+const option = {
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      pointer: {
+        show: false
+      },
+      progress: {
+        show: true,
+        overlap: false,
+        roundCap: true,
+        clip: false,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: '#464646'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          width: 40
+        }
+      },
+      splitLine: {
+        show: false,
+        distance: 0,
+        length: 10
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false,
+        distance: 50
+      },
+      title: {
+        fontSize: 14,
+        offsetCenter: ['0%', '-10%']
+      },
+      detail: {
+        width: 50,
+        height: 14,
+        fontSize: 20,
+        color: 'auto',
+        borderColor: 'auto',
+        borderRadius: 20,
+        borderWidth: 0,
+        formatter: '{value}%',
+        valueAnimation: true,
+        offsetCenter: ['0%', '0%']
+      }
+    }
+  ]
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = GaugeRingConfig.key
+
+  public chartConfig = GaugeRingConfig
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option,[])
+}
diff --git a/src/packages/components/Charts/Gauges/GaugeRing/config.vue b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
new file mode 100644
index 00000000..369baa9d
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
@@ -0,0 +1,69 @@
+<template>
+  <!-- 遍历 seriesList -->
+  <CollapseItem :name="`圆环`" :expanded="true">
+    <!-- <SettingItemBox name="数据样式">
+      <SettingItem :name="item.name+'字体大小'" v-for="(item,index) in config.title" :key="index">
+        <n-input-number v-model:value="item.textStyle.fontSize" :min="10" :step="1" size="small" placeholder="数值">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem :name="item.name+'字体宽度'" v-for="(item,index) in config.title" :key="index">
+        <n-input-number v-model:value="item.textStyle.fontWeight" :min="100" :step="100" size="small" placeholder="数值">
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="进度条">
+      <SettingItem name="前景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[0].itemStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[0].backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="外边框">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[1].itemStyle.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内边框">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[2].itemStyle.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox> -->
+    
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/cartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  return props.optionData
+})
+</script>
diff --git a/src/packages/components/Charts/Gauges/GaugeRing/data.json b/src/packages/components/Charts/Gauges/GaugeRing/data.json
new file mode 100644
index 00000000..fd313c8d
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/GaugeRing/data.json
@@ -0,0 +1,6 @@
+{
+  "dimensions": ["data"],
+  "source": [
+    { "data":80 }
+  ]
+}
diff --git a/src/packages/components/Charts/Gauges/GaugeRing/index.ts b/src/packages/components/Charts/Gauges/GaugeRing/index.ts
new file mode 100644
index 00000000..0d75f7c9
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/GaugeRing/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/charts/pie-circle.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GaugeRingConfig: ConfigType = {
+  key: 'GaugeRing',
+  chartKey: 'VGaugeRing',
+  conKey: 'VCGaugeRing',
+  title: '仪表盘-圆环',
+  category: ChatCategoryEnum.GAUGE,
+  categoryName: ChatCategoryEnumName.GAUGE,
+  package: PackagesCategoryEnum.CHARTS,
+  image
+}
diff --git a/src/packages/components/Charts/Gauges/GaugeRing/index.vue b/src/packages/components/Charts/Gauges/GaugeRing/index.vue
new file mode 100644
index 00000000..74ed3fa0
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/GaugeRing/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import {PropType, ref, watch} from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GaugeChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+} from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  GaugeChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+])
+
+const option = ref()
+
+watch(
+    () => props.chartConfig.option,
+    (newData) => {
+      console.log('update:'+newData)
+      option.value = newData
+    },
+    {
+      immediate: true
+    }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
+</script>
diff --git a/src/packages/components/Charts/Gauges/index.ts b/src/packages/components/Charts/Gauges/index.ts
new file mode 100644
index 00000000..f1d26b2b
--- /dev/null
+++ b/src/packages/components/Charts/Gauges/index.ts
@@ -0,0 +1,3 @@
+import { GaugeRingConfig } from './GaugeRing/index'
+
+export default [GaugeRingConfig]
\ No newline at end of file
diff --git a/src/packages/components/Charts/index.d.ts b/src/packages/components/Charts/index.d.ts
index e593ee5c..3a1d49a4 100644
--- a/src/packages/components/Charts/index.d.ts
+++ b/src/packages/components/Charts/index.d.ts
@@ -1,14 +1,16 @@
 export enum ChatCategoryEnum {
   BAR = 'Bars',
   PIE = 'Pies',
+  GAUGE = 'Gauges',
   LINE = 'Lines',
   MAP = 'Maps',
-  MORE = 'Mores'
+  MORE = 'Mores',
 }
 
 export enum ChatCategoryEnumName {
   BAR = '柱状图',
   PIE = '饼图',
+  GAUGE = '仪表盘',
   LINE = '折线图',
   MAP = '地图',
   MORE = '更多'
diff --git a/src/packages/components/Charts/index.ts b/src/packages/components/Charts/index.ts
index 2dd3e54b..fc924d6f 100644
--- a/src/packages/components/Charts/index.ts
+++ b/src/packages/components/Charts/index.ts
@@ -1,7 +1,8 @@
 import Bars from './Bars'
 import Pies from './Pies'
+import Gauges from './Gauges'
 import Lines from './Lines'
 import Mores from './Mores'
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Pies, ...Lines, ...Maps, ...Mores]
+export const ChartList = [...Bars, ...Pies, ...Gauges, ...Lines, ...Maps, ...Mores]

From 7cf6eda3b17b6de4dcee422e4ca138762b1390dc Mon Sep 17 00:00:00 2001
From: wangzhiqiang <wangzhiqiang@qq.com>
Date: Thu, 23 Jun 2022 16:44:56 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Gauges/GaugeRing/config.vue        | 42 +++----------------
 1 file changed, 5 insertions(+), 37 deletions(-)

diff --git a/src/packages/components/Charts/Gauges/GaugeRing/config.vue b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
index 369baa9d..8fff7583 100644
--- a/src/packages/components/Charts/Gauges/GaugeRing/config.vue
+++ b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
@@ -1,48 +1,16 @@
 <template>
   <!-- 遍历 seriesList -->
   <CollapseItem :name="`圆环`" :expanded="true">
-    <!-- <SettingItemBox name="数据样式">
-      <SettingItem :name="item.name+'字体大小'" v-for="(item,index) in config.title" :key="index">
-        <n-input-number v-model:value="item.textStyle.fontSize" :min="10" :step="1" size="small" placeholder="数值">
+    <SettingItemBox name="样式">
+      <SettingItem name="环宽度">
+        <n-input-number v-model:value="config.series[0].axisLine.lineStyle.width" :min="10" :step="1" size="small" placeholder="数值">
         </n-input-number>
       </SettingItem>
-      <SettingItem :name="item.name+'字体宽度'" v-for="(item,index) in config.title" :key="index">
-        <n-input-number v-model:value="item.textStyle.fontWeight" :min="100" :step="100" size="small" placeholder="数值">
+      <SettingItem name="字体大小">
+        <n-input-number v-model:value="config.series[0].detail.fontSize" :min="10" :step="1" size="small" placeholder="数值">
         </n-input-number>
       </SettingItem>
     </SettingItemBox>
-
-    <SettingItemBox name="进度条">
-      <SettingItem name="前景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="config.series[0].itemStyle.color"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="config.series[0].backgroundStyle.color"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="外边框">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="config.series[1].itemStyle.borderColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="内边框">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="config.series[2].itemStyle.borderColor"
-        ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox> -->
-    
   </CollapseItem>
 </template>
 

From dc627a146fc66a0bc1127fe7ef9f16468e8b53cd Mon Sep 17 00:00:00 2001
From: wangzhiqiang <wangzhiqiang@qq.com>
Date: Thu, 23 Jun 2022 17:01:28 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Gauges/GaugeRing/config.ts   |  5 ++---
 .../components/Charts/Gauges/GaugeRing/config.vue  | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/packages/components/Charts/Gauges/GaugeRing/config.ts b/src/packages/components/Charts/Gauges/GaugeRing/config.ts
index fd751eff..6d546675 100644
--- a/src/packages/components/Charts/Gauges/GaugeRing/config.ts
+++ b/src/packages/components/Charts/Gauges/GaugeRing/config.ts
@@ -19,8 +19,7 @@ const option = {
         roundCap: true,
         clip: false,
         itemStyle: {
-          borderWidth: 1,
-          borderColor: '#464646'
+          color:'#3263ec'
         }
       },
       axisLine: {
@@ -48,7 +47,7 @@ const option = {
         width: 50,
         height: 14,
         fontSize: 20,
-        color: 'auto',
+        color: '#3263ec',
         borderColor: 'auto',
         borderRadius: 20,
         borderWidth: 0,
diff --git a/src/packages/components/Charts/Gauges/GaugeRing/config.vue b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
index 8fff7583..15d16082 100644
--- a/src/packages/components/Charts/Gauges/GaugeRing/config.vue
+++ b/src/packages/components/Charts/Gauges/GaugeRing/config.vue
@@ -10,6 +10,20 @@
         <n-input-number v-model:value="config.series[0].detail.fontSize" :min="10" :step="1" size="small" placeholder="数值">
         </n-input-number>
       </SettingItem>
+      <SettingItem name="环颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[0].progress.itemStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.series[0].detail.color"
+        ></n-color-picker>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>