@alicloud/cloud-charts
Version:
54 lines (53 loc) • 3.48 kB
JavaScript
'use strict';
import _extends from "@babel/runtime/helpers/extends";
import themes from '../themes';
import { numberDecimal } from '../common/common';
import { FullCrossName } from '../constants';
import { warn } from './log';
export default function (chart, config, size, chartName) {
if (!config.showDecoration) {
return;
}
if (config.showDecoration) {
var _ref, _chart$coordinateBBox, _ref2, _chart$coordinateBBox2, _config$showDecoratio, _config$showDecoratio2, _config$showDecoratio3, _config$showDecoratio4;
if (config !== null && config !== void 0 && config.radius) {
config.radius = 0.85;
} else if (config.outerRadius) {
config.outerRadius = 0.85;
}
var viewWidth = (_ref = (_chart$coordinateBBox = chart.coordinateBBox.width) !== null && _chart$coordinateBBox !== void 0 ? _chart$coordinateBBox : size === null || size === void 0 ? void 0 : size[0]) !== null && _ref !== void 0 ? _ref : 0;
var viewHeight = (_ref2 = (_chart$coordinateBBox2 = chart.coordinateBBox.height) !== null && _chart$coordinateBBox2 !== void 0 ? _chart$coordinateBBox2 : size === null || size === void 0 ? void 0 : size[1]) !== null && _ref2 !== void 0 ? _ref2 : 0;
// 视图最小宽高 * 半径 * 内圈半径 - 图例间距 - 留白间距 - 柱子宽度
var innerR = (_config$showDecoratio = (_config$showDecoratio2 = config.showDecoration) === null || _config$showDecoratio2 === void 0 ? void 0 : _config$showDecoratio2.innerRadius) !== null && _config$showDecoratio !== void 0 ? _config$showDecoratio : numberDecimal(Math.min(viewWidth, viewHeight) * (config.radius || config.outerRadius || 1) * (config.innerRadius || 0.5), 0) - 14 * 3;
// 视图最小宽高减去图例间距
var outerR = (_config$showDecoratio3 = (_config$showDecoratio4 = config.showDecoration) === null || _config$showDecoratio4 === void 0 ? void 0 : _config$showDecoratio4.outerRadius) !== null && _config$showDecoratio3 !== void 0 ? _config$showDecoratio3 : numberDecimal(Math.min(viewWidth, viewHeight) / 2 - 14);
if (Math.min(viewWidth, viewHeight) > 60) {
var _config$showDecoratio7;
if (config.cycle || chartName === 'G2MultiCircle') {
var _config$showDecoratio5, _config$showDecoratio6;
chart.annotation().html({
html: "<div class='" + FullCrossName + " circle-innerBackground' style=\"display: flex; align-items: center;height: " + innerR + "px;width: " + innerR + "px;border-radius: 50%;" + ((_config$showDecoratio5 = config === null || config === void 0 ? void 0 : (_config$showDecoratio6 = config.showDecoration) === null || _config$showDecoratio6 === void 0 ? void 0 : _config$showDecoratio6.innerStyle) !== null && _config$showDecoratio5 !== void 0 ? _config$showDecoratio5 : '') + "\"></div>",
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%']
});
}
chart.annotation().dataMarker({
top: false,
text: {
content: ''
},
point: {
style: _extends({
fill: themes['widgets-circle-outer-background'],
stroke: 'rgba(0,0,0,0)',
r: outerR
}, (_config$showDecoratio7 = config.showDecoration) === null || _config$showDecoratio7 === void 0 ? void 0 : _config$showDecoratio7.outerStyle)
},
position: ['50%', '50%']
});
} else {
warn('config.showDecoration', '当前图表尺寸小于60，默认关闭背景装饰');
}
}
}