Merge branch 'ft' into 'main_dev'

perf(src/packages): 重写图表里的饼图-环形等组件

See merge request yunteng/thingskit-view!76

@@ -10,11 +10,11 @@ export const useChartInteract = (
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
-  interactEventOn: string
+  interactEventOn: string,
+  status: boolean
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
-  const { selectCurrentItems } = chartConfig.option
   const { selectTargetItems } = chartConfig.option
   const fnOnEvent = interactEvents.filter(item => {
     return item.interactOn === interactEventOn
@@ -32,19 +32,35 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    setJump(selectCurrentItems, selectTargetItems)
+    setTabJump(selectTargetItems)
   })
-  function setJump(selectCurrentItems: string[], selectTargetItems: string[]) {
+  function setTabJump(selectTargetItems: string[]) {
+    /**
+     * 逻辑
+     * 排除按钮组件
+     * 先遍历图表数组，只要是目标项，则认为是联动绑定，新增一个属性是否是联动组件设置为true
+     * 在遍历图表数组，只要是目标项并且是联动组件则显示，否则隐藏
+     */
     try {
+      chartEditStore.componentList.forEach((item: any) => {
+        if (item.key !== 'Button') {
+          if (selectTargetItems.includes(item.id)) {
+            item.isInteractComponent = true
+          }
+        }
+      })
       //优化循环性能
       for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {
         const compId = chartEditStore.componentList[i].id
-        const compItem = chartEditStore.componentList[i]
-        if (selectCurrentItems.includes(compId)) {
-          compItem.status.hide = true
-        }
-        if (selectTargetItems.includes(compId)) {
-          compItem.status.hide = false
+        const compItem = chartEditStore.componentList[i] as any
+        if (status) {
+          if (compItem.key !== 'Button') {
+            if (selectTargetItems.includes(compId) && compItem.isInteractComponent) {
+              compItem.status.hide = false
+            } else if (!selectTargetItems.includes(compId) && compItem.isInteractComponent) {
+              compItem.status.hide = true
+            }
+          }
         }
       }
     } finally {

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideProcessConfig } 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: types[2].value,
+  // 进行时效果
+  processing: true,
+  // 主颜色
+  color: '#4992FFFF',
+  // 轨道颜色
+  railColor: '#3e3e3f', 
+  // 指标
+  unit: '%',
+  // 指标大小
+  indicatorTextSize: 34,
+  // 指标位置（线条时可用）
+  indicatorPlacement: 'outside',
+  // 指标颜色
+  indicatorTextColor: '#FFFFFFFF',
+  // 偏移角度
+  offsetDegree: 0
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideProcessConfig.key
+  public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideProcessConfig)
+  public option = cloneDeep(option)
+}
\ No newline at end of file

+<template>
+  <!-- 默认展开 -->
+  <CollapseItem name="进度条" :expanded="true">
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <!-- 与 config.ts 里的 option 对应 --><!-- n-input-number 是 NaiveUI 的控件 -->
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0" placeholder="进度值"></n-input-number>
+      </SettingItem>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit" size="small"></n-input>
+      </setting-item>
+    </SettingItemBox>
+
+    <SettingItemBox name="轨道">
+      <SettingItem name="形状">
+        <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
+      </SettingItem>
+
+      <!-- 颜色粗细等等... -->
+      <SettingItem name="进度条颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="轨道颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
+      </SettingItem>
+      <setting-item name="偏移角度" v-if="optionData.type !== types[0].value">
+        <n-input-number v-model:value="optionData.offsetDegree" size="small"></n-input-number>
+      </setting-item>
+      <SettingItem v-if="optionData.type == types[0].value">
+        <n-space>
+          <n-switch v-model:value="optionData.processing" size="small" />
+          <n-text>进行时动画</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="指标">
+      <SettingItem name="位置" v-if="optionData.type == types[0].value">
+        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
+      </SettingItem>
+       <setting-item name="文本大小">
+        <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
+      </setting-item>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+// 获取 option 的数据，便于使用 typeof 获取类型
+import { option, types, indicatorPlacements } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+
+
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideProcess', true)
+
+export const OverrideProcessConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义NaiveUI-进度',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'process.png'
+}

+<template>
+  <n-progress
+    :type="type"
+    :height="h"
+    :processing="processing"
+    :percentage="dataset"
+    :indicator-placement="indicatorPlacement"
+    :color="color"
+    :rail-color="railColor"
+    :offset-degree="offsetDegree"
+  >
+    <n-text
+      :style="{
+        color: indicatorTextColor,
+        fontSize: `${indicatorTextSize}px`
+      }"
+    >
+      {{ dataset }} {{ unit }}
+    </n-text>
+  </n-progress>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import config from './config'
+import { toNumber } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+// 取配置数据
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  type,
+  unit,
+  color,
+  processing,
+  railColor,
+  indicatorTextColor,
+  indicatorPlacement,
+  indicatorTextSize,
+  offsetDegree,
+  dataset
+} = toRefs(props.chartConfig.option)
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    try {
+      dataset.value = toNumber(newData, 2)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  dataset.value = toNumber(newData, 2)
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverridePieCircleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+
+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 PublicConfigClass implements CreateComponentType {
+  public key: string = OverridePieCircleConfig.key
+
+  public chartConfig = cloneDeep(OverridePieCircleConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverridePieCircle', true)
+
+export const OverridePieCircleConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义饼图-环形',
+  category: ChatCategoryEnum.PIE,
+  categoryName: ChatCategoryEnumName.PIE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'pie-circle.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+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 { 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
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  const d = parseFloat(`${newData}`) * 100
+  let config = props.chartConfig.option
+  config.title.text = d.toFixed(0) + '%'
+  config.series[0].data[0].value[0] = d
+  config.series[0].data[1].value[0] = 100 - d
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  let d = parseFloat(`${resData}`) * 100
+  // @ts-ignore
+  option.value.title.text = d.toFixed(0) + '%'
+  // @ts-ignore
+  option.value.series[0].data[0].value[0] = d
+  // @ts-ignore
+  option.value.series[0].data[1].value[0] = 100 - d
+})
+</script>

@@ -18,7 +18,6 @@ export const option = {
   buttonColor: '',
   buttonTextColor: 'white',
   buttonTextSize: '16',
-  selectCurrentItems: [],
   selectTargetItems: []
 }
 

@@ -29,42 +29,29 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="true">
+      <setting-item name="按钮文字" :alone="true">
+        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="true">
       <template #name>
-        <n-text>跳转</n-text>
+        <n-text>目标</n-text>
         <n-tooltip trigger="hover">
           <template #trigger>
             <n-icon size="21" :depth="3">
               <help-outline-icon></help-outline-icon>
             </n-icon>
           </template>
-          <span class="help-span">{{ threeFileHelpMessgae }}</span>
+          <span class="help-span">{{ targetHelpMessgae }}</span>
         </n-tooltip>
       </template>
-      <setting-item name="按钮文字" :alone="true">
-        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="当前项">
-      <setting-item name="当前项" :alone="true">
-        <n-select
-          placeholder="请选择当前项"
-          multiple
-          size="small"
-          v-model:value="optionData.selectCurrentItems"
-          :options="selectCurrentItemOptions"
-        />
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="目标项">
-      <setting-item name="目标项" :alone="true">
-        <n-select
-          placeholder="请选择目标项"
-          multiple
-          size="small"
-          v-model:value="optionData.selectTargetItems"
-          :options="selectTargetItemOptions"
-        />
-      </setting-item>
+      <n-select
+        style="width: 13.5vw"
+        placeholder="请选择目标项"
+        multiple
+        v-model:value="optionData.selectTargetItems"
+        :options="selectTargetItemOptions"
+      />
     </setting-item-box>
   </collapse-item>
 </template>
@@ -87,7 +74,7 @@ const chartEditStore = useChartEditStore()
 
 const { HelpOutlineIcon } = icon.ionicons5
 
-const threeFileHelpMessgae = ref(`勾选当前项和跳转的目标项`)
+const targetHelpMessgae = ref(`勾选目标项,支持多个`)
 
 const buttonTypeOptions = [
   {
@@ -120,8 +107,6 @@ const buttonTypeOptions = [
   }
 ]
 
-const selectCurrentItemOptions = ref<{ label: string; value: string }[]>([])
-
 const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
 
 onMounted(() => {
@@ -129,7 +114,6 @@ onMounted(() => {
     label: item.chartConfig?.title,
     value: item.id
   }))
-  selectCurrentItemOptions.value = componentList
   selectTargetItemOptions.value = componentList
 })
 </script>

@@ -5,7 +5,7 @@
     :dashed="buttonDashed"
     :ghost="buttonGhost"
     :color="buttonColor"
-    @click="onClick(option.value.dataset)"
+    @click="onClick(option.value.selectTargetItems, true)"
   >
     <span class="button-text-color">{{ dataset }}</span>
   </n-button>
@@ -28,24 +28,27 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+
 const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs(
   props.chartConfig.option
 )
+
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
 })
 
