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                                                                                                                                                                                           
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;