feat: thinkingg in echart renderr

src/app/shared/components/markdown-render/markdown-render.component.ts

@@ -67,6 +67,8 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  private graphvizIndex = 0;
  private mermaidIndex = 0;
  private mermaidData = [];
+ private echartsIndex = 0;
+ private echartsData = [];
 
  constructor(private markdownService: MarkdownService, private tocify: Tocify, private location: Location, private route: ActivatedRoute,
  private myElement: ElementRef) {
@@ -137,6 +139,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  setTimeout(() => this.renderChart(), 50);
  setTimeout(() => this.renderGraphviz(), 50);
  setTimeout(() => this.renderMermaid(), 50);
+ setTimeout(() => this.renderEcharts(), 50);
  setTimeout(() => this.gotoHeading(), 500);
  }
 
@@ -217,6 +220,8 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  return this.buildGraphvizData(code);
  case 'mermaid':
  return this.buildMermaidData(code);
+ case 'echarts':
+ return this.buildEchartsData(code);
  default:
  return this.buildNormalCode(options, code, lang, escaped);
  }
@@ -567,4 +572,25 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  });
  }
  }
+
+ private buildEchartsData(code: any) {
+ this.echartsIndex++;
+
+ const chartId = 'echarts-' + this.echartsIndex;
+ this.echartsData = [{
+ id: chartId,
+ data: code
+ }];
+
+ return `<div class="normal-echarts" id="${chartId}"></div>`;
+ }
+
+ private renderEcharts() {
+ for (const chartInfo of this.echartsData) {
+ const chartEl = document.getElementById(chartInfo.id);
+ const mychart = echarts.init(chartEl as any);
+ this.chartInstances.push(mychart);
+ mychart.setOption(JSON.parse(chartInfo.data));
+ }
+ }
 }

src/assets/docs/manual.md

@@ -115,6 +115,31 @@ Path to Production，来源于精益，旨在通过可视化的方式来展示
 
 #### 技术债热力图
 
+服务级别热力图
+
+![技术债热力图](/assets/docs/images/heat-map-services.jpg)
+
+代码热力图？
+
+```echarts
+{
+"series": [
+ {
+ "type": "treemap",
+ "breadcrumb": {"show": false},
+ "data": [{
+ "name": "nodeA","value": 10,
+ "children": [
+ {"name": "HealthController.java", "value": 4 },
+ {"name": "HealthService.java", "value": 6}
+ ]},
+ {"name": "HealthModel.java", "value": 20}
+ ]
+ }
+]
+}
+```
+
 #### 技术债墙
 
 ```quadrant

src/assets/docs/pattern.md

@@ -360,3 +360,7 @@ GitHub 解释版：
  - 代码化运营
  - 运营需求化
 ```
+
+## Architecture Dashboard
+
+

src/styles/_markdown.scss

@@ -646,3 +646,8 @@
  }
  }
 }
+
+.normal-echarts {
+ width: 100%;
+ height: 100%;
+}