echarts-雷达图

效果图：

 

 

 

<div style="width: 462px; height: 290px;id="propertyRightTop"></div>

 

 // 自适应字体大小变化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("propertyRightTop")
      );

      let option = {
        backgroundColor: "transparent",
        grid: {
          top: "20%",
        },
        radar: {
          splitNumber: 4, // 雷达图圈数设置

          splitLine: {
            lineStyle: {
              color: [
                "rgba(255,255,255,0.4)",
                "rgba(255,255,255,0.4)",
                "rgba(255,255,255,0.4)",
                "rgba(255,255,255,0.4)",
                "rgba(255,255,255,0.4)",
                "rgba(255,255,255,.4)",
              ],
            },
          },

          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          indicator: [
            {
              name: "",
              max: 100,
            },
            {
              name: "",
              max: 100,
            },
            {
              name: "",
              max: 100,
            },
            {
              name: "",
              max: 100,
            },
          ],
        },

        series: [
          {
            type: "radar",

            data: [
              {
                value: [88, 85, 65, 88],
                name: "预算分配（Allocated Budget）",
              },
            ],
            itemStyle: {
              normal: {
                color: "#00C9A3",
              },
            },
            areaStyle: {
              normal: {
                opacity: 0.2,
              },
            },
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },