feat: ✨ 新增业务组件-CRM客户阶段漏斗

packages/bi-chart/components/basic-chart/chart-option/redefine/crm-customer-stage-funnel.ts

@@ -0,0 +1,80 @@
+export default {
+  color: ['#FFC420', '#646b7a', '#2ED4A9', '#FF7125', '#0056FF'],
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{b} : {c}条',
+    textStyle: {
+      fontFamily: 'Montserrat-Regular, Montserrat'
+    }
+  },
+  series: [
+    {
+      type: 'funnel',
+      top: 100,
+      left: '25%',
+      width: '55%',
+      min: 0,
+      max: 100,
+      minSize: '20%', // 漏斗最小值的宽度
+      maxSize: '80%', // 漏斗最大值的宽度
+      sort: 'descending', // 漏斗数据降序排列， ascending 升序
+      gap: 2,
+      label: {
+        show: true, // 显示漏斗每部分名称
+        position: 'left',
+        fontSize: 14,
+        color: '#646B7A'
+      },
+      labelLine: {
+        normal: {
+          show: false, // 是否显示引导线
+          length: 50 // 视觉引导线长度。
+        }
+      },
+      tooltip: {
+        show: false // 让系列一(漏斗图外层图形的提示框不显示)
+      },
+      data: [
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry' },
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    },
+    {
+      type: 'funnel',
+      top: 100,
+      left: '25%',
+      width: '55%',
+      min: 0,
+      max: 100,
+      minSize: '20%', // 漏斗最小值的宽度
+      maxSize: '80%', // 漏斗最大值的宽度
+      sort: 'descending', // 漏斗数据降序排列， ascending 升序
+      gap: 2,
+      label: {
+        show: true, // 显示漏斗每部分名称
+        position: 'inside',
+        formatter: '{c}个',
+        fontSize: 14,
+        color: '#fff'
+      },
+      emphasis: {
+        label: {
+          fontSize: 20 // 鼠标悬停在漏斗上，突出文字大小
+        }
+      },
+      z: 100,
+      data: [
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry' },
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    }
+  ]
+}
+

packages/bi-chart/components/basic-chart/chart-option/redefine/index.ts

@@ -1,2 +1,3 @@
 // 业务方重定义的图表配置
 export { default as redefineLine } from './line'
+export { default as refineCrmCustomerStageFunnel } from './crm-customer-stage-funnel'

packages/bi-chart/components/business/crm-customer-stage-funnel/CrmCustomerStageFunnel.vue

@@ -0,0 +1,55 @@
+<template>
+  <BasicBusinessLayout
+    title="客户阶段漏斗"
+    chart-type="refineCrmCustomerStageFunnel"
+    url="/pscrm-rest/crmReport/getCustomerReportData"
+    method="get"
+    :params="params"
+    :set-option="setOption"
+  >
+    <template #info>{{ params.depName }}</template>
+    <template #form>
+      <DepSelect v-model:params="params" prop-key="depId" />
+
+      <DateTypeSelect v-model:params="params" />
+    </template>
+  </BasicBusinessLayout>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import BasicBusinessLayout from '../../basic-business/BasicBusinessLayout.vue'
+import { getDateText } from '../../basic-business/hooks/date'
+import DateTypeSelect from '../../basic-business/date-type-select/DateTypeSelect.vue'
+import DepSelect from '../../basic-business/dep-select/DepSelect.vue'
+
+export default defineComponent({
+  name: 'CrmCustomerStageFunnel',
+  components: { DepSelect, DateTypeSelect, BasicBusinessLayout },
+  props: {
+    extraParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const params = ref({
+      depId: 0,
+      dateType: 1,
+      depName: '', // 用于显示 info 数据，传为接口参数不用管
+      ...props.extraParams
+    })
+
+    function setOption(data: any, option: any) {
+      option.series[0].data = data?.list || []
+      option.series[1].data = data?.list || []
+    }
+
+    return {
+      params,
+      getDateText,
+      setOption
+    }
+  }
+})
+</script>

packages/bi-chart/components/business/crm-customer-stage-funnel/index.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import crmCustomerStageFunnel from './CrmCustomerStageFunnel.vue'
+
+const CrmCustomerStageFunnel = Object.assign(crmCustomerStageFunnel, {
+  install: (app: App) =>
+    app.component(crmCustomerStageFunnel.name, crmCustomerStageFunnel)
+})
+
+export { CrmCustomerStageFunnel as default }

packages/bi-chart/index.ts

@@ -11,6 +11,8 @@ export { default as ThingsOutboundConnectionRateRanking } from './components/bus
 export { default as ThingsOutboundConnectionNumberRanking } from './components/business/things-outbound-connection-number-ranking'
 export { default as TestFunnelBig } from './components/business/test-funnel-big'
 export { default as CrmConversionRateAnalysis } from './components/business/crm-conversion-rate-analysis'
+export { default as CrmCustomerStageFunnel } from './components/business/crm-customer-stage-funnel'
+
 // 基础服务组件
 export {
   default as BasicBusinessLayout,