wetrade-design
Version:
一款多语言支持Vue3的UI框架
489 lines • 14 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import { createVNode as _createVNode } from "vue";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { ref, defineComponent, provide, reactive, onMounted, onUnmounted, nextTick, watch } from 'vue';
import Spin from '../../spin';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { RadarChartContextKey } from './constants';
import { getColors } from '../../_util/chartsColors';
import * as echarts from 'echarts/core';
import { TitleComponent } from 'echarts/components';
import { RadarChart as EchartRadarChart } from 'echarts/charts';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([EchartRadarChart, TitleComponent, CanvasRenderer, SVGRenderer]);
export 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'
}
};
};
var RadarChart = defineComponent({
name: 'WdRadarChart',
props: RadarChartProps(),
setup: function setup(props, _ref) {
var expose = _ref.expose;
var _useConfigInject = useConfigInject('radar-chart', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var wrapRef = ref();
var mainRef = ref();
var myChart = null;
var colorsList = ref([]);
var init = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _props$colors;
var colors, radarOption, seriesOption, option;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (myChart) {
myChart.clear();
myChart.dispose();
myChart = null;
}
if (mainRef.value) {
_context.next = 3;
break;
}
return _context.abrupt("return");
case 3:
myChart = echarts.init(mainRef.value, null, {
renderer: props.renderer
});
colors = 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.next = 8;
return setRadar();
case 8:
radarOption = _context.sent;
_context.next = 11;
return setSeries();
case 11:
seriesOption = _context.sent;
option = {
color: colorsList.value,
title: {
text: props.title,
textStyle: {
fontSize: 14,
lineHeight: 18,
fontWeight: 600,
color: colors.TEXT
}
},
grid: {
width: props.width,
height: props.height,
top: 50,
bottom: 2
},
legend: {
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
}
},
radar: radarOption,
series: seriesOption
};
myChart.setOption(option);
case 14:
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 = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
// 值拼接样式
var labelList = props.labelList.map(function (t) {
return _objectSpread(_objectSpread({}, 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() {
if (!myChart) return;
var colors = 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, "}");
}
}
}
});
};
watch(function () {
return [configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor];
}, function () {
nextTick(function () {
return updateColor();
});
});
provide(RadarChartContextKey, reactive({
RadarChartElement: mainRef,
wrapElement: wrapRef
}));
onMounted(function () {
init();
});
onUnmounted(function () {
if (myChart) {
myChart.clear();
myChart.dispose();
myChart = null;
}
wrapRef.value = null;
mainRef.value = null;
});
expose({
/** @description init chart */
init: init,
/** @description update color */
updateColor: updateColor
});
return function () {
var bodyStyle = {
width: props.width,
height: props.height
};
return _createVNode(Spin, {
"spinning": props.loading
}, {
default: function _default() {
return [_createVNode("div", {
"ref": mainRef,
"class": prefixCls.value,
"style": bodyStyle
}, null)];
}
});
};
}
});
export default RadarChart;