@@ -2,7 +2,7 @@
  * @Description: 
  * @Date: 2020-05-07 11:57:49
  * @LastEditors: tanmh
- * @LastEditTime: 2020-12-01 17:49:55
+ * @LastEditTime: 2020-12-02 09:55:59
 -->
 # NgxG2plot
 
@@ -167,6 +167,7 @@ See the official documentation for all methods of charting: https://g2plot.antv.
 -|-|-|-
 starkG2plotArea | Area - 面积图 | g2plotArea | G2plotAreaModule
 starkG2plotBar | Bar - 基础条形图  | g2plotBar | G2plotBarModule
+starkG2plotBidirectionalBar | BidirectionalBar - 对称条形图 | g2plotBidirectionalBar | G2plotBidirectionalBarModule
 starkG2plotBox | Box - 箱图  | g2plotBox | G2plotBoxModule
 starkG2plotBullet | Bullet - 子弹图 | g2plotBullet | G2plotBulletModule
 starkG2plotColumn | Column - 柱状图  | g2plotColumn | G2plotColumnModule
@@ -178,13 +179,20 @@ starkG2plotHistogram | Histogram - 直方图  | g2plotHistogram | G2plotHistogra
 starkG2plotLine | Line - 折线图 | g2plotLine | G2plotLineModule
 starkG2plotLiquid | Liquid - 水波图 | g2plotLiquid | G2plotLiquidModule
 starkG2plotPie | Pie - 饼图  | g2plotPie | G2plotPieModule
+starkG2plotRadialBar | RadialBar - 玉珏图 | g2plotRadialBar | G2plotRadialBarModule
 starkG2plotRadar | Radar - 雷达图 | g2plotRadar | G2plotRadarModule
 starkG2plotRose | Rose - 玫瑰图  | g2plotRose | G2plotRoseModule
 starkG2plotScatter | Scatter - 散点图 | g2plotScatter | G2plotScatterModule
+starkG2plotStock | Stock - 股票图 | g2plotStock | G2plotStockModule
+starkG2plotSunburst | Sunburst - 旭日图图 | g2plotSunburst | G2plotSunburstModule
 starkG2plotTinyColumn | TinyColumn - 迷你图 | g2plotTinyColumn | G2plotTinyColumnModule
 starkG2plotWaterfall | Waterfall - 瀑布图  | g2plotWaterfall | G2plotWaterfallModule
 starkG2plotWordCloud | WordCloud - 词云 | g2plotWordCloud | G2plotWordCloudModule
 
+### 关于命名
+
+指令名为 `starkG2plot` + `官方图表名称`, exportAs导出为`g2plot` + `官方图表名称`, Module为 `G2plot` + `官方图表名称` + `Module`
+
 ## g2plot官方文档地址 -- G2plot official document address
 https://g2plot.antv.vision/zh/docs/manual/introduction
 
 
@@ -147,12 +147,13 @@ If you need to get the current diagram instance and all its properties and metho
 
 See the official documentation for all methods of charting: https://g2plot.antv.vision/zh/docs/manual/plot-api
 
-## 所有指令列表 -- All Directive
+## 所有指令列表 -- All Directive 
 
 指令名/Directive | 图表名 | exportAs | Module
 -|-|-|-
 starkG2plotArea | Area - 面积图 | g2plotArea | G2plotAreaModule
 starkG2plotBar | Bar - 基础条形图  | g2plotBar | G2plotBarModule
+starkG2plotBidirectionalBar | BidirectionalBar - 对称条形图 | g2plotBidirectionalBar | G2plotBidirectionalBarModule
 starkG2plotBox | Box - 箱图  | g2plotBox | G2plotBoxModule
 starkG2plotBullet | Bullet - 子弹图 | g2plotBullet | G2plotBulletModule
 starkG2plotColumn | Column - 柱状图  | g2plotColumn | G2plotColumnModule
@@ -164,13 +165,19 @@ starkG2plotHistogram | Histogram - 直方图  | g2plotHistogram | G2plotHistogra
 starkG2plotLine | Line - 折线图 | g2plotLine | G2plotLineModule
 starkG2plotLiquid | Liquid - 水波图 | g2plotLiquid | G2plotLiquidModule
 starkG2plotPie | Pie - 饼图  | g2plotPie | G2plotPieModule
+starkG2plotRadialBar | RadialBar - 玉珏图 | g2plotRadialBar | G2plotRadialBarModule
 starkG2plotRadar | Radar - 雷达图 | g2plotRadar | G2plotRadarModule
 starkG2plotRose | Rose - 玫瑰图  | g2plotRose | G2plotRoseModule
 starkG2plotScatter | Scatter - 散点图 | g2plotScatter | G2plotScatterModule
+starkG2plotStock | Stock - 股票图 | g2plotStock | G2plotStockModule
+starkG2plotSunburst | Sunburst - 旭日图图 | g2plotSunburst | G2plotSunburstModule
 starkG2plotTinyColumn | TinyColumn - 迷你图 | g2plotTinyColumn | G2plotTinyColumnModule
 starkG2plotWaterfall | Waterfall - 瀑布图  | g2plotWaterfall | G2plotWaterfallModule
 starkG2plotWordCloud | WordCloud - 词云 | g2plotWordCloud | G2plotWordCloudModule
 
