Selaa lähdekoodia

fix: 优化漏斗图使用,解决预览数据变更页面的问题

奔跑的面条 3 vuotta sitten
vanhempi
sitoutus
7b3012d8da

+ 1 - 1
src/packages/components/Charts/Mores/Funnel/config.ts

@@ -27,9 +27,9 @@ export const option = {
     {
       name: 'Funnel',
       type: 'funnel',
+      top: '70',
       left: '10%',
       width: '80%',
-      bottom: 10,
       min: 0,
       minSize: '0%',
       maxSize: '100%',

+ 11 - 1
src/packages/components/Charts/Mores/Funnel/config.vue

@@ -2,13 +2,19 @@
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData" :in-chart="true"> </global-setting>
   <!-- 漏斗图 -->
-  <collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图-${index + 1}`" expanded>
+  <collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
     <setting-item-box name="排序" alone>
       <setting-item>
         <n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
       </setting-item>
     </setting-item-box>
 
+    <SettingItemBox name="范围" :alone="true">
+      <setting-item :name="`顶部距离:${item.top}px`">
+        <n-slider v-model:value="item.top" :min="0" :max="300" :format-tooltip="sliderFormatTooltip"></n-slider>
+      </setting-item>
+    </SettingItemBox>
+
     <setting-item-box name="区块">
       <setting-item name="边框大小">
         <n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
@@ -54,4 +60,8 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const sliderFormatTooltip = (v: number) => {
+  return `${v}px`
+}
 </script>

+ 2 - 1
src/packages/components/Charts/Mores/Funnel/index.ts

@@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/funnel.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FunnelConfig: ConfigType = {
@@ -10,5 +10,6 @@ export const FunnelConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image
 }

+ 0 - 4
src/packages/components/Charts/Mores/Radar/config.vue

@@ -27,7 +27,6 @@
 
       <SettingItemBox name="范围">
         <setting-item :name="`最小值:${radarProp.radius[0]}%`">
-          <!-- 透明度 -->
           <n-slider
             v-model:value="radarProp.radius[0]"
             :min="0"
@@ -37,7 +36,6 @@
           ></n-slider>
         </setting-item>
         <setting-item :name="`最大值:${radarProp.radius[1]}%`">
-          <!-- 透明度 -->
           <n-slider
             v-model:value="radarProp.radius[1]"
             :min="0"
@@ -50,7 +48,6 @@
       
       <SettingItemBox name="偏移">
         <setting-item :name="`X 轴值:${radarProp.center[0]}%`">
-          <!-- 透明度 -->
           <n-slider
             v-model:value="radarProp.center[0]"
             :min="0"
@@ -60,7 +57,6 @@
           ></n-slider>
         </setting-item>
         <setting-item :name="`Y 轴值:${radarProp.center[1]}%`">
-          <!-- 透明度 -->
           <n-slider
             v-model:value="radarProp.center[1]"
             :min="0"

+ 1 - 1
src/packages/components/Charts/Mores/Radar/index.ts

@@ -6,7 +6,7 @@ export const RadarConfig: ConfigType = {
   key: 'Radar',
   chartKey: 'VRadar',
   conKey: 'VCRadar',
-  title: '雷达',
+  title: '雷达',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,