-const onClick = (v: any) => {
+const onClick = (v: any, status: boolean) => {
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
     { [ComponentInteractParamsEnum.DATA]: v },
-    InteractEventOn.CHANGE
+    InteractEventOn.CHANGE,
+    status
   )
 }
 
 onMounted(() => {
-  onClick(option.value.dataset)
+  onClick(option.value.selectTargetItems, false)
 })
 
 // 手动更新

@@ -17,11 +17,13 @@ export const option = {
     textColor: 'black',
     textBackgroundColor: 'white',
     textBackgroundColorAlpha: 1,
-    iconColor:'black',
+    iconColor: 'black',
     //弹出下拉框
     textSelectModalBackgroundColor: 'white',
     textSelectModalTextColor: 'black'
-  }
+  },
+  //是否开启前一周
+  openLastWeek: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -6,9 +6,19 @@
   </collapse-item>
 
   <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="近一周">
+      <setting-item>
+        <n-switch @change="handleChange" v-model:value="optionData.openLastWeek" size="small"></n-switch>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="基础">
       <setting-item name="类型">
-        <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
+        <n-select
+          @change="handleSelect"
+          v-model:value="optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
       </setting-item>
     </setting-item-box>
 
@@ -159,4 +169,12 @@ const datePickerTypeOptions = [
     value: ComponentInteractEventEnum.QUARTER_RANGE
   }
 ]
