echarts带有箭头的雷达图

一、效果图如下：

二、代码配置如下：
1、父组件：

<template>
  <div class="page-con">
    <div class="main-con">
      <item />
    </div>
  </div>
</template>

<script>
import item from '../bigdata/components/item.vue'
export default {
  components: {
    item
  }
}
</script>

<style lang="scss" scoped>
.page-con {
  width: 100%;
  height: 100%;
  .main-con {
    width: 32%;
    height: 33%;
  }
}
</style>

2、子组件：

<template>
  <div class="main">
    <div class="volume" id="volume2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawBar();
    });
    //获取数据。
    this.reloadChart();
    //自适应浏览器。
    window.addEventListener("resize", () => {
      this.reloadChart();
    });
  },
  //组件销毁。
  destroyed() {
    this.disposeChart();
  },
  methods: {
    drawBar() {
      var dataValue = [
        { name: "基础设施", max: 6500 },
        { name: "消防设施", max: 16000 },
        { name: "技防设施", max: 30000 },
        { name: "公建配套", max: 38000 },
        { name: "环境质量", max: 52000 },
        { name: "改造房屋", max: 25000 },
      ];
      var num = [4300, 14000, 20000, 30000, 40000, 19000];
      this.myChart = this.$echarts.init(document.getElementById("volume2"));
      // 绘制图表
      let option = {
        tooltip: {},
        legend: {},
        radar: {
          center: ["50%", "50%"], // 位置
          radius: this.fontSize(2.5), //大小
          name: {
            textStyle: {
              color: "#00D8FB",
              fontSize: this.fontSize(0.35),
              fontWeight: "normal",
            },
          },
          indicator: dataValue,
          splitArea: {
            show: true,
            areaStyle: {
              color: "rgba(8, 31, 66, 0.8)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#00EEFA",
            },
            show: true,
            symbolSize: [10, 8],
            symbol: ["none", "arrow"],
            symbolOffset: [0, 10],
          },
          splitLine: {
            //边
            show: true,
            lineStyle: {
              color: ["#0179D7"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            type: "radar",
            symbol: "circle", //设置拐点格式样式 如:实心圆，空心圆或不显示拐点等
            itemStyle: {
              normal: {
                color: "#02F0F3",
                lineStyle: {
                  width: 1, //设置各个拐点连接的线条宽度
                },
              },
            },
            symbolSize: 3, //设置各个拐点的大小
            data: [
              {
                value: num,
              },
            ],
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(3, 135, 171, 1)" },
                { offset: 1, color: "rgba(4, 57, 172, 1)" },
              ]),
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    //字体自适应。
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
    //销毁图表。
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    //重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawBar();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #041431;
  .volume {
    width: 100%;
    height: 100%;
  }
}
</style>