wetrade-design
Version:
一款多语言支持Vue3的UI框架
190 lines • 6.62 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createVNode as _createVNode } from "vue";
import _ from 'lodash';
import { defineComponent } from 'vue';
import BigNumber from 'bignumber.js';
import useConfigInject from '../../_util/hooks/useConfigInject';
import ScrollBar from '../../scrollbar';
import classNames from '../../_util/classNames';
import { inThanMinOrMax, numberFormat } from 'wetrade-tools';
import { getColors } from '../../_util/chartsColors';
export var LegendProps = function LegendProps() {
return {
// 画布高度
height: {
type: [Number, String],
default: '300px'
},
// 图例数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
// 保留小数位n位
digits: {
type: Number,
default: 2
},
// 图例是否可以点击
selectedMode: {
type: Boolean,
default: false
},
// 图例选中状态表，动态配置图例显示项，selectedMode=true时生效
selectedModel: {
type: Object,
default: function _default() {
return {};
}
},
// 是否需要截断，不要的字符放在[]里；例：有的银行名称一致，需要加（卡号）区分，显示时需要截断
isLabelRemoveId: {
type: Boolean,
default: false
},
// 颜色队列
colors: {
type: Array,
default: function _default() {
return [];
}
},
legendWidth: {
type: String,
default: ''
},
// 图例的值是数值型还是百分比
isLegendRatio: {
type: Boolean,
default: false
},
// 是否显示千位符
showThousandSign: {
type: Boolean,
default: false
},
// 数据总值
totalValue: {
type: Number,
default: null
},
// 数值是否需要换算，单位有万，亿，万亿，默认不换算
isConversion: {
type: [Boolean, Array],
default: false
},
unit: {
type: [String, Array],
default: ''
},
// 0和null显示为0还是--
valueIsNumber: {
type: Boolean,
default: false
},
legendMarginLeft: {
type: String,
default: ''
},
onLegendChange: {
type: Function
},
isValueComputed: {
type: Boolean,
default: false
}
};
};
var WdPieChartLegend = defineComponent({
name: 'WdPieChartLegend',
props: LegendProps(),
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots;
var _useConfigInject = useConfigInject('pie-chart-legend', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
return function () {
var list = props.legendList || [];
var legendClass = classNames(_defineProperty({}, prefixCls.value, true));
// 点击图例
var handleClick = function handleClick(t, index) {
emit('legendChange', t, index);
};
// 截取图例多余文字
var showName = function showName(value) {
var findIndexs = value === null || value === void 0 ? void 0 : value.indexOf('[');
if (findIndexs > -1) {
var seriesName = value.substring(0, findIndexs);
return seriesName;
}
return value;
};
// 数值
var valueFormatter = function valueFormatter(item, index) {
// 显示比例
if (props.isLegendRatio) {
if (![null, undefined].includes(item.percent)) return item.percent;
if (props.totalValue) {
// 如果值已计算好，直接显示
// 如果值未计算，用本项/总值 = 占比
var ratio = props.isValueComputed ? item.value : new BigNumber(item.value).div(props.totalValue).times(100).toNumber();
return inThanMinOrMax({
value: ratio || 0,
decimal: props.digits,
isPercent: true
});
}
return props.valueIsNumber ? '0.00%' : '--';
}
// 显示数值，及是否要转换
var isConversion = typeof props.isConversion === 'boolean' ? props.isConversion : props.isConversion[index];
var unit = typeof props.unit === 'string' ? props.unit : props.unit[index];
return item.value < 0.01 && item.value > 0 ? '<0.01' : numberFormat(item.value, {
decimal: props.digits,
t: props.showThousandSign,
os: isConversion
}) + (!_.isNil(item.value) ? unit : '');
};
var boxStyle = {
marginLeft: props.legendMarginLeft,
maxWidth: props.legendWidth
};
return _createVNode("div", {
"class": legendClass,
"style": boxStyle
}, [_createVNode(ScrollBar, {
"maxHeight": props.height,
"class": "".concat(prefixCls.value, "__scroll")
}, {
default: function _default() {
return [list.map(function (item, index) {
var _classNames2, _slots$mark;
var listClass = classNames((_classNames2 = {}, _defineProperty(_classNames2, prefixCls.value + '__list', true), _defineProperty(_classNames2, prefixCls.value + '__list-no-select', props.selectedMode && !props.selectedModel[item.name]), _classNames2));
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode);
var nColor = props.colors.length > 0 ? props.colors : colors.COMMONCOLOR;
var symbolStyle = {
backgroundColor: nColor[index % nColor.length] || ''
};
return _createVNode("div", {
"class": listClass,
"onClick": function onClick() {
return handleClick(item, index);
}
}, [_createVNode("span", {
"style": symbolStyle,
"class": "".concat(prefixCls.value, "__list-dot")
}, null), _createVNode("span", {
"class": "".concat(prefixCls.value, "__list-label")
}, [props.isLabelRemoveId ? showName((item === null || item === void 0 ? void 0 : item.name) || item) : (item === null || item === void 0 ? void 0 : item.name) || (typeof item === 'string' ? item : '')]), (_slots$mark = slots.mark) === null || _slots$mark === void 0 ? void 0 : _slots$mark.call(slots, item), _createVNode("span", {
"class": "".concat(prefixCls.value, "__list-value")
}, [valueFormatter(item, index)])]);
})];
}
})]);
};
}
});
export default WdPieChartLegend;