UNPKG

@alicloud/cloud-charts

Version:

![](https://img.shields.io/npm/v/@alicloud/cloud-charts?color=%23ff8200)

153 lines (130 loc) 4.15 kB
'use strict'; 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'; 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, false, '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); }