DataDisplayPlatform_WebApp/src/components/Radar.vue

<template>
  <div>
    <div style="width: 100%; height: 160px" id="radar"></div>
  </div>
</template>

<script>
import { ref, onMounted, computed, inject, onBeforeUnmount } from "vue";
import { mapState } from "vuex";
import exchangeUrl from "utils/exchangeUrl";

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.value, "dark");
      radarChart.value.setOption(option.value);
    }

    function updateData(data = [300, 900, 800, 100, 700]) {
      option.value.series[0].data[0].value = data;
      radarChart.value.setOption(option.value);
    }

    let option = ref({
      title: {},
      radar: {
        center: ["50%", 90],
        // shape: 'circle',
        indicator: [
          { name: "数据1", max: 1000 },
          { name: "数据2", max: 1000 },
          { name: "数据3", max: 1000 },
          { name: "数据4", max: 1000 },
          { name: "数据5", max: 1000 },
        ],
        axisLine: {
          // (圆内的几条直线)坐标轴轴线相关设置
          lineStyle: {
            color: "#45FAFF",
            // 坐标轴线线的颜色。
            width: 1,
            // 坐标轴线线宽。
            type: "solid",
            // 坐标轴线线的类型。
          },
        },
        splitLine: {
          // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
          lineStyle: {
            color: "#45FAFF",
            // 分隔线颜色
            width: 1,
            // 分隔线线宽
          },
        },
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {
            // 分隔区域的样式设置。
            color: ["rgba(250,250,250,0)", "rgba(200,200,200,0)"],

            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          },
        },
      },
      series: [
        {
          symbolSize: 1,
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: [650, 300, 100, 900, 500],
            },
          ],
          areaStyle: {
            // 单项区域填充样式
            color: "rgb(69,250,255)", // 填充的颜色。[ default: "#000" ]
            opacity: 1,
          },
          color: "#45FAFF",
        },
      ],
      backgroundColor: "rgba(0, 0, 0, 0)",
    });

    onMounted(() => {
      let t = setTimeout(() => {
        init();
      }, 100);
    });

    onBeforeUnmount(() => {
      radarChart.value.dispose();
    });
    return {
      init,
      exchangeUrl,
      updateData,
    };
  },
};
</script>
<style lang="scss" scoped>
</style>