!41 feat: 完善漏斗图组件

Merge pull request !41 from dodu/dev-commet

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

@@ -0,0 +1,63 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { FunnelConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 排序枚举
+export const FunnelOrderEnumList = [
+  { label: '倒三角', value: 'descending' },
+  { label: '正三角', value: 'ascending' }
+]
+// 标签位置枚举
+export const FunnelLabelPositionEnumList = [
+  { label: '内部', value: 'inside' },
+  { label: '外部', value: 'outside' },
+  { label: '内部左侧', value: 'insideLeft' },
+  { label: '内部右侧', value: 'insideRight' }
+]
+
+const option = {
+  tooltip: {},
+  legend: {},
+  dataset: { ...dataJson },
+  series: [
+    {
+      name: 'Funnel',
+      type: 'funnel',
+      left: '10%',
+      width: '80%',
+      bottom: 10,
+      min: 0,
+      max: 100,
+      minSize: '0%',
+      maxSize: '100%',
+      sort: 'descending', // descending | ascending
+      gap: 5,
+      label: {
+        show: true,
+        position: 'inside',
+        fontSize: 12
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 0
+      },
+      emphasis: {
+        label: {
+          fontSize: 20
+        }
+      }
+    }
+  ]
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = FunnelConfig.key
+  public chartConfig = cloneDeep(FunnelConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -1,6 +1,55 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" in-chart> </global-setting>
+  <!-- 漏斗图 -->
+  <collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图-${index + 1}`" expanded>
+    <setting-item-box name="排序" alone>
+      <setting-item>
+        <n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="区块">
+      <setting-item name="边框大小">
+        <n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
+      </setting-item>
+      <setting-item name="边框颜色">
+        <n-color-picker v-model:value="item.itemStyle.borderColor" :modes="['hex']" size="small" />
+      </setting-item>
+      <setting-item name="间隔">
+        <n-input-number v-model:value="item.gap" :min="0" :max="20" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="标签">
+      <setting-item name="是否显示">
+        <n-checkbox v-model:checked="item.label.show" size="small">标签</n-checkbox>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="item.label.position" :options="FunnelLabelPositionEnumList" size="small" />
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" :min="0" size="small" />
+      </setting-item>
+      <setting-item name="悬停时大小">
+        <n-input-number v-model:value="item.emphasis.label.fontSize" :min="0" size="small" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { FunnelOrderEnumList, FunnelLabelPositionEnumList } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -0,0 +1,10 @@
+{
+  "dimensions": ["product", "2015"],
+  "source": [
+    { "product": "Matcha Latte", "2015": 20 },
+    { "product": "Milk Tea", "2015": 40 },
+    { "product": "Cheese Cocoa", "2015": 60 },
+    { "product": "Walnut Brownie", "2015": 80 },
+    { "product": "Walnut", "2015": 100 }
+  ]
+}

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

@@ -1,13 +1,41 @@
 <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 { CanvasRenderer } from 'echarts/renderers'
+import { FunnelChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
-
-<style lang="scss" scoped>
-
-</style>