feat: 新增组件漏斗图

.gitignore

@@ -5,4 +5,6 @@ dist
 dist-ssr
 *.local
 .vscode
-stats.html
+stats.html
+auto-imports.d.ts
+components.d.ts

package.json

@@ -61,6 +61,8 @@
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
     "typescript": "^4.6.3",
+    "unplugin-auto-import": "^0.10.1",
+    "unplugin-vue-components": "^0.21.1",
     "vite": "2.9.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1",

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -7,22 +7,30 @@
         size="small"
       ></n-switch>
     </template>
-    <setting-item-box name="标题">
+    <setting-item-box name="属性" :alone="true">
-      <setting-item name="颜色">
+      <setting-item name="文本">
-        <n-color-picker
+        <n-input v-model:value="title.text" size="small" type="text"></n-input>
-          v-model:value="title.textStyle.color"
-          size="small"
-        ></n-color-picker>
-      </setting-item>
-      <setting-item name="大小">
-        <n-input-number
-          v-model:value="title.textStyle.fontSize"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
+      <!-- <setting-item name="textAlign">
+        <n-select v-model:value="title.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item> -->
+      <template v-if="title.textStyle">
+        <setting-item name="颜色">
+          <n-color-picker
+            v-model:value="title.textStyle.color"
+            size="small"
+          ></n-color-picker>
+        </setting-item>
+        <setting-item name="大小">
+          <n-input-number
+            v-model:value="title.textStyle.fontSize"
+            :min="1"
+            size="small"
+          ></n-input-number>
+        </setting-item>
+      </template>
     </setting-item-box>
-    <setting-item-box name="副标题">
+    <setting-item-box name="副标题" v-if="title.subtextStyle">
       <setting-item name="颜色">
         <n-color-picker
           size="small"
@@ -374,4 +382,11 @@ const yAxis = computed(() => {
 const legend = computed(() => {
   return props.optionData.legend
 })
+
+const textAlignOptions = [
+  {label: '自动', value: 'auto'},
+  {label: '左对齐', value: 'left'},
+  {label: '右对齐', value: 'right'},
+  {label: '居中对齐', value: 'center'},
+]
 </script>

src/main.ts

@@ -20,7 +20,7 @@ async function appInit() {
   const app = createApp(App)
 
   // 注册全局常用的 naive-ui 组件
-  setupNaive(app)
+  // setupNaive(app)
 
   // 注册全局自定义指令
   setupDirectives(app)

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

@@ -0,0 +1,41 @@
+import { FunnelConfig } from './index'
+import dataJson from './data.json'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = ['legend']
+
+export const option = {
+    title: {
+      textStyle: {},
+    },
+    legend: {},
+    color: [
+      '#142f53', '#13407e',  '#0f62d4', '#0c73ff'
+    ],
+    tooltip: {
+      show: true,
+      trigger: 'item',
+    },
+    dataset: {
+      ...dataJson
+    },
+    series: {
+      sort: 'descending',
+      orient: 'vertical',
+      type: 'funnel',
+      label: {
+        show: true,
+        position: 'inside'
+      }
+    },
+  }
+
+  export default class Config extends publicConfig implements CreateComponentType {
+    public key = FunnelConfig.key
+    public chartConfig = cloneDeep(FunnelConfig)
+    // 图表配置项
+    public option = echartOptionProfixHandle(option, includes)
+  }
+  

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

@@ -1,6 +1,62 @@
 <template>
+    <CollapseItem
+      name="朝向">
+      <template #header>
+        <n-switch
+          checked-value="vertical"
+          unchecked-value="horizontal"
+          v-model:value="props.optionData.series.orient"
+        >
+          <template #checked>
+            垂直
+          </template>
+          <template #unchecked>
+            水平
+          </template>
+        </n-switch>
+      </template>
+    </CollapseItem>
+
+    <CollapseItem
+      name="排序">
+      <template #header>
+        <n-switch
+          checked-value="descending"
+          unchecked-value="ascending"
+          v-model:value="props.optionData.series.sort"
+        >
+          <template #checked>
+            降序
+          </template>
+          <template #unchecked>
+            升序
+          </template>
+        </n-switch>
+      </template>
+    </CollapseItem>
+
+    <CollapseItem
+      name="间隔"
+      :expanded="true">
+      <n-slider v-model:value="props.optionData.series.gap" />
+    </CollapseItem>
+    <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
 
 </script>

src/packages/components/Charts/Mores/Funnel/data.json

@@ -0,0 +1,9 @@
+{
+    "source": [
+        ["name","value"],
+        ["Visit", 20],
+        ["Inquiry", 40],
+        ["Order", 60],
+        ["Click", 80]
+    ]
+}

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

@@ -1,14 +1,14 @@
+import { getComponentConfig } from './../../../../../utils/componets';
 import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const FunnelConfig: ConfigType = {
+export const FunnelConfig: ConfigType = getComponentConfig({
   key: 'Funnel',
-  chartKey: 'VFunnel',
-  conKey: 'VCFunnel',
   title: '漏斗图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   image
-}
+})
+

src/packages/components/Charts/Mores/Funnel/index.vue

@@ -1,10 +1,54 @@
 <template>
-  <div>
+   <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-    水波
-  </div>
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { FunnelChart  } from 'echarts/charts'
+import { 
+  DatasetComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent
+} from 'echarts/components' 
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { mergeTheme } from '@/packages/public/chart'
+import { isPreview } from '@/utils'
+import { includes } from './config'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+use([
+  DatasetComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  FunnelChart
+])
+
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
 
 </script>
 

src/packages/public/chart.ts

@@ -7,7 +7,7 @@ import { globalThemeJson } from '@/settings/chartThemes/index'
  * * 合并 color 和全局配置项
  * @param option 配置
  * @param themeSetting 设置
- * @param excludes 排除元素
+ * @param includes 合并元素
  * @returns object
  */
 export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {

vite.config.ts

@@ -7,6 +7,10 @@ import { viteMockServe } from 'vite-plugin-mock'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 import { visualizer } from "rollup-plugin-visualizer";
 import viteImagemin from 'vite-plugin-imagemin'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver
+} from 'unplugin-vue-components/resolvers'
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir)
@@ -20,6 +24,19 @@ const plugins = [
 ]
 
 const devPlugins = [
+  AutoImport(
+    {
+      imports: [
+        'vue',
+        'vue-router',
+      ]
+    }
+  ),
+  Components({
+    resolvers: [
+      NaiveUiResolver()
+    ]
+  }),
   viteMockServe({
     mockPath: '/src/api/mock',
     // 开发打包开关