@ttk/component/es/echarts/index.js

ttk组件库

import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import { _ as _asyncToGenerator, r as regenerator } from '../index-8cf76f53.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import { sizeSensor } from '@ttk/utils';
import '../_commonjsHelpers-471920d6.js';

var colorPalette$1 = ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa', '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050', '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'];
var macarons = {
  color: colorPalette$1,
  title: {
    textStyle: {
      fontWeight: 'normal',
      color: '#008acd'
    }
  },
  visualMap: {
    itemWidth: 15,
    color: ['#5ab1ef', '#e0ffff']
  },
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: colorPalette$1[0]
      }
    }
  },
  tooltip: {
    backgroundColor: 'rgba(50,50,50,0.5)',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#008acd'
      },
      crossStyle: {
        color: '#008acd'
      },
      shadowStyle: {
        color: 'rgba(200,200,200,0.2)'
      }
    }
  },
  dataZoom: {
    dataBackgroundColor: '#efefff',
    fillerColor: 'rgba(182,162,222,0.2)',
    handleColor: '#008acd'
  },
  grid: {
    borderColor: '#eee'
  },
  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: '#008acd'
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  },
  valueAxis: {
    axisLine: {
      lineStyle: {
        color: '#008acd'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  },
  timeline: {
    lineStyle: {
      color: '#008acd'
    },
    controlStyle: {
      normal: {
        color: '#008acd'
      },
      emphasis: {
        color: '#008acd'
      }
    },
    symbol: 'emptyCircle',
    symbolSize: 3
  },
  line: {
    smooth: true,
    symbol: 'emptyCircle',
    symbolSize: 3
  },
  candlestick: {
    itemStyle: {
      normal: {
        color: '#d87a80',
        color0: '#2ec7c9',
        lineStyle: {
          color: '#d87a80',
          color0: '#2ec7c9'
        }
      }
    }
  },
  scatter: {
    symbol: 'circle',
    symbolSize: 4
  },
  map: {
    label: {
      normal: {
        textStyle: {
          color: '#d87a80'
        }
      }
    },
    itemStyle: {
      normal: {
        borderColor: '#eee',
        areaColor: '#ddd'
      },
      emphasis: {
        areaColor: '#fe994e'
      }
    }
  },
  graph: {
    color: colorPalette$1
  },
  gauge: {
    axisLine: {
      lineStyle: {
        color: [[0.2, '#2ec7c9'], [0.8, '#5ab1ef'], [1, '#d87a80']],
        width: 10
      }
    },
    axisTick: {
      splitNumber: 10,
      length: 15,
      lineStyle: {
        color: 'auto'
      }
    },
    splitLine: {
      length: 22,
      lineStyle: {
        color: 'auto'
      }
    },
    pointer: {
      width: 5
    }
  }
};

var colorPalette = ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'];
var shine = {
  color: colorPalette,
  title: {
    textStyle: {
      fontWeight: 'normal'
    }
  },
  visualMap: {
    color: ['#1790cf', '#a2d4e6']
  },
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: '#06467c'
      }
    }
  },
  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.6)'
  },
  dataZoom: {
    dataBackgroundColor: '#dedede',
    fillerColor: 'rgba(154,217,247,0.2)',
    handleColor: '#005eaa'
  },
  timeline: {
    lineStyle: {
      color: '#005eaa'
    },
    controlStyle: {
      normal: {
        color: '#005eaa',
        borderColor: '#005eaa'
      }
    }
  },
  candlestick: {
    itemStyle: {
      normal: {
        color: '#c12e34',
        color0: '#2b821d',
        lineStyle: {
          width: 1,
          color: '#c12e34',
          color0: '#2b821d'
        }
      }
    }
  },
  graph: {
    color: colorPalette
  },
  map: {
    label: {
      normal: {
        textStyle: {
          color: '#c12e34'
        }
      },
      emphasis: {
        textStyle: {
          color: '#c12e34'
        }
      }
    },
    itemStyle: {
      normal: {
        borderColor: '#eee',
        areaColor: '#ddd'
      },
      emphasis: {
        areaColor: '#e6b600'
      }
    }
  },
  gauge: {
    axisLine: {
      show: true,
      lineStyle: {
        color: [[0.2, '#2b821d'], [0.8, '#005eaa'], [1, '#c12e34']],
        width: 5
      }
    },
    axisTick: {
      splitNumber: 10,
      length: 8,
      lineStyle: {
        color: 'auto'
      }
    },
    axisLabel: {
      textStyle: {
        color: 'auto'
      }
    },
    splitLine: {
      length: 12,
      lineStyle: {
        color: 'auto'
      }
    },
    pointer: {
      length: '90%',
      width: 3,
      color: 'auto'
    },
    title: {
      textStyle: {
        color: '#333'
      }
    },
    detail: {
      textStyle: {
        color: 'auto'
      }
    }
  }
};

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var SingleClass = function SingleClass() {
  var _this = this;

  _classCallCheck(this, SingleClass);

  this.echarts = null;
  this.Component = null;
  this.emit = {};
  this.send = false;

  this.load = function () {
    var arr = _this.emit;

    for (var _i = 0, _Object$values = Object.values(arr); _i < _Object$values.length; _i++) {
      var value = _Object$values[_i];
      value && value();
    }

    _this.emit = {};
  };

  this.load = this.load.bind(this);
};

