@linkdesign/screen/lib/echart/index.js

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodashEs = require("lodash-es");
var echarts = _interopRequireWildcard(require("echarts"));
var _title = _interopRequireDefault(require("../title"));
var _context = _interopRequireDefault(require("../context"));
var _Utils = require("../Utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
 * echarts图表
 *
 * @class EChart
 * @extends {PureComponent<IProps>}
 */
var EChart = /*#__PURE__*/function (_PureComponent) {
  (0, _inheritsLoose2["default"])(EChart, _PureComponent);
  function EChart(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    _this.containerRef = void 0;
    _this.titleRef = void 0;
    _this.chartRef = void 0;
    _this.chart = void 0;
    _this.handlerResize = function () {
      if (_this.chart) {
        _this.chart.resize();
      }
    };
    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
    _this.titleRef = /*#__PURE__*/_react["default"].createRef();
    _this.chartRef = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }
  var _proto = EChart.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    var _this$props = this.props,
      loading = _this$props.loading,
      options = _this$props.options,
      onInit = _this$props.onInit;
    var containerDom = this.containerRef.current;
    var titleDom = this.titleRef.current;
    window.addEventListener('resize', this.handlerResize);
    this.chart = echarts.init(this.chartRef.current, null, {
      height: titleDom ? containerDom.clientHeight - (0, _Utils.Dimension)(titleDom) : containerDom.clientHeight
    });
    this.chart.on('finished', function () {
      var hasData = _this2.props.options.series.some(function (el) {
        return el.data && el.data.length > 0;
      });
      if (!hasData && _this2.props.options.placeholder) {
        var dom = _this2.chart.getDom();
        var canvas = dom.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
          dom.style.pointerEvents = 'none';
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = _this2.props.options.placeholder;
      }
    });
    if (loading) {
      this.chart.showLoading('default', {
        maskColor: 'rgba(17, 40, 84, 0.3)',
        textColor: '#D3E2FF'
      });
    }
    this.chart.setOption((0, _extends2["default"])({
      color: _Utils.DATA_COLORS
    }, options));
    onInit(this.chart);
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$props2 = this.props,
      loading = _this$props2.loading,
      options = _this$props2.options;
    if (!(0, _lodashEs.isEqual)(prevProps.loading, loading)) {
      if (loading) {
        this.chart.showLoading('default', {
          maskColor: 'rgba(17, 40, 84, 0.3)',
          textColor: '#D3E2FF'
        });
      } else {
        this.chart.hideLoading();
        var dom = this.chart.getDom();
        dom.style.pointerEvents = 'auto';
      }
    }
    if (!(0, _lodashEs.isEqual)(prevProps.options, options)) {
      this.chart.setOption(options);
    }
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener('resize', this.handlerResize);
  };
  _proto.render = function render() {
    var _cssPrefix = this.context._cssPrefix;
    var _this$props3 = this.props,
      className = _this$props3.className,
      title = _this$props3.title,
      titleOptions = _this$props3.titleOptions,
      universalStyle = _this$props3.universalStyle;
    return /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.containerRef,
      className: (0, _classnames["default"])(className, _cssPrefix + "chart-wrapper"),
      style: {
        width: (0, _lodashEs.get)(universalStyle, 'width'),
        height: (0, _lodashEs.get)(universalStyle, 'height', 220)
      }
    }, title &&
    /*#__PURE__*/
    // @ts-ignore
    _react["default"].createElement(_title["default"], (0, _extends2["default"])({}, titleOptions, {
      forwardRef: this.titleRef,
      className: (0, _classnames["default"])(_cssPrefix + "chart-title", _cssPrefix + "main-chart-title", (0, _lodashEs.get)(titleOptions, 'className'))
    }), title), /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.chartRef,
      className: _cssPrefix + "chart-content"
    }));
  };
  return EChart;
}(_react.PureComponent); // @ts-ignore
EChart.defaultProps = {
  className: null,
  loading: false,
  options: {},
  onInit: function onInit() {},
  titleOptions: {
    align: 'left',
    textStyle: {
      marginBottom: 8
    }
  }
};
EChart.contextType = _context["default"];
var _default = exports["default"] = EChart;