feat: ✨ 新增尖漏斗图&两瓣玫瑰图

dizuncainiao · Aug 10, 2023 · 53ad0e2 · 53ad0e2
1 parent 30c9615
commit 53ad0e2
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 9 deletions.
diff --git a/docs/demos/basic/funnel/BasicFunnelDemo.vue b/docs/demos/basic/funnel/BasicFunnelDemo.vue
@@ -3,7 +3,14 @@ import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
 </script>
 
 <template>
-  <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
-    <BasicChart :options="allEchartsOptions.basicFunnel" />
+  <div>
+    <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+      <BasicChart :options="allEchartsOptions.basicFunnel" />
+    </div>
+    <div 
+      style="width: 600px; height: 400px; padding: 28px; margin-top: 10px;
+      background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+      <BasicChart :options="allEchartsOptions.basicArrowFunnel" />
+    </div>
   </div>
 </template>
diff --git a/docs/demos/basic/pie/BasicRosePieDemo.vue b/docs/demos/basic/pie/BasicRosePieDemo.vue
@@ -3,7 +3,16 @@ import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
 </script>
 
 <template>
-  <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+  <h2 style="margin: 10px 0;">常规玫瑰图</h2>
+  <div 
+    style="width: 600px; height: 400px; padding: 28px;
+    background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
     <BasicChart :options="allEchartsOptions.basicRosePie" />
   </div>
+  <h2 style="margin: 10px 0;">两瓣玫瑰图</h2>
+  <div 
+    style="width: 600px; height: 400px; padding: 28px;
+    background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+    <BasicChart :options="allEchartsOptions.basicTwoRosePie" />
+  </div>
 </template>
diff --git a/examples/src/config/menus/funnel.ts b/examples/src/config/menus/funnel.ts
@@ -1,6 +1,6 @@
 export default [
   {
-    title: '漏斗图-基础漏斗',
+    title: '漏斗图',
     routeName: 'BasicFunnelDemo',
     showItem: true
   }

diff --git a/examples/src/views/basic/funnel/BasicFunnelDemo.vue b/examples/src/views/basic/funnel/BasicFunnelDemo.vue
@@ -3,7 +3,14 @@ import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
 </script>
 
 <template>
-  <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
-    <BasicChart :options="allEchartsOptions.basicFunnel" />
+  <div>
+    <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+      <BasicChart :options="allEchartsOptions.basicFunnel" />
+    </div>
+    <div 
+      style="width: 600px; height: 400px; padding: 28px; margin-top: 10px;
+      background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+      <BasicChart :options="allEchartsOptions.basicArrowFunnel" />
+    </div>
   </div>
 </template>
diff --git a/examples/src/views/basic/pie/BasicRosePieDemo.vue b/examples/src/views/basic/pie/BasicRosePieDemo.vue
@@ -3,7 +3,16 @@ import { BasicChart, allEchartsOptions } from 'dz-bi-chart'
 </script>
 
 <template>
-  <div style="width: 600px; height: 400px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+  <h2 style="margin: 10px 0;">常规玫瑰图</h2>
+  <div 
+    style="width: 600px; height: 400px; padding: 28px;
+    background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
     <BasicChart :options="allEchartsOptions.basicRosePie" />
   </div>
+  <h2 style="margin: 10px 0;">两瓣玫瑰图</h2>
+  <div 
+    style="width: 600px; height: 400px; padding: 28px;
+    background: #fff; border-radius: 12px; box-shadow: 0 0 8px #eee;">
+    <BasicChart :options="allEchartsOptions.basicTwoRosePie" />
+  </div>
 </template>
diff --git a/packages/bi-chart/components/basic-chart/chart-option/funnel/basic-arrow-funnel.ts b/packages/bi-chart/components/basic-chart/chart-option/funnel/basic-arrow-funnel.ts
@@ -0,0 +1,55 @@
+export default {
+  color: ['#FFC420', '#646b7a', '#2ED4A9', '#FF7125', '#0056FF'],
+  title: {
+    text: '尖漏斗',
+    top: '28px',
+    left: '28px',
+    textStyle: {
+      color: '#242934',
+      fontSize: 16,
+      fontFamily: 'PingFangSC-Semibold, "PingFang SC"'
+    }
+  },
+  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: '0%', // 漏斗最小值的宽度
+      maxSize: '100%', // 漏斗最大值的宽度
+      sort: 'descending', // 漏斗数据降序排列， ascending 升序
+      gap: 2,
+      label: {
+        show: true, // 显示漏斗每部分名称
+        position: 'left',
+        fontSize: 14,
+        color: '#646B7A'
+      },
+      labelLine: {
+        normal: {
+          show: false, // 是否显示引导线
+          length: 50 // 视觉引导线长度。
+        }
+      },
+      data: [
+        { value: 50, name: 'Visit' },
+        { value: 70, name: 'Inquiry' },
+        { value: 80, name: 'Order' },
+        { value: 90, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    }
+  ]
+}
+
diff --git a/packages/bi-chart/components/basic-chart/chart-option/funnel/basic-funnel.ts b/packages/bi-chart/components/basic-chart/chart-option/funnel/basic-funnel.ts
@@ -1,7 +1,7 @@
 export default {
   color: ['#FFC420', '#646b7a', '#2ED4A9', '#FF7125', '#0056FF'],
   title: {
-    text: 'Funnel',
+    text: '平漏斗',
     top: '28px',
     left: '28px',
     textStyle: {

diff --git a/packages/bi-chart/components/basic-chart/chart-option/funnel/index.ts b/packages/bi-chart/components/basic-chart/chart-option/funnel/index.ts
@@ -1 +1,2 @@
-export { default as basicFunnel } from './basic-funnel'
+export { default as basicFunnel } from './basic-funnel'
+export { default as basicArrowFunnel } from './basic-arrow-funnel'
diff --git a/packages/bi-chart/components/basic-chart/chart-option/pie/basic-two-rose-pie.ts b/packages/bi-chart/components/basic-chart/chart-option/pie/basic-two-rose-pie.ts
@@ -0,0 +1,21 @@
+import { colorToolTipLegend, labelEmphasis } from './basic'
+
+export default {
+  ...colorToolTipLegend,
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: ['60', '90'],
+      minAngle: 20,
+      center: ['30%', '52.5%'],
+      avoidLabelOverlap: false,
+      roseType: 'area',
+      ...labelEmphasis,
+      data: [
+        { value: 70, name: 'rose 1' },
+        { value: 90, name: 'rose 2' },
+      ]
+    }
+  ]
+}
diff --git a/packages/bi-chart/components/basic-chart/chart-option/pie/index.ts b/packages/bi-chart/components/basic-chart/chart-option/pie/index.ts
@@ -3,3 +3,4 @@ export { default as basicRollPie } from './basic-roll-pie'
 export { default as basicHalfRollPie } from './basic-half-roll-pie'
 export { default as basicMultiplePie } from './basic-multiple-pie'
 export { default as basicRosePie } from './basic-rose-pie'
+export { default as basicTwoRosePie } from './basic-two-rose-pie'