React+Echarts+TypeScript

• 安裝依賴

npm install --save echarts-for-react

• 使用

import React, { PureComponent } from 'react';
import ReactEcharts from 'echarts-for-react';

 // 將echarts的某些事件，在最初的時候激活 
 public chartReady = (chart): void => {
    chart.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect', // 框選事件
      dataZoomSelectActive: true
    });
  };

  public render(): JSX.Element {
    this.setLegendPosition('top');

    return (
      <ReactEcharts
        // onEvents={onEvents} // 監聽事件方法
        // ref={(e: any) => getEchart && getEchart(e)} // 獲取eChart組件實例
        option={this.getOption()}
        onChartReady={this.chartReady}
      ></ReactEcharts>
    );
  }

// const onChartClick = p => {
  //   console.log(p);
  // };

  // const onEvents = {
  //   datazoom: onChartClick
  //   mousedown:onChartClick
  // };

  // const getEchart = (e: any) => {
  //   if (e) {
  //     this.echart = e.getEchartsInstance();
  //   }
  // };