zhu-jiang-yi-yuan-mobile/es/components/gauge/index.js

南方医科大学珠江医院移动端

import { Const } from '../../utils';
import { GaugeChart } from 'bizcharts';
import { NConst } from 'nsn-const';
import React from 'react';
import './index.less';
var CLS_PREFIX = "".concat(Const.CLS_PREFIX, "-gauge"); // https://bizcharts.net/product/BizCharts4/category/77/page/143

var Gauge = function Gauge(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? 0 : _props$value,
      _props$color = props.color,
      color = _props$color === void 0 ? '#1F8FFB' : _props$color,
      className = props.className,
      valueLabel = props.valueLabel;
  var newValue = parseFloat((value * 100).toFixed(2));
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(CLS_PREFIX, " ").concat(className || NConst.EMPTY)
  }, /*#__PURE__*/React.createElement(GaugeChart, {
    data: [],
    value: newValue,
    height: 130,
    width: 130,
    renderer: "svg",
    padding: [5, 5, 5, 5],
    min: 0,
    max: 100,
    range: [0, newValue],
    rangeStyle: {
      fill: color
    },
    rangeBackgroundStyle: {
      fill: '#f0f0f0'
    },
    rangeSize: 4,
    pivot: {
      thickness: 2,
      pointer: {
        style: {
          fill: color
        }
      },
      base: {
        style: {
          fill: color
        }
      },
      pin: {
        style: {
          fill: color
        }
      }
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "statistic",
    style: {
      color: color
    }
  }, "".concat(valueLabel ? "".concat(valueLabel, "\uFF1A") : NConst.EMPTY).concat(newValue, "%")));
};

export { Gauge };