From b1df3b339bf07d4f6a2b8fdc62ed3bc4c93f2d0d Mon Sep 17 00:00:00 2001
From: Colder Xihk <cncolder@users.noreply.github.com>
Date: Sat, 16 Nov 2019 08:15:59 +0800
Subject: [PATCH] fix: use @types/echarts as option type (#325)

---
 lib/index.d.ts | 65 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/lib/index.d.ts b/lib/index.d.ts
index bcc2ff0..6649b63 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="react" />
 
 import * as React from 'react';
+import { EChartOption, EChartsLoadingOption } from 'echarts';
 
 type Func = (...args: any[]) => any;
 
@@ -21,16 +22,74 @@ interface optsMap {
 
 // Index
 export interface ReactEchartsPropsTypes {
-  option: ObjectMap;
+  /**
+   * the echarts option config
+   * @see http://echarts.baidu.com/option.html#title
+   */
+  option: EChartOption;
+  /**
+   * when `setOption`, not merge the data.
+   * @default false
+   * @see http://echarts.baidu.com/api.html#echartsInstance.setOption
+   */
   notMerge?: boolean;
+  /**
+   * when `setOption`, lazy update the data.
+   * @default false
+   * @see http://echarts.baidu.com/api.html#echartsInstance.setOption
+   */
   lazyUpdate?: boolean;
-  style?: ObjectMap;
+  /**
+   * the `style` of echarts div.
+   * @default {height: '300px'}
+   */
+  style?: React.CSSProperties;
+  /**
+   * the `class` of echarts div. you can setting the css style of charts by class name.
+   */
   className?: string;
+  /**
+   * the `theme` of echarts. should `registerTheme` before use it.
+   * @see https://github.com/ecomfe/echarts/blob/master/theme/dark.js)
+   * @example
+   * ```
+      // register theme object
+      echarts.registerTheme('my_theme', { backgroundColor: '#f4cccc' });
+      // render the echarts use option `theme`
+      <ReactEcharts option={this.getOption()} theme='my_theme' />
+   * ```
+   */
   theme?: string | null | ObjectMap;
+  /**
+   * when the chart is ready, will callback the function with the `echarts object` as it's paramter.
+   */
   onChartReady?: Func;
+  /**
+   * when the chart is rendering, show the loading mask.
+   */
   showLoading?: boolean;
-  loadingOption?: ObjectMap;
+  /**
+   * the echarts loading option config.
+   * @see http://echarts.baidu.com/api.html#echartsInstance.showLoading
+   */
+  loadingOption?: EChartsLoadingOption;
+  /**
+   * binding the echarts event, will callback with the `echarts event object`, and the `echart object` as it's paramters.
+   * @example
+   * ```
+      let onEvents = {
+        'click': this.onChartClick,
+        'legendselectchanged': this.onChartLegendselectchanged
+      }
+      <ReactEcharts onEvents={onEvents} />
+   * ```
+   * @see: http://echarts.baidu.com/api.html#events
+   */
   onEvents?: EventMap;
+  /**
+   * the `opts` of echarts. will be used when initial echarts instance by `echarts.init`.
+   * @see http://echarts.baidu.com/api.html#echarts.init
+   */
   opts?: optsMap;
   shouldSetOption?: Func;
 }