Pre Merge pull request !23 from 王志强/master

src/packages/components/Charts/Gauges/GaugeRing/config.ts

@@ -0,0 +1,69 @@
+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: {
+          color:'#3263ec'
+        }
+      },
+      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: '#3263ec',
+        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,[])
+}

src/packages/components/Charts/Gauges/GaugeRing/config.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- 遍历 seriesList -->
+  <CollapseItem :name="`圆环`" :expanded="true">
+    <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="字体大小">
+        <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>
+
+<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>

src/packages/components/Charts/Gauges/GaugeRing/data.json

@@ -0,0 +1,6 @@
+{
+  "dimensions": ["data"],
+  "source": [
+    { "data":80 }
+  ]
+}

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
+}

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>

src/packages/components/Charts/Gauges/index.ts

@@ -0,0 +1,3 @@
+import { GaugeRingConfig } from './GaugeRing/index'
+
+export default [GaugeRingConfig]

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 = '更多'

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]