hospital-project/src/components/echarts/radar.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
setOptions({
  tooltip: {},
  legend: {
    top: 10,
    left: "left",
    data: ["得分率"]
  },
  radar: {
    radius: "70%", // 调整半径以使雷达图更大
    indicator: [
      { name: "数量" },
      { name: "科研" },
      { name: "教学" },
      { name: "强度" },
      { name: "难度" },
      { name: "质量" },
      { name: "效率" }
    ],
    axisName: {
      color: "black"
    }
  },
  series: [
    {
      name: "得分率",
      type: "radar",
      areaStyle: {
        normal: {
          color: "rgba(0, 128, 255, 0.2)" // 设置内部填充颜色和透明度
        }
      },
      lineStyle: {
        normal: {
          width: 1, // 设置线条宽度为 1
          color: "rgba(0, 128, 255, 1)" // 设置线条颜色
        }
      },
      data: [
        {
          value: [30, 60, 90, 120, 150, 160, 10],
          name: "支出"
        }
      ]
    }
  ]
});
</script>

<template>
  <div ref="chartRef" class="w-72 h-64 m-auto mt-2" />
</template>