wetrade-design
Version:
一款多语言支持Vue3的UI框架
774 lines (773 loc) • 25.2 kB
JavaScript
"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.QuotationColorMap = exports.PieChartProps = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _lodash = _interopRequireDefault(require("lodash"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _constants = require("./constants");
var _chartsColors = require("../../_util/chartsColors");
var _classNames4 = _interopRequireDefault(require("../../_util/classNames"));
var _legend = _interopRequireDefault(require("./legend"));
var _spin = _interopRequireDefault(require("../../spin"));
var echarts = _interopRequireWildcard(require("echarts"));
var _computed = require("./computed");
var _wetradeTools = require("wetrade-tools");
var _bignumber = _interopRequireDefault(require("bignumber.js"));
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 QuotationColorMap = {
redUp: 0,
greenUp: 1
};
exports.QuotationColorMap = QuotationColorMap;
var PieChartProps = function PieChartProps() {
return {
quotationColor: {
type: Number,
default: 0
},
loading: {
type: Boolean,
default: false
},
// 饼图颜色
colors: {
type: Array,
default: function _default() {
return [];
}
},
width: {
type: [Number, String],
default: '200px'
},
// 画布高度
height: {
type: [Number, String],
default: '200px'
},
chartData: {
type: Array,
default: function _default() {
return [];
}
},
// 顶部距离
top: {
type: [Number, String],
default: '50%'
},
// 左侧距离
left: {
type: [Number, String],
default: '50%'
},
// 图例
legend: {
type: Array,
default: function _default() {
return [];
}
},
// 内圈外圈的值 number[]
radius: {
type: Array,
default: function _default() {
return [45, 90];
}
},
// 内外边框距离 number[]
withinOutsideDistance: {
type: Array,
default: function _default() {
return [6, 10];
}
},
// 是否有hover浮层
isToolltip: {
type: Boolean,
default: true
},
// 是否显示占比
accountedFor: {
type: Boolean,
default: false
},
// 是否显示数值
originalValue: {
type: Boolean,
default: false
},
// 是否显示千位符
showThousandSign: {
type: Boolean,
default: false
},
// 保留小数位n位
digits: {
type: Number,
default: 2
},
// 文字布局方式
direction: {
type: String,
default: 'horizontal'
},
// 起始角度
theAngle: {
type: Number,
default: 90
},
// 最小角度
minAngle: {
type: Number,
default: 0
},
// 是否显示图例
isLegend: {
type: Boolean,
default: false
},
// 图例位置
location: {
type: Object,
default: function _default() {
return {
top: 'center',
right: 20
};
}
},
// 图例是否可以点击
selectedMode: {
type: Boolean,
default: false
},
animation: {
type: Boolean,
default: true
},
// 图表动画时长
animationTime: {
type: Number,
default: 1000
},
// 汇总中间值参数
centerTitle: {
type: String,
default: ''
},
// 汇总中间值参数总值
totalSum: {
type: [Number, String],
default: ''
},
// 内容是否显示在中间
isCenter: {
type: Boolean,
default: false
},
// 是否显示tootip
isTooltip: {
type: Boolean,
default: true
},
confine: {
type: Boolean,
default: false
},
// 是否显示视觉引导线
isGuideLine: {
type: Boolean,
default: false
},
// 是否有链接色
isToLink: {
type: Boolean,
default: true
},
// 是否自定义显示tootip
customTooltip: {
type: Boolean,
default: false
},
// 是否固定tooltip位置，目前固定在右侧
tooltipFix: {
type: Boolean,
default: false
},
tooltipPosition: {
type: Function,
default: function _default() {
return null;
}
},
// 是否过滤内容, 默认true
filterZero: {
type: Boolean,
default: true
},
// 图例的处理
pieLegendFormatter: {
default: function _default() {
return _computed.pieLegendFormatter;
}
},
// tooltip处理
pieTooltipFormatter: {
default: function _default() {
return _computed.pieTooltipFormatter;
}
},
// label是否要删除[]及内容，适用于tooltip；selectedModel=true时，需要增加唯一标识确定不同的label，显示时需删除
isLabelRemoveId: {
type: Boolean,
default: false
},
// 图例选中状态表，动态配置图例显示项，selectedMode=true时生效
selectedModel: {
type: Object,
default: function _default() {
return {};
}
},
// 在文字后面增加动态样式及文案 举例：线下银行增加“转”字用到
toolTipPatchFunc: {
default: function _default() {
return null;
}
},
// label字段名，自定义样式时使用
labelName: {
type: String,
default: ''
},
// 显示自定义图例
showCustomLegend: {
type: Boolean,
default: true
},
// 图例 - 数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
legendWidth: {
type: String,
default: ''
},
// 图例的值是数值型还是百分比
isLegendRatio: {
type: Boolean,
default: false
},
// 数值是否需要换算，单位有万，亿，万亿，默认不换算
isConversion: {
type: [Boolean, Array],
default: false
},
unit: {
type: [String, Array],
default: ''
},
// 0和null显示为0还是--
valueIsNumber: {
type: Boolean,
default: false
},
labelLineLength: {
type: Array,
default: function _default() {
return [20, 20];
}
},
customGuide: {
type: Function,
default: function _default() {
return null;
}
},
legendMarginLeft: {
type: String,
default: ''
},
emphasisScale: {
type: Boolean,
default: true
},
emphasisScaleSize: {
type: Number,
default: 5
},
labelRich: {
type: Object,
default: null
},
renderer: {
type: String,
default: 'svg'
},
isValueComputed: {
type: Boolean,
default: false
},
emphasisFocus: {
type: Boolean,
default: false
}
};
};
exports.PieChartProps = PieChartProps;
var PieChart = (0, _vue.defineComponent)({
name: 'WdPieChart',
Legend: _legend.default,
props: PieChartProps(),
slots: ['mark'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
expose = _ref.expose,
slots = _ref.slots;
var _useConfigInject = (0, _useConfigInject2.default)('pie-chart', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var wrapRef = (0, _vue.ref)();
var mainRef = (0, _vue.ref)();
var mainChart = (0, _vue.ref)();
var myChart = null;
// 基本配置
var init = function init() {
var _myChart;
(_myChart = myChart) === null || _myChart === void 0 ? void 0 : _myChart.clear();
myChart = echarts.init(mainChart.value, null, {
renderer: props.renderer
});
var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor); // 赋值给常量，避免多处访问实例this
var option = {
color: getColorType.value,
legend: (0, _objectSpread2.default)((0, _objectSpread2.default)({
show: props.isLegend,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
orient: props.direction,
itemGap: 16,
selectedMode: props.selectedMode
}, props.location), {}, {
itemStyle: {
borderWidth: 0
},
selected: props.selectedModel,
textStyle: {
fontSize: 12,
color: colors.TEXT,
padding: [2, 0, 0, 8],
//新版本支持 overflow: 'truncate',
rich: {
a: {
align: 'left',
width: 82,
padding: [0, 8, 0, 0]
},
b: {
align: 'right',
width: 54,
padding: [0, 8, 0, 0]
},
c: {
align: 'right',
width: 54
}
}
},
formatter: function formatter(name) {
return props.pieLegendFormatter({
name: name,
total: getTotalValue.value,
list: props.chartData,
props: props
});
}
}),
tooltip: {
show: !getTotalValue.value ? false : props.isTooltip,
padding: 12,
transitionDuration: 0,
extraCssText: colors.PIE_TOOLTIP_SHADOW,
backgroundColor: colors.TOOLTIP_BG,
borderColor: colors.TOOLTIP_BG,
confine: props.confine,
position: function position(pos) {
if (props.tooltipPosition(pos)) return props.tooltipPosition(pos);
if (!props.tooltipFix) return null;
var obj = {
top: pos[1] + 20,
left: pos[0] + 20
};
return obj;
},
textStyle: {
color: colors.TEXT,
fontSize: 12,
fontFamily: 'custom-fonts'
},
axisPointer: {
axis: 'radius',
animation: false
},
formatter: function formatter(v) {
return props.pieTooltipFormatter({
v: v,
total: getTotalValue.value,
list: props.chartData,
props: props
});
}
},
series: handleSeries()
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};
// 截取图例多余文字
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 handleSeries = function handleSeries() {
var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var series = [{
type: 'pie',
radius: props.radius,
center: [props.left, props.top],
avoidLabelOverlap: true,
itemStyle: {
borderColor: colors.PIE_BG,
borderWidth: 2
},
startAngle: props.theAngle,
minAngle: props.minAngle,
animation: props.animation,
animationEasingUpdate: 'quadraticOut',
animationDuration: props.animationTime,
emphasis: {
scale: props.emphasisScale,
scaleSize: props.emphasisScaleSize,
itemStyle: {
opacity: 1
},
focus: props.emphasisFocus ? 'self' : 'none'
},
label: {
show: props.isGuideLine,
formatter: function formatter(params) {
var _params$data, _params$data2;
var ratio = props.isValueComputed ? params.value : new _bignumber.default(params.value).div(getTotalValue.value).times(100).toNumber();
return props.customGuide() ? props.customGuide(params, getTotalValue.value) : '{a|' + (props.isLabelRemoveId ? showName(params.data[props.labelName]) : params.data[props.labelName]) + '}' + '\n' + '{b|' + (params !== null && params !== void 0 && (_params$data = params.data) !== null && _params$data !== void 0 && _params$data.percent ? params === null || params === void 0 ? void 0 : (_params$data2 = params.data) === null || _params$data2 === void 0 ? void 0 : _params$data2.percent : (0, _wetradeTools.inThanMinOrMax)({
value: ratio,
decimal: props.digits,
isPercent: true
})) + '}';
},
rich: props.labelRich || {
a: {
color: colors.TEXT,
fontSize: 12,
lineHeight: 20
},
b: {
fontSize: 12,
lineHeight: 20,
color: colors.TEXT
},
c: {
fontSize: 12,
lineHeight: 20,
color: colors.TEXT
}
}
},
labelLine: {
length: props.labelLineLength[0],
length2: props.labelLineLength[1]
},
data: getDateClear.value,
z: !getTotalValue.value ? 0 : 2
},
// 灰色背景环
{
type: 'pie',
radius: [props.radius[0] - props.withinOutsideDistance[0], props.radius[1] + props.withinOutsideDistance[1]],
center: [props.left, props.top],
data: [],
itemStyle: {
color: colors.PIE_BG
},
emphasis: {
// 高亮状态的扇区和标签样式。
itemStyle: {
color: colors.PIE_BG
}
},
emptyCircleStyle: {
color: colors.PIE_BG
},
label: {
show: false
},
labelLine: {
show: false
},
tooltip: {
show: false
},
animation: false,
cursor: 'auto',
z: 1
}];
return series;
};
// 获取饼图颜色
var getColorType = (0, _vue.computed)(function () {
if (props.colors.length) return props.colors;
return (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor).COMMONCOLOR;
});
//计算数据value是否为0
var getTotalValue = (0, _vue.computed)(function () {
var _props$chartData;
var sum = 0;
var isNil = true;
if (!((_props$chartData = props.chartData) !== null && _props$chartData !== void 0 && _props$chartData.length)) return sum;
for (var i = 0; i < props.chartData.length; i++) {
var _props$chartData$i, _props$chartData$i2, _props$chartData$i3;
// 如果可以置灰，计算时需要把置灰的数据屏蔽掉（取原始值来做判断，名称可能会更改）
var flag = Object.keys(props.selectedModel || {}).length ? props.selectedModel[(_props$chartData$i = props.chartData[i]) !== null && _props$chartData$i !== void 0 && _props$chartData$i.crrentName ? (_props$chartData$i2 = props.chartData[i]) === null || _props$chartData$i2 === void 0 ? void 0 : _props$chartData$i2.crrentName : (_props$chartData$i3 = props.chartData[i]) === null || _props$chartData$i3 === void 0 ? void 0 : _props$chartData$i3.name] : true;
if (props.chartData[i].value > 0 && flag) {
sum += props.chartData[i].value;
}
if (props.chartData[i].value !== null) isNil = false;
}
// 如果值都为null，则返回null
return isNil ? null : sum;
});
// 数据过滤组装
var getDateClear = (0, _vue.computed)(function () {
var _props$chartData2;
if (!((_props$chartData2 = props.chartData) !== null && _props$chartData2 !== void 0 && _props$chartData2.length)) return [];
var newArray = _lodash.default.cloneDeep(props.chartData);
newArray.forEach(function (i) {
if (i.value === 0 && props.filterZero) i.value = '';
});
return newArray;
});
// 更新主题
var updateColor = function updateColor() {
var _myChart2;
var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor); // 赋值给常量，避免多处访问实例this
var option = {
color: getColorType.value,
legend: {
textStyle: {
color: colors.TEXT
}
},
tooltip: {
backgroundColor: colors.TOOLTIP_BG,
borderColor: colors.TOOLTIP_BG,
textStyle: {
color: colors.TEXT
},
extraCssText: "box-shadow: 0 0 3px ".concat(colors.PIE_TOOLTIP_SHADOW, ";")
},
series: [{
itemStyle: {
borderColor: colors.PIE_BG
},
label: {
normal: {
rich: props.labelRich || {
a: {
color: colors.TEXT
},
b: {
color: colors.TEXT
},
c: {
color: colors.TEXT
}
}
}
}
}, {
itemStyle: {
color: colors.PIE_BG
},
emphasis: {
itemStyle: {
color: colors.PIE_BG
}
},
emptyCircleStyle: {
color: colors.PIE_BG
}
}]
};
(_myChart2 = myChart) === null || _myChart2 === void 0 ? void 0 : _myChart2.setOption(option);
};
var updateData = function updateData() {
var option = {
title: {
show: !getTotalValue.value ? true : false
},
color: getColorType.value,
tooltip: {
show: !getTotalValue.value ? false : props.isTooltip
},
series: [{
data: getDateClear.value,
z: !getTotalValue.value ? 0 : 2
}]
};
(0, _vue.nextTick)(function () {
return myChart.setOption(option);
});
};
// 更新可显示项
var updateSelected = function updateSelected() {
var option = {
animation: false,
legend: {
show: false,
selected: props.selectedModel
},
series: handleSeries()
};
myChart.setOption(option);
};
var toLink = function toLink() {
emit('linkUrl');
};
var handlerResize = function handlerResize() {
myChart.resize();
};
// 点击图例
var onLegendChange = function onLegendChange(t) {
emit('legendChange', t);
};
(0, _vue.watch)(function () {
return [configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor];
}, function () {
(0, _vue.nextTick)(function () {
updateColor();
});
});
(0, _vue.provide)(_constants.pieChartContextKey, (0, _vue.reactive)({
pieChartElement: mainRef,
wrapElement: wrapRef
}));
(0, _vue.onMounted)(function () {
init();
});
expose({
/** @description init chart */
init: init,
/** @description update data */
updateData: updateData,
/** @description update color */
updateColor: updateColor,
/** @description update selectedModel*/
updateSelected: updateSelected,
/** @description onRisize */
handlerResize: handlerResize
});
return function () {
var _props$legendList, _props$legend, _classNames3;
var LEGENDDOM, CENTERDOM;
if (props.showCustomLegend && ((_props$legendList = props.legendList) !== null && _props$legendList !== void 0 && _props$legendList.length || (_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length)) {
var _props$legendList2;
LEGENDDOM = (0, _vue.createVNode)(_legend.default, {
"legendMarginLeft": props.legendMarginLeft,
"height": props.height,
"legendWidth": props.legendWidth,
"legendList": (_props$legendList2 = props.legendList) !== null && _props$legendList2 !== void 0 && _props$legendList2.length ? props.legendList : props.legend,
"selectedMode": props.selectedMode,
"selectedModel": props.selectedModel,
"isLabelRemoveId": props.isLabelRemoveId,
"isValueComputed": props.isValueComputed,
"colors": props.colors,
"isLegendRatio": props.isLegendRatio,
"digits": props.digits,
"showThousandSign": props.showThousandSign,
"totalValue": getTotalValue.value,
"isConversion": props.isConversion,
"unit": props.unit,
"valueIsNumber": props.valueIsNumber,
"onLegendChange": onLegendChange
}, slots);
}
// 是否有居中的title
if (props.isCenter) {
var _classNames, _classNames2;
// 居中文字盒子
var centerBoxStyle = {
top: typeof props.top === 'string' ? props.top : props.top + 'px',
left: typeof props.left === 'string' ? props.left : props.left + 'px'
};
// 居中文字标题
var titleClass = (0, _classNames4.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value + '__center-content__title', true), (0, _defineProperty2.default)(_classNames, prefixCls.value + '__center-content__hasNum', props.totalSum || props.totalSum === 0), _classNames));
// 居中文字标题
var textClass = (0, _classNames4.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__center-content__text', true), (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__center-content__links', props.isToLink), _classNames2));
CENTERDOM = (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls.value, "__center-content"),
"style": centerBoxStyle
}, [(0, _vue.createVNode)("h3", {
"class": titleClass
}, [props.centerTitle]), (0, _vue.createVNode)("span", {
"class": textClass,
"onClick": function onClick() {
return toLink();
}
}, [props.totalSum])]);
}
var bodyStyle = {
width: typeof props.width === 'string' ? props.width : props.width + 'px',
height: typeof props.height === 'string' ? props.height : props.height + 'px'
};
// 居中文字标题
var boxClass = (0, _classNames4.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, prefixCls.value, true), (0, _defineProperty2.default)(_classNames3, prefixCls.value + '__' + props.direction, true), _classNames3));
var mainStyle = {
height: typeof props.height === 'string' ? props.height : props.height + 'px'
};
return (0, _vue.createVNode)(_spin.default, {
"spinning": props.loading
}, {
default: function _default() {
return [(0, _vue.createVNode)("div", {
"class": boxClass
}, [(0, _vue.createVNode)("div", {
"ref": mainRef,
"class": "".concat(prefixCls.value, "__chart"),
"style": mainStyle
}, [CENTERDOM, (0, _vue.createVNode)("div", {
"ref": mainChart,
"class": "".concat(prefixCls.value, "__body"),
"style": bodyStyle
}, null)]), LEGENDDOM])];
}
});
};
}
});
var _default2 = PieChart;
exports.default = _default2;