You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.1 KiB
65 lines
1.1 KiB
9 months ago
|
<template>
|
||
|
|
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 400px" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" name="PieChart" setup>
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
let receivingParameter = defineProps(["title", "data"])
|
||
|
|
let option = reactive({})
|
||
|
|
option = {
|
||
|
|
title: {
|
||
|
|
text: receivingParameter.title
|
||
|
|
},
|
||
|
|
// tooltip: {
|
||
|
|
// trigger: 'axis',
|
||
|
|
// axisPointer: {
|
||
|
|
// type: 'shadow'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data:receivingParameter.data.names,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
min: 0,
|
||
|
|
max: 1,
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function (value, index) {
|
||
|
|
return (value*100) + "%";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: receivingParameter.data.values,
|
||
|
|
type: 'bar',
|
||
|
|
showBackground: true,
|
||
|
|
backgroundStyle: {
|
||
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'right',
|
||
|
|
formatter: function (params) {
|
||
|
|
return (params.value*100) + "%";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|