+### 关于命名
+
+指令名为 `starkG2plot` + `官方图表名称`, exportAs导出为`g2plot` + `官方图表名称`, Module为 `G2plot` + `官方图表名称` + `Module`
 ## g2plot官方文档地址 -- G2plot official document address
 https://g2plot.antv.vision/zh/docs/manual/introduction
 
 
@@ -0,0 +1,14 @@
+/*
+ * @Description:
+ * @Date: 2020-12-02 09:49:11
+ * @LastEditors: tanmh
+ * @LastEditTime: 2020-12-02 09:54:42
+ */
+import { G2plotBidirectionalBarDirective } from './g2plot-bidirectional-bar.directive';
+
+describe('G2plotBidirectionalBarDirective', () => {
+  it('should create an instance', () => {
+    const directive = new G2plotBidirectionalBarDirective();
+    expect(directive).toBeTruthy();
+  });
+});
@@ -0,0 +1,52 @@
+/*
+ * @Description: BidirectionalBar图表指令
+ * @Date: 2020-11-27 10:07:48
+ * @LastEditors: tanmh
+ * @LastEditTime: 2020-12-02 09:51:38
+ */
+import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
+import { BidirectionalBar, BidirectionalBarOptions } from '@antv/g2plot';
+@Directive({
+  selector: '[starkG2plotBidirectionalBar]',
+  exportAs: 'g2plotBidirectionalBar'
+})
+export class G2plotBidirectionalBarDirective implements AfterViewInit {
+
+  @Input() options: BidirectionalBarOptions;
+
+  public instance: BidirectionalBar;
+
+  constructor(
+    private elementRef: ElementRef
+  ) { }
+
+  ngAfterViewInit(): void {
+    const hostElement = this.elementRef.nativeElement;
+    this.instance = new BidirectionalBar(hostElement, this.options);
+    this.instance.render();
+  }
+
+   /**
+    * 通过这个方法，可以增量的更新图表配置
+    * @param options
+    */
+  update(options: BidirectionalBarOptions): void {
+    this.instance.update(options);
+  }
+
+  /**
+   * 通过这个方法，可以修改图表的数据，并自动重新渲染
+   * @param newData
+   */
+  changeData(newData: Array<object>): void {
+    this.instance.changeData(newData);
+  }
+
+  /**
+   * 完全销毁整个画布，回收所有资源，仅仅保留传入的 DOM container 容器
+   */
+  destroy(): void {
+    this.instance.destroy();
+  }
+
+}
@@ -0,0 +1,17 @@
+/*
+ * @Description:
+ * @Date: 2020-12-02 09:48:38
+ * @LastEditors: tanmh
+ * @LastEditTime: 2020-12-02 09:55:29
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { G2plotBidirectionalBarDirective } from './g2plot-bidirectional-bar.directive';
+
+@NgModule({
+  declarations: [G2plotBidirectionalBarDirective],
+  imports: [
+    CommonModule
+  ]
+})
+export class G2plotBidirectionalBarModule { }
@@ -0,0 +1,7 @@
+/*
+ * @Description:
+ * @Date: 2020-12-01 11:55:11
+ * @LastEditors: tanmh
+ * @LastEditTime: 2020-12-01 11:56:33
+ */
+export * from './public-api';
@@ -0,0 +1,7 @@
+{
+    "ngPackage": {
+        "lib": {
+            "entryFile": "public-api.ts"
+        }
+    }
+}
@@ -0,0 +1,8 @@
+/*
+ * @Description:
+ * @Date: 2020-12-01 11:55:06
+ * @LastEditors: tanmh
+ * @LastEditTime: 2020-12-02 09:52:13
+ */
+export * from './g2plot-bidirectional-bar.module';
+export * from './g2plot-bidirectional-bar.directive';
@@ -1,5 +1,6 @@
 export * from './lib/g2plot-area/g2plot-area.module';
 export * from './lib/g2plot-bar/g2plot-bar.module';
+export * from './lib/g2plot-bidirectional-bar/g2plot-bidirectional-bar.module';
 export * from './lib/g2plot-box/g2plot-box.module';
 export * from './lib/g2plot-bullet/g2plot-bullet.module';
 export * from './lib/g2plot-column/g2plot-column.module';
@@ -24,6 +25,7 @@ export * from './lib/g2plot-word-cloud/g2plot-word-cloud.module';
 
 export * from './lib/g2plot-area/g2plot-area.directive';
 export * from './lib/g2plot-bar/g2plot-bar.directive';
+export * from './lib/g2plot-bidirectional-bar/g2plot-bidirectional-bar.directive';
 export * from './lib/g2plot-box/g2plot-box.directive';
 export * from './lib/g2plot-bullet/g2plot-bullet.directive';
 export * from './lib/g2plot-column/g2plot-column.directive';