wetrade-design/lib/radar-chart/src/radarChart.js

一款多语言支持Vue3的UI框架

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.RadarChartProps = void 0;
var _vue = require("vue");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _spin = _interopRequireDefault(require("../../spin"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _constants = require("./constants");
var _chartsColors = require("../../_util/chartsColors");
var echarts = _interopRequireWildcard(require("echarts"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var RadarChartProps = function RadarChartProps() {
  return {
    quotationColor: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 饼图颜色
    colors: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    // 画布宽度
    width: {
      type: [Number, String],
      default: '420px'
    },
    // 画布高度
    height: {
      type: [Number, String],
      default: '300px'
    },
    // 图表数据[]，结构为name = String, data = []
    chartData: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    showLegend: {
      type: Boolean,
      default: true
    },
    legend: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    legendItemGap: {
      type: Number,
      default: 12
    },
    radius: {
      type: Number,
      default: 100
    },
    // 相应canvas位置
    center: {
      type: Array,
      default: function _default() {
        return ['50%', '50%'];
      }
    },
    // 显示在label的单位
    unit: {
      type: String,
      default: ''
    },
    // abel的数据[]，可携带name, max, 显示值等
    labelList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    // 动画时长
    animationDuration: {
      type: Number,
      default: 500
    },
    // 是否显示分隔区域
    splitArea: {
      type: Boolean,
      default: false
    },
    // 分隔区域个数
    splitNumber: {
      type: Number,
      default: 4
    },
    symbol: {
      type: String,
      default: 'circle'
    },
    symbolSize: {
      type: Number,
      default: 4
    },
    lineWidth: {
      type: Number,
      default: 1
    },
    areaStyle: {
      type: Boolean,
      default: false
    },
    isWrap: {
      type: Boolean,
      default: true
    },
    axisNameFormatter: {
      type: Function,
      default: function _default() {
        return null;
      }
    },
    axisNameRich: {
      type: Object,
      default: function _default() {
        return null;
      }
    },
    showAxisLabel: {
      type: Boolean,
      default: false
    },
    renderer: {
      type: String,
      default: 'svg'
    }
  };
};
exports.RadarChartProps = RadarChartProps;
var RadarChart = (0, _vue.defineComponent)({
  name: 'WdRadarChart',
  props: RadarChartProps(),
  setup: function setup(props, _ref) {
    var expose = _ref.expose;
    var _useConfigInject = (0, _useConfigInject2.default)('radar-chart', props),
      prefixCls = _useConfigInject.prefixCls,
      configProvider = _useConfigInject.configProvider;
    var wrapRef = (0, _vue.ref)();
    var mainRef = (0, _vue.ref)();
    var myChart = null;
    var colorsList = (0, _vue.ref)([]);
    var init = /*#__PURE__*/function () {
      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
        var _myChart, _props$colors;
        var colors, option;
        return _regenerator.default.wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              (_myChart = myChart) === null || _myChart === void 0 ? void 0 : _myChart.clear();
              myChart = echarts.init(mainRef.value, null, {
                renderer: props.renderer
              });
              colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
              colorsList.value = props !== null && props !== void 0 && (_props$colors = props.colors) !== null && _props$colors !== void 0 && _props$colors.length ? props.colors : colors.RDDARCOLOR;
              _context.t0 = colorsList.value;
              _context.t1 = {
                text: props.title,
                textStyle: {
                  fontSize: 14,
                  lineHeight: 18,
                  fontWeight: 600,
                  color: colors.TEXT
                }
              };
              _context.t2 = {
                width: props.width,
                height: props.height,
                top: 50,
                bottom: 2
              };
              _context.t3 = {
                show: props.showLegend,
                data: props.legend,
                bottom: -4,
                selectedMode: false,
                icon: 'rect',
                itemHeight: 3,
                itemWidth: 10,
                itemGap: props.legendItemGap,
                textStyle: {
                  fontSize: 12,
                  lineHeight: 18,
                  fontWeight: 'normal',
                  color: colors.TEXT,
                  padding: [0, 0, 0, 4]
                },
                itemStyle: {
                  borderWidth: 0
                }
              };
              _context.next = 10;
              return setRadar();
            case 10:
              _context.t4 = _context.sent;
              _context.next = 13;
              return setSeries();
            case 13:
              _context.t5 = _context.sent;
              option = {
                color: _context.t0,
                title: _context.t1,
                grid: _context.t2,
                legend: _context.t3,
                radar: _context.t4,
                series: _context.t5
              };
              myChart.setOption(option);
            case 16:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      return function init() {
        return _ref2.apply(this, arguments);
      };
    }();
    // series处理
    var setSeries = function setSeries() {
      var series = [];
      if (props.chartData) {
        series = props.chartData.map(function (t, i) {
          var colors = hex2Rgba(colorsList.value[i], 0.2);
          return {
            name: t.name,
            value: t.data,
            symbol: props.symbol,
            symbolSize: props.symbolSize,
            lineStyle: {
              width: props.lineWidth
            },
            emphasis: {
              areaStyle: {
                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{
                  color: colors,
                  offset: 0
                }, {
                  color: colors,
                  offset: 1
                }])
              }
            },
            areaStyle: props.areaStyle ? {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{
                color: colors,
                offset: 0
              }, {
                color: colors,
                offset: 1
              }])
            } : null
          };
        });
      }
      return [{
        type: 'radar',
        data: series
      }];
    };
    // rgb转换成rgba bgColor为hex, alpha为透明度
    var hex2Rgba = function hex2Rgba(bgColor) {
      var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
      var color = bgColor.slice(1); // 去掉'#'号
      var rgba = [parseInt('0x' + color.slice(0, 2)), parseInt('0x' + color.slice(2, 4)), parseInt('0x' + color.slice(4, 6)), alpha];
      return 'rgba(' + rgba.toString() + ')';
    };
    // 雷达图 label显示处理
    var setRadar = function setRadar() {
      if (!props.labelList.length) return;
      var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
      // 值拼接样式
      var labelList = props.labelList.map(function (t) {
        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, t), {}, {
          color: colors.TEXT
        });
      });
      var tickIndex = -1;
      var option = {
        indicator: labelList,
        center: props.center,
        radius: props.radius,
        splitArea: {
          show: props.splitArea
        },
        axisLine: {
          lineStyle: {
            color: colors.RADARSPLIT_COLOR
          }
        },
        splitLine: {
          lineStyle: {
            color: colors.RADARSPLIT_COLOR
          }
        },
        splitNumber: props.splitNumber,
        animationDuration: props.animationDuration,
        axisName: {
          formatter: function formatter(params, indicator) {
            if (props.axisNameFormatter()) return props.axisNameFormatter(params, indicator);
            var text = "{params|".concat(params, "}");
            // label 支持传两个值，带单位
            var val1 = [undefined].includes(indicator.val1) ? '' : indicator.val1 + props.unit;
            if (val1) {
              text += "".concat(props.isWrap ? indicator.isWrap ? '\n' : ' ' : '', "{val1|").concat(indicator.val1 + props.unit, "}");
            }
            var val2 = [undefined].includes(indicator.val2) ? '' : indicator.val2 + props.unit;
            if (val2) {
              text += " / {val2|".concat(indicator.val2 + props.unit, "}");
            }
            return text;
          },
          rich: props.axisNameRich || {
            params: {
              color: colors.TEXT_COLOR_2,
              lineHeight: 18
            },
            val1: {
              color: colorsList.value[0],
              lineHeight: 20,
              fontWeight: 600
            },
            val2: {
              color: colorsList.value[1],
              lineHeight: 20,
              fontWeight: 600
            }
          }
        },
        axisLabel: {
          show: props.showAxisLabel,
          rich: {
            a: {
              color: colors.TEXT_COLOR_2,
              fontSize: 12,
              lineHeight: 12,
              height: 1,
              padding: [14, 0, 0, 0]
            },
            b: {
              color: colors.TEXT_COLOR_2,
              fontSize: 12,
              lineHeight: 12,
              height: 1,
              padding: [4, 0, 0, 0]
            }
          },
          formatter: function formatter(value) {
            tickIndex++;
            if (tickIndex > 4) return '';
            return tickIndex > 0 ? "{a|".concat(value, "}") : "{b|".concat(value, "}");
          }
        }
      };
      // 返回值
      return option;
    };
    // 更新主题色
    var updateColor = function updateColor() {
      var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
      var tickIndex = -1;
      myChart.setOption({
        title: {
          textStyle: {
            color: colors.TEXT
          }
        },
        legend: {
          textStyle: {
            color: colors.TEXT
          }
        },
        radar: {
          axisLine: {
            lineStyle: {
              color: colors.RADARSPLIT_COLOR
            }
          },
          splitLine: {
            lineStyle: {
              color: colors.RADARSPLIT_COLOR
            }
          },
          axisName: {
            rich: props.axisNameRich || {
              params: {
                color: colors.TEXT_COLOR_2
              },
              val1: {
                color: colorsList.value[0]
              },
              val2: {
                color: colorsList.value[1]
              }
            }
          },
          axisLabel: {
            show: props.showAxisLabel,
            rich: {
              a: {
                color: colors.TEXT_COLOR_2
              },
              b: {
                color: colors.TEXT_COLOR_2
              }
            },
            formatter: function formatter(value) {
              tickIndex++;
              if (tickIndex > 4) return '';
              return tickIndex > 0 ? "{a|".concat(value, "}") : "{b|".concat(value, "}");
            }
          }
        }
      });
    };
    (0, _vue.watch)(function () {
      return [configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor];
    }, function () {
      (0, _vue.nextTick)(function () {
        return updateColor();
      });
    });
    (0, _vue.provide)(_constants.RadarChartContextKey, (0, _vue.reactive)({
      RadarChartElement: mainRef,
      wrapElement: wrapRef
    }));
    (0, _vue.onMounted)(function () {
      init();
    });
    expose({
      /** @description init chart */
      init: init,
      /** @description update color */
      updateColor: updateColor
    });
    return function () {
      var bodyStyle = {
        width: props.width,
        height: props.height
      };
      return (0, _vue.createVNode)(_spin.default, {
        "spinning": props.loading
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("div", {
            "ref": mainRef,
            "class": prefixCls.value,
            "style": bodyStyle
          }, null)];
        }
      });
    };
  }
});
var _default2 = RadarChart;
exports.default = _default2;