feat: add basic pyramid

phodal · Mar 15, 2020 · 75630ce · 75630ce
1 parent cdbe341
commit 75630ce
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 5 deletions.
diff --git a/src/app/shared/components/markdown-render/chart-options.ts b/src/app/shared/components/markdown-render/chart-options.ts
@@ -78,9 +78,66 @@ function buildRadarChartOption(data) {
   };
 }
 
+function buildPyramidChartOption(data) {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c}%'
+    },
+    toolbox: {
+      feature: {
+        dataView: {readOnly: false},
+        restore: {},
+        saveAsImage: {}
+      }
+    },
+
+    series: [
+      {
+        name: '漏斗图',
+        type: 'funnel',
+        left: '10%',
+        top: 60,
+        bottom: 60,
+        width: '80%',
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'ascending',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'inside'
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 20
+          }
+        },
+        data: [
+          {value: 60, name: '访问'},
+          {value: 40, name: '咨询'},
+          {value: 20, name: '订单'},
+        ]
+      }
+    ]
+  };
+}
+
 const ChartOptions = {
   buildTreeOption,
   buildRadarChartOption,
+  buildPyramidChartOption
 };
 
 export default ChartOptions;
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -158,9 +158,11 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
         case 'process-step':
           return this.buildTableStep(code);
         case 'mindmap':
-          return this.buildMindmap(code);
+          return this.buildMindmapData(code);
         case 'radar':
-          return this.buildRadarChart(code);
+          return this.buildRadarChartData(code);
+        case 'pyramid':
+          return this.buildPyramidChartData(code);
         default:
           return this.renderNormalCode(options, code, lang, escaped);
       }
@@ -284,7 +286,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
     return zip.apply(this, arr);
   }
 
-  private buildMindmap(code: any) {
+  private buildMindmapData(code: any) {
     const tokens = marked.lexer(code);
     let items = [];
     items = MarkdownHelper.markdownToJSON(tokens, items);
@@ -318,6 +320,9 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
       } else if (chartInfo.type === 'radarchart') {
         const newData = this.toTreeData(chartInfo.data);
         mychart.setOption(ChartOptions.buildRadarChartOption(newData));
+      } else if (chartInfo.type === 'pyramid') {
+        const newData = this.toTreeData(chartInfo.data);
+        mychart.setOption(ChartOptions.buildPyramidChartOption(newData) as any);
       }
     }
   }
@@ -352,7 +357,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
     return nodes;
   }
 
-  private buildRadarChart(code: any) {
+  private buildRadarChartData(code: any) {
     const tokens = marked.lexer(code);
     let items = [];
     items = MarkdownHelper.markdownToJSON(tokens, items);
@@ -368,6 +373,21 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
     return `<div class="markdown-radarchart ${currentMap.id}"></div>`;
   }
 
+  private buildPyramidChartData(code: any) {
+    const tokens = marked.lexer(code);
+    let items = [];
+    items = MarkdownHelper.markdownToJSON(tokens, items);
+    const currentMap = {
+      id: 'pyramid-' + this.radarChartIndex,
+      type: 'pyramid',
+      data: items
+    };
+
+    this.chartInfos.push(currentMap);
+    this.radarChartIndex++;
+    return `<div class="markdown-radarchart ${currentMap.id}"></div>`;
+  }
+
   private buildTableStep(code: any) {
     const tokens = marked.lexer(code);
     let items = [];

diff --git a/src/assets/docs/practise.md b/src/assets/docs/practise.md
@@ -34,14 +34,21 @@ Dashing: http://dashing.io/
 
 ### 1. 测试驱动开发
 
+
+```pyramid
+ - 测试金字塔
+   - 单元测试
+   - 组件测试
+   - 集成测试
+```
+
 ### 2. 代码评审
 
 ### 3. 小步前进
 
 
 #### Git Hooks 
 
-
 Git 钩子列表：
 
 ```bash