[BUG]Invalid VueUiRadarConfig setting parameter. #258
Description
Describe the bug
In the VueUiRadar component, the showValue and showPercentage parameters in the tooltip parameter have no effect when they are set to false.
For example:
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
dataset: {
type: Object,
default: {
categories: [
{
// 游戏时长
name: '张xx',
color: '#42d392'
},
],
series: [
{
name: 'name1',
values: [
50,
],
color: undefined,
target: 50
},
{
name: 'name2',
values: [
30,
],
color: undefined,
target: 100
},
{
name: 'name3',
values: [
0,
],
color: undefined,
target: 100
},
{
name: 'name3',
values: [
0,
],
color: undefined,
target: 100
},
{
name: 'name5',
values: [
0,
],
color: undefined,
target: 100
}
]
}
}
})
const config = ref({
debug: false,
loading: false,
responsive: false,
events: {
datapointEnter: null,
datapointLeave: null,
datapointClick: null
},
theme: '',
customPalette: [],
useCssAnimation: true,
style: {
fontFamily: 'inherit',
chart: {
backgroundColor: '#FFFFFF00',
color: '#1a1a1aff',
layout: {
plots: {
show: true,
radius: 2
},
outerPolygon: {
stroke: '#000000ff',
strokeWidth: 2
},
dataPolygon: {
strokeWidth: 1,
transparent: false,
opacity: 20,
useGradient: true
},
grid: {
show: true,
stroke: '#808080ff',
strokeWidth: 0.5,
graduations: 5
},
labels: {
dataLabels: {
show: true,
fontSize: 16,
color: '#000000ff'
}
}
},
tooltip: {
show: true,
color: '#1A1A1Aff',
backgroundColor: '#FFFFFFff',
fontSize: 14,
customFormat: null,
borderRadius: 20,
borderColor: '#e1e5e8',
borderWidth: 1,
backgroundOpacity: 30,
position: 'center',
offsetY: 24,
smooth: true,
backdropFilter: true,
smoothForce: 0.18,
smoothSnapThreshold: 0.25,
showValue: false,
showPercentage: false,
roundingValue: 0,
roundingPercentage: 0,
animation: {
show: true,
animationFrames: 60
}
},
legend: {
show: false,
}
}
},
table: {
show: false,
responsiveBreakpoint: 400,
useDialog: false,
th: {
backgroundColor: '#FFFFFFff',
color: '#1A1A1Aff',
outline: 'none'
},
td: {
backgroundColor: '#FFFFFFff',
color: '#1A1A1Aff',
outline: 'none',
roundingValue: 0,
roundingPercentage: 0
}
},
userOptions: {
show: false,
showOnChartHover: false,
keepStateOnChartLeave: true,
position: 'right',
buttons: {
tooltip: true,
pdf: true,
csv: true,
img: true,
table: true,
labels: false,
fullscreen: true,
sort: false,
stack: false,
animation: false,
annotator: true
},
print: {
scale: 1,
orientation: 'auto',
overflowTolerance: 0.2
}
},
translations: {
target: 'Target',
value: 'Value',
datapoint: 'Datapoint'
}
});
</script>
<template>
<div style=" width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(1vh); border-radius: var(--xH-border-radius-base) var(--xH-border-radius-base) 0 0;"
class="flex align-center justify-center">
<VueUiRadar :config="config" :dataset="props.dataset">
</VueUiRadar>
</div>
</template>To Reproduce
For my example.
Expected behavior
I hope that after the values of showValue and showPercentage are set to false, the corresponding ones will not be displayed on the chart.
Screenshots
Vue Data UI version (please complete the following information):^3.2.8