# all files / src/ ECharts.js

97.14% Statements 34/35
50% Branches 2/4
91.67% Functions 11/12
97.14% Lines 34/35

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128

    1×

    1×

    5×

    1×

    1×

    5×
    5×
    5×

    5×
    5×
    2×

    5×

    1×
    1×
    1×

    6×
    6×
    6×
    6×

    6×

    6×

    6×

    6×

    8×

    1×
    1×
    1×

    1×
    1×
    6×

    1×

    1×
    1×
    1×

     import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import echarts from 'echarts';
    import onResize from 'element-resize-event';
    import omit from 'lodash/omit';
    import get from 'lodash/get';

    const propTypes = {
      /*eslint-disable */
      style: PropTypes.object,
      theme: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
      ]),
      group: PropTypes.string,
      option: PropTypes.object.isRequired,
      // 是否不跟之前设置的option进行合并，默认为true，不合并
      notMerge: PropTypes.bool,
      // 在设置完option后是否不立即刷新画布，默认为false，即立即刷新
      notRefreshImmediately: PropTypes.bool,
      /*eslint-disable */
      onEvents: PropTypes.object
    };

    const defaultProps = {
      notMerge: true,
      notRefreshImmediately: false,
      onEvents: {},
      style: {},
      theme: {}
    };

    class ECharts extends Component {

      componentDidMount() {
        this.init();
      }

      componentDidUpdate() {
        this.renderEcharts();
      }

      componentWillUnmount() {
        this.dispose();
      }

      init() {
        this.chart = echarts.init(this.container, this.props.theme);
        this.renderEcharts();
        this.initEvents();
      }

      initEvents() {
        let onEvents = this.props.onEvents;
        for (let eventName in onEvents) {
          this.chart.on(eventName, onEvents[eventName]);
        }

        onResize(this.container, () => {
          this.chart.resize();
        });
      }

      dispose() {
        Eif (this.chart) {
          this.chart.dispose();
          this.chart = null;
        }
      }

      renderEcharts() {

        let { option, notMerge, notRefreshImmediately } = this.props;
        this.chart.showLoading();
        this.chart.setOption(option, notMerge, notRefreshImmediately);
        this.chart.hideLoading();

      }

      render() {
        const {
          id,
          option,
          style,
          ...props,
        } = this.props;

        const styles = Object.assign({
          width: '100%',
          height: '100%'
        }, style);

        const elementProps = omit(props, Object.keys(propTypes));

        return (
          <div
            {...elementProps}
            id={id}
            ref={(ref) => {
              this.container = ref;
            }}
            style={styles}
          />
        );
      }
    }

    ECharts.propTypes = propTypes;
    ECharts.defaultProps = defaultProps;
    ECharts.displayName = 'ECharts';

    const APIS = ['getMap', 'connect', 'disConnect', 'getInstanceByDom', 'registerMap', 'registerTheme'];
    APIS.forEach((api) => {
      ECharts[api] = echarts[api];
    });

    ECharts.dispatchAction = function (instance, payload) {

      const container = get(instance, 'container') || document.getElementById(instance);
      const chartInstance = echarts.getInstanceByDom(container);
      return chartInstance.dispatchAction(payload);
    };

    export default ECharts;