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

<script setup lang="ts">
import { ref, computed, nextTick } 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 });
const rankName = ref([]);
const rankValue = ref([]);
// 根据配置项渲染ECharts
const initChart = (item?: any) => {
  rankName.value = [];
  rankValue.value = [];
  console.log("根据配置项渲染ECharts", item);
  if (item && item.length != 0) {
    item.map(itx => {
      itx.dimensionList.map(it => {
        rankName.value.push({
          name: it.dimName
        });
        rankValue.value.push(it.soreRate);
      });
    });
    setOptions({
      tooltip: {},
      legend: {
        // icon: "arrow",
        itemWidth: 25,
        itemHeight: 4,
        data: ["得分率"],
        top: 10,
        left: "left"
      },
      radar: {
        radius: "70%", // 调整半径以使雷达图更大
        indicator: rankName.value,
        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: rankValue.value
              // name: "支出"
            }
          ]
        }
      ]
    });
  }
};
nextTick(() => {
  initChart();
});
// initChart();
defineExpose({ initChart });
</script>

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