data-vis-ui
Version:
## [使用文档](https://temp-static-domain.jd.com/data-vis-ui)
145 lines (127 loc) • 6.51 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/*
* @Author: rumengkai
* @Date: 2022-03-14 14:53:23
* @Description: 封装图表，简化使用
* @@copyRight: 京东科技IOT
*/
import { __awaiter, __rest } from "tslib";
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { getOption } from './data';
import { ErrorBoundary } from 'data-vis-ui';
import { useRequest, useUpdateEffect } from 'ahooks';
import { classPrefix } from '../../config/env';
import classNames from 'classnames';
import { merge } from 'lodash';
var SmartChart = function SmartChart(props) {
// useWhyDidYouUpdate('SmartChart', props);
var chartRef = useRef(null);
var type = props.type,
params = props.params,
_props$option = props.option,
option = _props$option === void 0 ? null : _props$option,
_props$manual = props.manual,
manual = _props$manual === void 0 ? false : _props$manual,
request = props.request,
polling = props.polling,
_props$pollingWhenHid = props.pollingWhenHidden,
pollingWhenHidden = _props$pollingWhenHid === void 0 ? true : _props$pollingWhenHid,
onRequestError = props.onRequestError,
onLoad = props.onLoad,
_props$defaultData = props.defaultData,
defaultData = _props$defaultData === void 0 ? {
axis: [],
series: []
} : _props$defaultData,
actionRef = props.actionRef,
_props$requestConfig = props.requestConfig,
requestConfig = _props$requestConfig === void 0 ? {} : _props$requestConfig,
onOptionChange = props.onOptionChange,
onEvents = props.onEvents,
args = __rest(props, ["type", "params", "option", "manual", "request", "polling", "pollingWhenHidden", "onRequestError", "onLoad", "defaultData", "actionRef", "requestConfig", "onOptionChange", "onEvents"]);
var _useState = useState(getOption(type, defaultData.axis, defaultData.series, option)),
_useState2 = _slicedToArray(_useState, 2),
_option = _useState2[0],
setOption = _useState2[1];
var chartRequest = useRequest(request, Object.assign(Object.assign({}, requestConfig), {
manual: manual,
pollingInterval: polling,
defaultParams: [params],
pollingWhenHidden: pollingWhenHidden,
onSuccess: function onSuccess(result) {
if (result && result.data) {
var _result$data = result.data,
_result$data$axis = _result$data.axis,
axis = _result$data$axis === void 0 ? [] : _result$data$axis,
_result$data$series = _result$data.series,
series = _result$data$series === void 0 ? {} : _result$data$series;
setOptionFun(getOption(type, axis, series), option);
onLoad && onLoad(result);
} else {
console.warn('data-vis-ui:请检查请求返回结果格式:', result);
}
},
onError: function onError(error) {
onRequestError(error);
}
})); // 供父组件调用子组件的方法
useImperativeHandle(actionRef, function () {
return {
chartRequest: chartRequest,
chartRef: chartRef.current
};
}); // 参数变化，重新触发请求
useUpdateEffect(function () {
chartRequest.run(params);
}, [params]);
var setOptionFun = function setOptionFun(_o1, _o2) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var o;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return merge({}, _o1, _o2);
case 2:
o = _context.sent;
setOption(o);
onOptionChange && onOptionChange(o);
case 5:
case "end":
return _context.stop();
}
}
}, _callee);
}));
}; // 如果存在参数 option，则合并两个option
useEffect(function () {
option && setOptionFun(getOption(type, defaultData.axis, defaultData.series, option), option);
}, [option]);
var classes = classNames("".concat(classPrefix, "-smart-chart"));
var ErrorComponent = props.ErrorBoundary === false ? React.Fragment : props.ErrorBoundary || ErrorBoundary;
var errorChildren = /*#__PURE__*/React.createElement("h1", {
style: {
color: '#fff'
}
}, "\u8BF7\u68C0\u67E5\u63A5\u53E3\u6570\u636E\u683C\u5F0F\uFF0C\u9700\u8981\u9075\u5B88\u6309\u7167\u56FE\u8868\u6570\u636E\u683C\u5F0F\u89C4\u7EA6");
return /*#__PURE__*/React.createElement("div", {
className: classes
}, /*#__PURE__*/React.createElement(ErrorComponent, {
errorChildren: errorChildren
}, /*#__PURE__*/React.createElement(ReactEcharts, Object.assign({
ref: chartRef,
onEvents: onEvents || {
click: function click() {},
legendselectchanged: function legendselectchanged() {}
},
option: _option
}, args))));
};
export default SmartChart;