var SingleObj = new SingleClass();

var EcharsComponent = /*#__PURE__*/function (_React$Component) {
  _inherits(EcharsComponent, _React$Component);

  var _super = _createSuper(EcharsComponent);

  function EcharsComponent(props) {
    var _this2;

    _classCallCheck(this, EcharsComponent);

    _this2 = _super.call(this, props);

    _this2.loadEcharts = function () {
      return new Promise(function (resolve, reject) {
        var dom = document.createElement('script');
        dom.type = 'text/javascript';
        dom.charset = 'utf-8';
        dom.src = "./vendor/echarts.min.js";
        dom.onload = resolve;
        document.body.appendChild(dom);
      });
    };

    _this2.loadZrender = function () {
      return new Promise(function (resolve, reject) {
        var dom = document.createElement('script');
        dom.type = 'text/javascript';
        dom.charset = 'utf-8';
        dom.src = "./vendor/zrender.min.js";
        dom.onload = resolve;
        document.body.appendChild(dom);
      });
    };

    _this2.loadDependencies = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
      var Component;
      return regenerator.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              SingleObj.send = true;
              _context.next = 3;
              return Promise.all([_this2.loadEcharts(), _this2.loadZrender()]);

            case 3:
              // const res = await this.loadPackage()
              // let Component = res['default']
              Component = getEchartsForReact();
              Component.registerTheme = echarts.registerTheme;
              echarts.registerTheme('shine', shine);
              echarts.registerTheme('macarons', macarons);
              SingleObj.Component = Component;
              SingleObj.load();

              _this2.setState({});

            case 10:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    _this2.loadSuccess = function () {
      _this2.setState({});
    };

    _this2.state = {};
    _this2.keyRandom = Math.floor(Math.random() * 10000);
    return _this2;
  }

  _createClass(EcharsComponent, [{
    key: "render",
    value: function render() {
      var Component = SingleObj.Component,
          emit = SingleObj.emit,
          send = SingleObj.send;
      var props = this.props;

      if (Component) {
        return /*#__PURE__*/React__default.createElement(Component, props);
      } else {
        if (!send) {
          this.loadDependencies();
        } else {
          emit[this.keyRandom] = this.loadSuccess;
        }

        return null;
      }
    }
  }]);

  return EcharsComponent;
}(React__default.Component);

