@alicloud/cloud-charts
Version:

145 lines (138 loc) • 4.17 kB
JavaScript
;
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from "../common/Base";
import errorWrap from '../common/errorWrap';
import themes from '../themes/index';
import { propertyAssign, propertyMap } from '../common/common';
import legendFilter from '../common/legendFilter';
import rectXAxis from '../common/rectXAxis';
import rectYAxis from '../common/rectYAxis';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import guide from '../common/guide';
// import { LabelConfig } from "../common/label";
import geomSize from '../common/geomSize';
import geomStyle from '../common/geomStyle';
import { activeRegionWithTheme } from '../common/interaction/index';
import "./index.css";
export var Box = /*#__PURE__*/function (_Base) {
_inheritsLoose(Box, _Base);
function Box() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Base.call.apply(_Base, [this].concat(args)) || this;
_this.chartName = 'G2Box';
return _this;
}
var _proto = Box.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: themes.category_12,
// padding: ['auto', 'auto', 'auto', 'auto'],
xAxis: {
type: 'cat',
labelFormatter: null,
// 可以强制覆盖,手动设置label
categories: null,
autoRotate: false
},
yAxis: {
labelFormatter: null,
// 可以强制覆盖,手动设置label
max: null,
min: null
},
legend: {
align: 'left',
nameFormatter: null // 可以强制覆盖,手动设置label
},
tooltip: {
titleFormatter: null,
nameFormatter: null,
valueFormatter: null
},
dodge: true,
marginRatio: 0,
grid: false,
// zoom: false,
size: null
// label: false,
};
};
_proto.init = function init(chart, config, data) {
// 设置数据度量
var defs = {
x: propertyAssign(propertyMap.axis, {
type: 'cat'
}, config.xAxis),
y: propertyAssign(propertyMap.axis, {
type: 'linear',
tickCount: 5,
nice: true
}, config.yAxis),
type: {
type: 'cat'
}
};
chart.scale(defs);
chart.data(data);
// 设置单个Y轴
rectYAxis(this, chart, config);
// 设置X轴
rectXAxis(this, chart, config);
// 设置图例
rectLegend(this, chart, config, null, 'multiple', 'type');
legendFilter(this, chart);
// tooltip
rectTooltip(this, chart, config, {}, null, {
showCrosshairs: false,
showMarkers: false
});
activeRegionWithTheme(chart);
// 绘制辅助线,辅助背景区域
guide(chart, config);
drawBox(chart, config, config.colors);
};
return Box;
}(Base);
var Wbox = errorWrap(Box);
export default Wbox;
function drawBox(chart, config, colors, field) {
if (field === void 0) {
field = 'type';
}
var dodge = config.dodge,
marginRatio = config.marginRatio,
size = config.size;
var geom = chart.schema().position(['x', 'y']).shape('box').color(field, colors).state({
active: {
style: function style(ele) {
var _ele$model;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model = ele.model) === null || _ele$model === void 0 ? void 0 : _ele$model.color
};
}
},
selected: {
style: function style(ele) {
var _ele$model2;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model2 = ele.model) === null || _ele$model2 === void 0 ? void 0 : _ele$model2.color
};
}
}
});
if (dodge !== false) {
geom.adjust([{
type: 'dodge',
marginRatio: marginRatio || 0.5 // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
}]);
}
geomSize(geom, size, null, 'y', 'x*y*type*extra');
geomStyle(geom, config.geomStyle, {
lineWidth: 2
}, 'x*y*type*extra');
// label(geom, config);
}