feat: init charts

src/app/shared/components/markdown-tree/markdown-tree.component.html

@@ -0,0 +1,3 @@
+<div class="markdown-tree" #tree>
+
+</div>

src/app/shared/components/markdown-tree/markdown-tree.component.scss

@@ -0,0 +1,8 @@
+.markdown-tree {
+  width: auto;
+  height: auto;
+
+  max-width: 800px;
+  min-width: 600px;
+  min-height: 400px;
+}

src/app/shared/components/markdown-tree/markdown-tree.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MarkdownTreeComponent } from './markdown-tree.component';
+
+describe('MarkdownTreeComponent', () => {
+  let component: MarkdownTreeComponent;
+  let fixture: ComponentFixture<MarkdownTreeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MarkdownTreeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MarkdownTreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,126 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import * as echarts from 'echarts';
+
+@Component({
+  selector: 'component-markdown-tree',
+  templateUrl: './markdown-tree.component.html',
+  styleUrls: ['./markdown-tree.component.scss']
+})
+export class MarkdownTreeComponent implements OnInit, AfterViewInit {
+  @ViewChild('tree', {}) treeElement: ElementRef;
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    const myChart = echarts.init(this.treeElement.nativeElement);
+    const data = {
+      name: 'flare',
+      children: [
+        {
+          name: 'data',
+          children: [
+            {
+              name: 'converters',
+              children: [
+                {name: 'Converters', value: 721},
+                {name: 'DelimitedTextConverter', value: 4294}
+              ]
+            },
+            {
+              name: 'DataUtil',
+              value: 3322
+            }
+          ]
+        },
+        {
+          name: 'display',
+          children: [
+            {name: 'DirtySprite', value: 8833},
+            {name: 'LineSprite', value: 1732},
+            {name: 'RectSprite', value: 3623}
+          ]
+        },
+        {
+          name: 'flex',
+          children: [
+            {name: 'FlareVis', value: 4116}
+          ]
+        },
+        {
+          name: 'query',
+          children: []
+        },
+        {
+          name: 'scale',
+          children: [
+            {name: 'IScaleMap', value: 2105},
+            {name: 'LinearScale', value: 1316},
+            {name: 'LogScale', value: 3151},
+            {name: 'OrdinalScale', value: 3770},
+            {name: 'QuantileScale', value: 2435},
+            {name: 'QuantitativeScale', value: 4839},
+            {name: 'RootScale', value: 1756},
+            {name: 'Scale', value: 4268},
+            {name: 'ScaleType', value: 1821},
+            {name: 'TimeScale', value: 5833}
+          ]
+        }
+      ]
+    };
+    const options = {
+      tooltip: {
+        trigger: 'item',
+        triggerOn: 'mousemove'
+      },
+      series: [
+        {
+          type: 'tree',
+          id: 0,
+          name: 'tree1',
+          data: [data],
+
+          top: '10%',
+          left: '8%',
+          bottom: '22%',
+          right: '20%',
+
+          symbolSize: 7,
+
+          edgeShape: 'polyline',
+          edgeForkPosition: '63%',
+          initialTreeDepth: 3,
+
+          lineStyle: {
+            width: 2
+          },
+
+          label: {
+            backgroundColor: '#fff',
+            position: 'left',
+            verticalAlign: 'middle',
+            align: 'right'
+          },
+
+          leaves: {
+            label: {
+              position: 'right',
+              verticalAlign: 'middle',
+              align: 'left'
+            }
+          },
+
+          expandAndCollapse: true,
+          animationDuration: 550,
+          animationDurationUpdate: 750
+        }
+      ]
+    };
+
+    myChart.setOption(options);
+  }
+}

src/app/shared/shared.module.ts

@@ -12,6 +12,7 @@ import { MarkdownRatingItemComponent } from './components/markdown-radar-chart/m
 import { ProcessTableComponent } from './components/process-table/process-table.component';
 import {MarkdownReporterComponent} from './components/markdown-reporter/markdown-reporter.component';
 import {MarkdownChartComponent} from './components/markdown-chart/markdown-chart.component';
+import {MarkdownTreeComponent} from './components/markdown-tree/markdown-tree.component';
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import {MarkdownChartComponent} from './components/markdown-chart/markdown-chart
     ProcessTableComponent,
     MarkdownReporterComponent,
     MarkdownChartComponent,
+    MarkdownTreeComponent,
   ],
   providers: [
   ],
@@ -42,6 +44,7 @@ import {MarkdownChartComponent} from './components/markdown-chart/markdown-chart
     ProcessTableComponent,
     MarkdownReporterComponent,
     MarkdownChartComponent,
+    MarkdownTreeComponent,
   ],
   entryComponents: []
 })