LoongPanel-Asp/web/components/Charts/BarChart.vue

79 lines
1.4 KiB
Vue

<script lang="ts" setup>
import {useDataStore} from "~/strores/DataStore";
import type {PropType} from "vue";
import VChart, {THEME_KEY} from 'vue-echarts';
const dataStore = useDataStore()
const props = defineProps({
valueIds: {
type: Array as PropType<string[]>,
required: true,
},
valueNames: {
type: Array as PropType<string[]>,
required: true,
}
})
const option = computed(() => {
return {
backgroundColor:'',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick: {
alignWithLabel: true
},
data: props.valueNames
}
],
legend: {
data: props.valueNames,
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
saveAsImage: {}
}
},
yAxis: [
{
type: 'value'
}
],
series: [{
name: '数据',
type: 'bar',
barWidth: '60%',
data: props.valueIds?.map((id) => {
return dataStore.data[id]
}),
}]
}
});
</script>
<template>
<v-chart :option="option" autoresize class="chart" :theme="$colorMode.value"/>
</template>