Merge branch 'master' of https://gitee.com/MTrun/go-view

# Conflicts:
#	src/packages/components/Decorates/Mores/Number/index.vue

src/packages/components/Charts/Mores/Process/config.ts

@@ -4,9 +4,36 @@ import { ProcessConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
+
+export const types = [
+  {
+    label: '线形',
+    value: 'line'
+  },
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '仪表盘',
+    value: 'dashboard'
+  },
+]
+
+export const indicatorPlacements = [
+  {
+    label: '内部',
+    value: 'inside'
+  },
+  {
+    label: '外部',
+    value: 'outside'
+  }
+]
+
 export const option = {
   dataset: 36,
-  type: "circle",
+  type: types[2].value,
   color: '#4992FFFF',
   // 指标位置（线条时可用）
   indicatorPlacement: "outside"

src/packages/components/Charts/Mores/Process/config.vue

@@ -38,7 +38,7 @@ import {
 } from '@/components/Pages/ChartItemSetting'
 
 // 获取 option 的数据，便于使用 typeof 获取类型
-import { option } from './config'
+import { option, types, indicatorPlacements} from './config'
 
 const props = defineProps({
   optionData: {
@@ -46,30 +46,4 @@ const props = defineProps({
     required: true
   }
 })
-
-const types = [
-  {
-    label: '线形',
-    value: 'line'
-  },
-  {
-    label: '圆形',
-    value: 'circle'
-  },
-  {
-    label: '仪表盘',
-    value: 'dashboard'
-  },
-]
-
-const indicatorPlacements = [
-  {
-    label: '里面',
-    value: 'inside'
-  },
-  {
-    label: '外边',
-    value: 'outside'
-  }
-]
 </script>

src/packages/components/Charts/Mores/Process/index.ts

@@ -13,7 +13,7 @@ export const ProcessConfig: ConfigType = {
   // 配置组件渲染 Components 格式: VC + key
   conKey: 'VCProcess',
   // 名称
-  title: '多类进度条',
+  title: 'NaiveUI-进度',
   // 子分类目录
   category: ChatCategoryEnum.MORE,
   // 子分类目录

src/packages/components/Charts/Mores/WaterPolo/config.ts

@@ -3,6 +3,37 @@ import { CreateComponentType } from '@/packages/index.d'
 import { WaterPoloConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
+export const shapes = [
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '正方形',
+    value: 'rect'
+  },
+  {
+    label: '带圆角的正方形',
+    value: 'roundRect'
+  },
+  {
+    label: '正三角形',
+    value: 'triangle'
+  },
+  {
+    label: '菱形',
+    value: 'diamond'
+  },
+  {
+    label: '水滴',
+    value: 'pin'
+  },
+  {
+    label: '箭头',
+    value: 'arrow'
+  },
+]
+
 export const includes = []
 
 export const option = {
@@ -10,6 +41,7 @@ export const option = {
   series: [
     {
       type: 'liquidFill',
+      shape: shapes[0].value,
       radius: '90%',
       data: [0],
       center: ['50%', '50%'],

src/packages/components/Charts/Mores/WaterPolo/config.vue

@@ -15,19 +15,26 @@
           placeholder="水球数值"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="形状">
+        <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本">
+        <n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+        </n-input-number>
+      </SettingItem>
       <SettingItem name="颜色1">
         <n-color-picker
           size="small"
           :modes="['hex']"
           v-model:value="item.color[0].colorStops[0].color"
-       ></n-color-picker>
+      ></n-color-picker>
       </SettingItem>
       <SettingItem name="颜色2">
         <n-color-picker
           size="small"
           :modes="['hex']"
           v-model:value="item.color[0].colorStops[1].color"
-       ></n-color-picker>
+      ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="背景" :alone="true">
@@ -44,7 +51,7 @@
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import { option } from './config'
+import { option, shapes } from './config'
 import {
   CollapseItem,
   SettingItemBox,

src/packages/components/Charts/Pies/PieCircle/config.ts

@@ -0,0 +1,63 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { PieCircleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+
+export const includes = ['legend']
+const option = {
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  legend: {
+    show: true,
+  },
+  dataset: 0.25,
+  title: {
+    text: 25 + "%",
+    x: "center",
+    y: "center",
+    textStyle: {
+      color: "#56B9F8",
+      fontSize: 30
+    }
+  },
+  series: [
+    {
+      type: "pie",
+      radius: ["75%", "80%"],
+      center: ["50%", "50%"],
+      hoverAnimation: true,
+      color: ["#00bcd44a", "transparent"],
+      label: {
+        show: false
+      },
+      data: [
+        {
+          value: [25],
+          itemStyle: {
+            color: "#03a9f4",
+            shadowBlur: 10,
+            shadowColor:"#97e2f5"
+          }
+        },
+        {
+          value: [75],
+          itemStyle: {
+            color: "#00bcd44a",
+            shadowBlur: 0,
+            shadowColor:"#00bcd44a"
+          }
+        }
+      ]
+    },
+  ]
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = PieCircleConfig.key
+
+  public chartConfig = PieCircleConfig
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Pies/PieCircle/config.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- 遍历 seriesList -->
+  <CollapseItem v-for="(item, index) in config.series" :key="index" :name="`圆环`" :expanded="true">
+    <SettingItemBox name="数据">
+      <SettingItem name="数值">
+        <n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值">
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- Echarts 全局设置 -->
+    <SettingItemBox name="进度条">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[0].itemStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="阴影模糊等级">
+        <n-input-number v-model:value="item.data[0].itemStyle.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[0].itemStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- 中心标题 -->
+    <SettingItemBox v-if="config.title" name="标题">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="config.title.textStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number v-model:value="config.title.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="字体大小">
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- 其他样式 -->
+    <SettingItemBox name="轨道样式">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[1].itemStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="阴影模糊等级">
+        <n-input-number v-model:value="item.data[1].itemStyle.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[1].itemStyle.shadowColor"
+        ></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/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  return props.optionData
+})
+</script>

src/packages/components/Charts/Pies/PieCircle/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 PieCircleConfig: ConfigType = {
+  key: 'PieCircle',
+  chartKey: 'VPieCircle',
+  conKey: 'VCPieCircle',
+  title: '饼图-环形',
+  category: ChatCategoryEnum.PIE,
+  categoryName: ChatCategoryEnumName.PIE,
+  package: PackagesCategoryEnum.CHARTS,
+  image
+}

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import {computed, PropType, reactive, watch} from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } 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,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+])
+
+const option = reactive({
+  value: {}
+})
+
+watch(
+    () => props.chartConfig.option.dataset,
+    (newData) => {
+      // console.log('update:'+newData)
+      const d = parseFloat(`${newData}`) * 100
+      let config = props.chartConfig.option
+      config.title.text = d.toFixed(2) + "%"
+      config.series[0].data[0].value[0] = d
+      config.series[0].data[1].value[0] = 100 - d
+      option.value = mergeTheme(config, props.themeSetting, includes)
+      option.value = config
+    },
+    {
+      immediate: true,
+    }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

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

@@ -1,3 +1,4 @@
 import { PieCommonConfig } from './PieCommon/index'
+import { PieCircleConfig } from './PieCircle/index'
 
-export default [PieCommonConfig]
+export default [PieCommonConfig, PieCircleConfig]

src/packages/components/Decorates/Mores/Number/index.vue

@@ -6,13 +6,8 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation
+      <n-number-animation :from="option.from" :to="option.to" :duration="dur * 1000" :show-separator="showSeparator"
-        :from="from"
+        :precision="precision"></n-number-animation>
-        :to="to"
-        :duration="dur * 1000"
-        :show-separator="showSeparator"
-        :precision="precision"
-      ></n-number-animation>
     </span>
     <template #suffix>
       <span :style="`color:${suffixColor};font-size:${numberSize}px`">
@@ -23,8 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, ref, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
@@ -32,21 +29,44 @@ const props = defineProps({
     required: true,
   },
 })
-
+const option = reactive({
+  from: 0,
+  to: 0,
+})
 const { w, h } = toRefs(props.chartConfig.attr)
-const {
+let {
   dur,
   showSeparator,
   prefixText,
   prefixColor,
   suffixText,
   suffixColor,
-  from,
-  to,
   precision,
   numberSize,
   numberColor,
 } = toRefs(props.chartConfig.option)
+
+const updateNumber = (newData: number) => {
+  // 原来的目标值作为新的数字动画的起始值
+  option.from = option.to
+  option.to = newData
+}
+
+watch(
+  () => props.chartConfig.option.from,
+  () => {
+    option.from = props.chartConfig.option.from
+  }, { immediate: true }
+)
+
+watch(
+  () => props.chartConfig.option.to,
+  () => {
+    option.to = props.chartConfig.option.to
+  }, { immediate: true }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
 </script>
 <style lang="scss" scoped>
 @include go('decorates-number') {