<template>
<div ref="chartRef" style="height: 400px; width: 100%"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, Ref, defineProps, toRefs } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const props = defineProps({
data: {
type: Object,
default: () => {},
},
});
const { data } = toRefs(props);
onMounted(async () => {
await setOptions({
title: {
text: '报名中课程'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
name: '课程名',
type: 'category',
data: data.value.xData
},
yAxis: {
type: 'value',
name: '学生报名人数'
},
series: [
{
data: data.value.yData,
itemStyle: {
color:'#546fc6'
},
label: {
show: true,
position: 'inside'
},
type: 'bar'
}
]
});
});
</script>
06-14
3244