65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const option: ECOption = {
|
|
backgroundColor: 'transparent',
|
|
radar: {
|
|
radius: '66%',
|
|
center: ['50%', '42%'],
|
|
splitNumber: 8,
|
|
splitArea: {
|
|
areaStyle: {
|
|
color: 'rgba(127,95,132,.3)',
|
|
opacity: 1,
|
|
shadowBlur: 45,
|
|
shadowColor: 'rgba(0,0,0,.5)',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 15,
|
|
},
|
|
},
|
|
indicator: [
|
|
{ name: 'Sales' },
|
|
{ name: 'Administration' },
|
|
{ name: 'Technology' },
|
|
{ name: 'Customer Support' },
|
|
{ name: 'Development' },
|
|
{ name: 'Marketing' },
|
|
],
|
|
},
|
|
legend: {
|
|
left: 'center',
|
|
bottom: '10',
|
|
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'],
|
|
},
|
|
series: [
|
|
{
|
|
type: 'radar',
|
|
symbolSize: 0,
|
|
areaStyle: {
|
|
shadowBlur: 13,
|
|
shadowColor: 'rgba(0,0,0,.2)',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 10,
|
|
opacity: 1,
|
|
},
|
|
data: [
|
|
{
|
|
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
|
name: 'Allocated Budget',
|
|
},
|
|
{
|
|
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
|
name: 'Expected Spending',
|
|
},
|
|
{
|
|
value: [5500, 5000, 12000, 15000, 8000, 6000],
|
|
name: 'Actual Spending',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-chart :option="option" autoresize />
|
|
</template>
|