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 (
       getEchart && getEchart(e)} // 获取eChart组件实例
        option={this.getOption()}
        onChartReady={this.chartReady}
      >
    );
  }
  // const onChartClick = p => {
  //   console.log(p);
  // };

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

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

你可能感兴趣的:(前端,typescript,react.js,echarts)