66 lines
1.2 KiB
Vue
66 lines
1.2 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 {
|
|
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
|
|
}
|
|
],
|
|
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"/>
|
|
</template> |