vbenadmin中使用echart

anuily.

于 2024-06-18 16:23:05 发布

阅读量455

点赞数 1

文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_46490956/article/details/139777059

版权

<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>