+const handleChange = (value: boolean) => {
+  if (!value) return
+  const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000
+  const lastWeekStart = new Date().getTime()
+  props.optionData.dataset = [lastWeekEnd, lastWeekStart] as any
+}
+
+const handleSelect = (value: string) => (props.optionData.openLastWeek = false)
 </script>

@@ -79,6 +79,21 @@ watch(
     immediate: true
   }
 )
+
+watch(
+  () => props.chartConfig.option.openLastWeek,
+  newData => {
+    if (!newData) return
+    const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000
+    const lastWeekStart = new Date().getTime()
+    props.chartConfig.option.componentInteractEventKey = 'daterange'
+    option.dataset = [lastWeekEnd, lastWeekStart]
+    onChange(option.dataset)
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -98,8 +113,8 @@ watch(
   .n-base-icon {
     color: v-bind('iconColor') !important;
   }
-  .n-date-panel{
-    background: v-bind('textSelectModalBackgroundColor') !important;;
+  .n-date-panel {
+    background: v-bind('textSelectModalBackgroundColor') !important;
   }
 }
 </style>

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { OverrideTextCommonConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export enum WritingModeEnum {
   HORIZONTAL = '水平',
@@ -50,6 +51,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideTextCommonConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 40, zIndex: -1 }
   public chartConfig = cloneDeep(OverrideTextCommonConfig)
   public option = cloneDeep(option)
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTextBarrageConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const option = {
+  dataset: '让数字化看得见',
+  fontSize: 32,
+  fontColor: '#ffffff',
+  fontWeight: 'normal',
+  // 字间距
+  letterSpacing: 5,
+  //阴影
+  showShadow:  true,
+  boxShadow: 'none',
+  hShadow: 0,
+  vShadow: 0,
+  blurShadow: 8,
+  colorShadow: '#0075ff',
+  //动画
+  animationTime: 0,
+  animationSpeed: 50,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTextBarrageConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTextBarrageConfig)
+  public option = cloneDeep(option)
+  public preview = { overFlowHidden: true } 
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="阴影">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showShadow" size="small" />
+          <n-text>展示阴影</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
+      ></setting-item>
+      <setting-item name="x">
+        <n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
+      ></setting-item>
+      <setting-item name="y">
+        <n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
+      ></setting-item>
+      <setting-item name="模糊">
+        <n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
+      ></setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="动画">
+      <setting-item name="动画速度">
+        <n-input-number
+          v-model:value="optionData.animationSpeed"
+          size="small"
+          placeholder="动画速度"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="动画间隔">
+        <n-input-number
+          v-model:value="optionData.animationTime"
+          size="small"
+          placeholder="动画间隔"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTextBarrage', true)
+
+export const OverrideTextBarrageConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义弹幕文字',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'text_barrage.png'
+}

+<template>
+  <div class="go-text-box">
+    <div class="content">
+      <span>
+        {{ option.dataset }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+import { values } from 'lodash'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w } = toRefs(props.chartConfig.attr)
+
+const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs(
+  props.chartConfig.option
+)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+//阴影
+watch(
+  props.chartConfig.option,
+  () => {
+    try {
+      if (props.chartConfig.option.showShadow) {
+        boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
+      } else {
+        boxShadow.value = 'none'
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const transitionDuration = computed(() => {
+  return Math.floor((w.value as any) / (animationSpeed.value as any))
+})
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  .content {
+    width: 100%;
+    color: v-bind('fontColor');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    font-weight: v-bind('fontWeight');
+    text-shadow: v-bind('boxShadow');
+    position: absolute;
+    animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite;
+  }
+  @keyframes barrage {
+    from {
+      left: 100%;
+      transform: translateX(0);
+    }
+    to {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTextGradientConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '我是渐变文本',
+  size: 20,
+  gradient: {
+    from: '#0000FFFF',
+    to: '#00FF00FF',
+    deg: 45
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTextGradientConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTextGradientConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.size" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="渐变色参数">
+      <setting-item name="起始值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.from"></n-color-picker>
+      </setting-item>
+      <setting-item name="结束值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.to"></n-color-picker>
+      </setting-item>
+      <setting-item name="偏移角度">
+        <n-input-number v-model:value="optionData.gradient.deg" size="small" placeholder="颜色旋转"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTextGradient', true)
+
+export const OverrideTextGradientConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义渐变文字',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'text_gradient.png'
+}

+<template>
+  <div class="go-text-box">
+    <n-gradient-text :size="size" :gradient="gradient">
+      {{ option.dataset }}
+    </n-gradient-text>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { size, gradient } = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .n-gradient-text {
+    white-space: initial;
+  }
+}
+</style>

@@ -11,12 +11,15 @@ import { OverrideInputsTabConfig } from '@/packages/components/external/Informat
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { ButtonConfig } from '@/packages/components/external/Informations/Mores/Button'
+import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
+import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
+import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
+import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 
 export function useInjectLib(packagesList: EPackagesType) {
-
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, PickIconConfig)
@@ -29,17 +32,25 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextBarrageConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextGradientConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
 }
 
 /**
- * 
- * @param packagesList 
- * @param categoryName 
- * @param config 
+ *
+ * @param packagesList
+ * @param categoryName
+ * @param config
  */
-function addWidgetToCategoryByCategoryName(packagesList: EPackagesType, categoryName: PackagesCategoryEnum, config: ConfigType) {
+function addWidgetToCategoryByCategoryName(
+  packagesList: EPackagesType,
+  categoryName: PackagesCategoryEnum,
+  config: ConfigType
+) {
   packagesList[categoryName].push(config)
 }