DataDisplayPlatform_WebApp/src/components/Radar.vue

<template>
  <div id="radar"></div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { mapState } from "vuex";

export default {
  setup() {
    let echarts = inject("ec");

    let radartDom = ref({});
    let radarChart = ref({});
    function init() {
      radartDom.value = document.getElementById("radar");
      radarChart.value = echarts.init(radartDom, "dark");
      radarChart.value.setOption(option.value);
    }
    function exchangeUrl(icon) {
      return `/${icon}.png`;
    }

    let option = ref({
      title: {},
      legend: {},
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "数据1", max: 6500 },
          { name: "数据2", max: 16000 },
          { name: "数据3", max: 30000 },
          { name: "数据4", max: 38000 },
          { name: "数据5", max: 52000 },
        ],
        axisLine: {
          // (圆内的几条直线)坐标轴轴线相关设置
          lineStyle: {
            color: "#45FAFF",
            // 坐标轴线线的颜色。
            width: 2,
            // 坐标轴线线宽。
            type: "solid",
            // 坐标轴线线的类型。
          },
        },
        splitLine: {
          // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
          lineStyle: {
            color: "#45FAFF",
            // 分隔线颜色
            width: 2,
            // 分隔线线宽
          },
        },
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {
            // 分隔区域的样式设置。
            color: ["rgba(250,250,250,0)", "rgba(200,200,200,0)"],
            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          },
        },
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000],
            },
          ],
          areaStyle: {
            // 单项区域填充样式
            normal: {
              color: "rgb(69,250,255)", // 填充的颜色。[ default: "#000" ]
            },
          },
        },
      ],
    });

    onMounted(() => {
      init();
    });
    return {
      init,
      exchangeUrl,
    };
  },
};
</script>
<style lang="scss" scoped>
</style>