function getEchartsForReact() {
  var pick = function pick(obj, keys) {
    var r = {};
    keys.forEach(function (key) {
      r[key] = obj[key];
    });
    return r;
  };

  var EchartsReactCore = /*#__PURE__*/function (_React$Component2) {
    _inherits(EchartsReactCore, _React$Component2);

    var _super2 = _createSuper(EchartsReactCore);

    function EchartsReactCore(props) {
      var _this3;

      _classCallCheck(this, EchartsReactCore);

      _this3 = _super2.call(this, props);

      _this3.getEchartsInstance = function () {
        return _this3.echartsLib.getInstanceByDom(_this3.echartsElement) || _this3.echartsLib.init(_this3.echartsElement, _this3.props.theme, _this3.props.opts);
      };

      _this3.dispose = function () {
        if (_this3.echartsElement) {
          try {
            sizeSensor.clear(_this3.echartsElement);
          } catch (e) {
            console.warn(e);
          } // dispose echarts instance


          _this3.echartsLib.dispose(_this3.echartsElement);
        }
      };

      _this3.rerender = function () {
        var _this3$props = _this3.props,
            onEvents = _this3$props.onEvents,
            onChartReady = _this3$props.onChartReady;

        var echartObj = _this3.renderEchartDom();

        _this3.bindEvents(echartObj, onEvents || {}); // on chart ready


        if (typeof onChartReady === 'function') _this3.props.onChartReady(echartObj); // on resize

        if (_this3.echartsElement) {
          sizeSensor.bind(_this3.echartsElement, function () {
            try {
              echartObj.resize();
            } catch (e) {
              console.warn(e);
            }
          });
        }
      };

      _this3.bindEvents = function (instance, events) {
        var _bindEvent = function _bindEvent(eventName, func) {
          // ignore the event config which not satisfy
          if (typeof eventName === 'string' && typeof func === 'function') {
            // binding event
            // instance.off(eventName); // 已经 dispose 在重建，所以无需 off 操作
            instance.on(eventName, function (param) {
              func(param, instance);
            });
          }
        }; // loop and bind


        for (var eventName in events) {
          if (Object.prototype.hasOwnProperty.call(events, eventName)) {
            _bindEvent(eventName, events[eventName]);
          }
        }
      };

      _this3.renderEchartDom = function () {
        // init the echart object
        var echartObj = _this3.getEchartsInstance(); // set the echart option


        echartObj.setOption(_this3.props.option, _this3.props.notMerge || false, _this3.props.lazyUpdate || false); // set loading mask

        if (_this3.props.showLoading) echartObj.showLoading(_this3.props.loadingOption || null);else echartObj.hideLoading();
        return echartObj;
      };

      _this3.echartsLib = props.echarts; // the echarts object.

      _this3.echartsElement = null; // echarts div element

      return _this3;
    } // first add


    _createClass(EchartsReactCore, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        this.rerender();
      } // update

    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate(prevProps) {
        // 判断是否需要 setOption，由开发者自己来确定。默认为 true
        if (typeof this.props.shouldSetOption === 'function' && !this.props.shouldSetOption(prevProps, this.props)) {
          return;
        } // 以下属性修改的时候，需要 dispose 之后再新建
        // 1. 切换 theme 的时候
        // 2. 修改 opts 的时候
        // 3. 修改 onEvents 的时候，这样可以取消所有之前绑定的事件 issue #151


        if (!sizeSensor.isEqual(prevProps.theme, this.props.theme) || !sizeSensor.isEqual(prevProps.opts, this.props.opts) || !sizeSensor.isEqual(prevProps.onEvents, this.props.onEvents)) {
          this.dispose();
          this.rerender(); // 重建

          return;
        } // 当这些属性保持不变的时候，不 setOption


        var pickKeys = ['option', 'notMerge', 'lazyUpdate', 'showLoading', 'loadingOption'];

        if (sizeSensor.isEqual(pick(this.props, pickKeys), pick(prevProps, pickKeys))) {
          return;
        }

        var echartObj = this.renderEchartDom(); // 样式修改的时候，可能会导致大小变化，所以触发一下 resize

        if (!sizeSensor.isEqual(prevProps.style, this.props.style) || !sizeSensor.isEqual(prevProps.className, this.props.className)) {
          try {
            echartObj.resize();
          } catch (e) {
            console.warn(e);
          }
        }
      } // remove

    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        this.dispose();
      } // return the echart object

    }, {
      key: "render",
      value: function render() {
        var _this4 = this;

        var _this$props = this.props,
            style = _this$props.style,
            className = _this$props.className;

        var newStyle = _objectSpread({
          height: 300
        }, style); // for render


        return /*#__PURE__*/React__default.createElement("div", {
          ref: function ref(e) {
            _this4.echartsElement = e;
          },
          style: newStyle,
          className: "echarts-for-react ".concat(className)
        });
      }
    }]);

    return EchartsReactCore;
  }(React__default.Component);

  EchartsReactCore.propTypes = {
    option: PropTypes.object.isRequired,
    // eslint-disable-line react/forbid-prop-types
    echarts: PropTypes.object,
    // eslint-disable-line react/forbid-prop-types
    notMerge: PropTypes.bool,
    lazyUpdate: PropTypes.bool,
    style: PropTypes.object,
    // eslint-disable-line react/forbid-prop-types
    className: PropTypes.string,
    theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    onChartReady: PropTypes.func,
    showLoading: PropTypes.bool,
    loadingOption: PropTypes.object,
    // eslint-disable-line react/forbid-prop-types
    onEvents: PropTypes.object,
    // eslint-disable-line react/forbid-prop-types
    opts: PropTypes.shape({
      devicePixelRatio: PropTypes.number,
      renderer: PropTypes.oneOf(['canvas', 'svg']),
      width: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null, undefined, 'auto'])]),
      height: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null, undefined, 'auto'])])
    }),
    shouldSetOption: PropTypes.func
  };
  EchartsReactCore.defaultProps = {
    echarts: {},
    notMerge: false,
    lazyUpdate: false,
    style: {},
    className: '',
    theme: null,
    onChartReady: function onChartReady() {},
    showLoading: false,
    loadingOption: null,
    onEvents: {},
    opts: {},
    shouldSetOption: function shouldSetOption() {
      return true;
    }
  };

  var EchartsReact = /*#__PURE__*/function (_EchartsReactCore) {
    _inherits(EchartsReact, _EchartsReactCore);

    var _super3 = _createSuper(EchartsReact);

    function EchartsReact(props) {
      var _this5;

      _classCallCheck(this, EchartsReact);

      _this5 = _super3.call(this, props);
      _this5.echartsLib = echarts;
      return _this5;
    }

    return EchartsReact;
  }(EchartsReactCore);

  return EchartsReact;
}

export { EcharsComponent as default };