@alicloud/cloud-charts
Version:

177 lines (142 loc) • 5.51 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Rectangle = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _rectXAxis = _interopRequireDefault(require("../common/rectXAxis"));
var _rectYAxis = _interopRequireDefault(require("../common/rectYAxis"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _guide = _interopRequireDefault(require("../common/guide"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _dataSet = require("@antv/data-set/lib/data-set");
require("@antv/data-set/lib/api/statistics");
require("@antv/data-set/lib/transform/bin/rectangle");
require("./index.css");
var Rectangle = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(Rectangle, _Base);
function Rectangle() {
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 = 'G2Rectangle';
_this.convertData = false;
return _this;
}
var _proto = Rectangle.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: _index["default"].order_10.slice().reverse(),
xAxis: {
labelFormatter: null,
// 可以强制覆盖,手动设置label
autoRotate: false,
max: null,
min: null
},
yAxis: {
labelFormatter: null,
// 可以强制覆盖,手动设置label
max: null,
min: null
},
tooltip: {
nameFormatter: null,
valueFormatter: null
},
bin: {
fields: ['x', 'y'],
bins: [20, 10] // 两个方向上的分箱个数
// binWidth: [ 10, 1000 ], // 两个方向上的分箱步长(会覆盖bins的配置)
// offset: [ 0, 0 ],
},
grid: false,
label: false
};
};
_proto.init = function init(chart, config, data) {
var defs = {
x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
// 折线图X轴的范围默认覆盖全部区域,保证没有空余
range: [0, 1]
}, config.xAxis),
y: (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'linear',
tickCount: 5,
nice: true
}, config.yAxis),
type: {
type: 'cat'
}
};
var ds = new _dataSet.DataSet();
var rectangleDataView = ds.createView('diamond').source(data).transform({
type: 'bin.rectangle',
fields: ['x', 'y'],
// 对应坐标轴上的一个点
bins: [20, 10] // 两个方向上的分箱个数
// binWidth: [10, 10], // 两个方向上的分箱步长(会覆盖bins配置)
// offset: [0, 0], // 两个方向上的分箱偏移量
// sizeByCount: false, // 是否根据分箱个数调整分箱大小
// as: ['x', 'y', 'count'], // 这个点落在的六边形的顶点坐标集
});
chart.scale(defs);
chart.data(rectangleDataView.rows); // 设置X轴
(0, _rectXAxis["default"])(this, chart, config); // 设置单个Y轴
(0, _rectYAxis["default"])(this, chart, config); // 设置图例
chart.legend(false); // tooltip
(0, _rectTooltip["default"])(this, chart, config, {
// 指定为 count,避免 Axis 类型为 time 时会报错。
title: 'count',
showTitle: false,
showMarkers: false,
showCrosshairs: false
}, null, {
showTitle: false,
showMarkers: false,
showCrosshairs: false
}); // 绘制辅助线,辅助背景区域
(0, _guide["default"])(chart, config);
var geom = chart.polygon().position('x*y').color('count', config.colors).tooltip('x*y*count', function (x, y, count) {
return {
// title: x,
name: '数量',
value: count
};
});
(0, _geomStyle["default"])(geom, config.geomStyle, undefined, 'x*y*count');
(0, _label["default"])({
geom: geom,
config: config,
field: 'count',
defaultConfig: {
offset: 0
}
}); // chart.render();
};
_proto.changeData = function changeData(chart, config, data) {
var ds = new _dataSet.DataSet();
var rectangleDataView = ds.createView('diamond').source(data).transform({
type: 'bin.rectangle',
fields: ['x', 'y'],
// 对应坐标轴上的一个点
bins: [20, 10] // 两个方向上的分箱个数
// binWidth: [10, 10], // 两个方向上的分箱步长(会覆盖bins配置)
// offset: [0, 0], // 两个方向上的分箱偏移量
// sizeByCount: false, // 是否根据分箱个数调整分箱大小
// as: ['x', 'y', 'count'], // 这个点落在的六边形的顶点坐标集
});
chart && chart.changeData(rectangleDataView.rows);
};
return Rectangle;
}(_Base2["default"]);
exports.Rectangle = Rectangle;
var Wrectangle = (0, _errorWrap["default"])(Rectangle);
var _default = Wrectangle;
exports["default"] = _default;