UNPKG

@linkdesign/screen

Version:

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

86 lines (85 loc) 3.39 kB
"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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _react = _interopRequireWildcard(require("react")); var _classnames = _interopRequireDefault(require("classnames")); var _lodashEs = require("lodash-es"); var _echart = _interopRequireDefault(require("../echart")); var _context = _interopRequireDefault(require("../context")); var _Utils = require("../Utils"); var _excluded = ["className", "dataSource", "options"]; 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; } var OPTIONS = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { icon: 'circle', orient: 'vertical', top: 'middle', left: 'right', align: 'left', itemWidth: 6, textStyle: { fontFamily: 'HelveticaNeue-CondensedBold', textBorderColor: '#fff', textBorderWidth: 2, fontSize: 12 } }, series: [{ name: '数据来源', type: 'pie', radius: [45, 55], center: [60, '50%'], avoidLabelOverlap: false, // label: { // show: false, // position: 'center' // }, emphasis: { label: { show: true, formatter: '{c}', fontSize: 20, fontWeight: 'bold', fontFamily: 'HelveticaNeue-CondensedBold' } }, labelLine: { show: false } }] }; /** * 环状堆叠占比图 * @param props IProps */ var RingStackChart = function RingStackChart(props) { var _useContext = (0, _react.useContext)(_context["default"]), _cssPrefix = _useContext._cssPrefix; var className = props.className, dataSource = props.dataSource, options = props.options, others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); return /*#__PURE__*/_react["default"].createElement(_echart["default"], (0, _extends2["default"])({ className: (0, _classnames["default"])(className, _cssPrefix + "ring-stack-chart-wrapper"), loading: (0, _Utils.isInvalid)(dataSource), options: (0, _lodashEs.merge)(JSON.parse(JSON.stringify(OPTIONS)), { series: [{ data: dataSource, label: { show: true, position: 'center', formatter: "" + (0, _lodashEs.sumBy)(dataSource, 'value') } }] }, options) }, others)); }; var _default = exports["default"] = RingStackChart;