@alicloud/cloud-charts/es/Wmulticircle/index.js


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from '../common/Base';
import errorWrap from '../common/errorWrap';
import themes from '../themes/index';
import legendFilter from '../common/legendFilter';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import geomSize from '../common/geomSize';
import geomStyle from '../common/geomStyle';
import circleAnnotation from '../common/circleAnnoation';
import updateChildrenPosition from '../common/updateChildrenPosition';
import "./index.css";
export var MultiCircle = /*#__PURE__*/function (_Base) {
  _inheritsLoose(MultiCircle, _Base);

  function MultiCircle() {
    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 = 'G2MultiCircle';
    _this.legendField = 'x';
    return _this;
  }

  var _proto = MultiCircle.prototype;

  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: themes.category_12,
      legend: {
        position: 'bottom',
        align: 'center',
        nameFormatter: null,
        // 可以强制覆盖，手动设置label
        valueFormatter: null
      },
      tooltip: {
        titleFormatter: null,
        nameFormatter: null,
        valueFormatter: null
      },
      marginRatio: 0,
      size: null,
      // 与饼图保持一致
      innerRadius: 0.6,
      radius: 0.8
    };
  };

  _proto.init = function init(chart, config, data) {
    var _this2 = this;

    // 设置数据度量
    var defs = {
      type: {
        type: 'cat'
      },
      y: {
        nice: false,
        max: config.max // maxLimit: 0.5

      } // percent: {
      //   max: 1,
      //   min: 0
      // }

    };
    chart.scale(defs);
    chart.data(data); // 设置图例

    rectLegend(this, chart, config, {}, true, null, false, function (item, index) {
      var raw = _this2.rawData && _this2.rawData[0] || {};
      return _extends({}, raw, item);
    });
    legendFilter(this, chart); // tooltip

    rectTooltip(this, chart, config, {}, null, {
      showTitle: false,
      showCrosshairs: false,
      showMarkers: false
    });
    circleAnnotation(chart, config, this.size, 'G2MultiCircle'); // 设置坐标系

    chart.coordinate('theta', {
      innerRadius: config.innerRadius || 0.8,
      radius: config.radius || 1
    });
    chart.interaction('element-active');
    drawBar(chart, config, config.colors);
    chart.on('afterpaint', function () {
      updateChildrenPosition(chart, _this2.chartDom);
    });
  };

  return MultiCircle;
}(Base);
var Wmulticircle = errorWrap(MultiCircle);
export default Wmulticircle;

function drawBar(chart, config, colors) {
  var size = config.size,
      _config$minSize = config.minSize,
      minSize = _config$minSize === void 0 ? 4 : _config$minSize,
      _config$maxSize = config.maxSize,
      maxSize = _config$maxSize === void 0 ? 24 : _config$maxSize,
      columnWidthRatio = config.columnWidthRatio;
  var geomConfig = {
    minColumnWidth: minSize || null,
    maxColumnWidth: maxSize || null,
    columnWidthRatio: columnWidthRatio || null
  }; // 多重圆环背景色

  geomConfig = _extends({
    background: {
      style: {
        fill: themes['widgets-circle-stroke-background'],
        fillOpacity: 1
      }
    }
  }, geomConfig);
  var geom = chart.interval(geomConfig).position(['x', 'y']);
  geom = geom.color('x', colors).style({
    lineCap: 'round'
  });
  geomSize(geom, size, null, 'y', 'x*y*type*extra');
  geomStyle(geom, config.geomStyle, {}, 'x*y*type*extra');
}