echarts實現指南針效果

效果圖：

 

 代碼部分：

<template>
  <div class="compassSty">
    <div id="OriengaugeId" class="cesiumContainer"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["OriengaugeId", "GaugeList"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.drawgauge("OriengaugeId");
    });
  },
  methods: {
    drawgauge(id) {
      let GaugeEcharts = echarts.init(document.getElementById(id));
      GaugeEcharts.setOption({
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}級",
        },
        grid: {},
        series: [
          // 這里是我們需要用到的儀表盤
          {
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            z: 8,
            center: ["50%", "50%"],
            radius: "70%",
            type: "gauge",
            axisTick: {
              show: false,
            },
            //儀表盤指針。
            pointer: {
              show: true,
              // 指針樣式
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAiCAMAAABcDciTAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABFFBMVEX/AAD/AAH/AQL/AQH/AAL/////AAD/AAH/AQL/AAD/AAD/AAD/AAD/AAH/AAD/AQL/AQL/AAD/AAL/AAD/AAD/AAH/AAD/AAD/AAD/AAD/AQH/AAD/AAD/AAD/AQL/AAD/AAD/AAD/AAD/AAL/AAD/AAD/AAD/AAD/AAD/AAH/AAL/AAD/AAL/Cgr/Dg7/Cgr/Dg//DQ//DQ7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAD/AAH/AQL/AQH/AAL///8EndKmAAAAVnRSTlMAAAAAAAAXJ2R4s8gM9v4aUGmguQPr+g8+W4yq3PMHK0x6m8jpAho9Zowatdwx9PX09PQxGrXcZoz+PcjpAnqbK0zzB6o+WwPr+g+guVBpDPazZHgXJ2NJFc8AAAABYktHRAX4b+nHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QcVBiY1zlpgmQAAAOZJREFUGNNNzOdawkAQheHROIoNe+8NKy5KRBB771gPCXv/92FmdhM8P5Lv3WcTIll3T4eMOmW5Xmqvr1/PtAcG80MKeQwDI9mtUWAs7fEJYHLKY7qJJmakgiCYTRpz/m/zQISFRcWSdBwt6ycrEGFVsQa0YmB9I+lCHm6bRF1bcgdxjG2inV09biHaK1Bx35jSQcmYQ1Okss1WpvAo7UpIfJyiysRhzeMkAdddn54Jzh0uWHDpcKXgivT1jUNVcMsOd4J7j4dHa5+ePfjF2ldO8Wbte4bGRy3MwJ91buPr+x9+fvX1BzPHP7+pF5ngAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA3LTIxVDA2OjM4OjI2KzAwOjAwIPtDQAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNy0yMVQwNjozODo1MyswMDowMAlb3UIAAAAASUVORK5CYII=",
              length: "50%", //指針長度
              width: "10%",//指針寬度
              offsetCenter: [0, "25%"],//指針位置
              keepAspect: true,
              itemStyle: {
                color: "#ffc600",
              },
            },
            // 坐標軸線，也就是圓圈的邊框線
            axisLine: {
              show: false,
            },
            // 分割線
            splitLine: {
              show: true,
              length: "100%",
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitNumber: 4,
            // 刻度標簽
            axisLabel: {
              show: true,
              color: "#fff",
              distance: 120,
              fontSize: 26,
              formatter: function (value) {
                switch (value) {
                  case 0:
                    return "S";
                  case 90:
                    return "W";
                  case 180:
                    return "N";
                  case 270:
                    return "E";
                  default:
                    break;
                }
              },
            },
            //最下邊數值的設置
            detail: {
              show: false,
            },
            data: [
              {
                value: [230],
              },
            ],
          },
          //這里是內部填充用的餅圖
          {
            type: "pie",
            startAngle: 90,
            radius: "80%",
            emphasis: {
              scale: false,
            },
            legendHoverLink: false,
            lable: {
              show: false,
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },
            center: ["50%", "50%"],
            z: -10,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#3450a4",
                },
              },
            ],
          },
        ],
      });
      setTimeout(function () {
        window.onresize = function () {
          GaugeEcharts.resize();
        };
      }, 200);
    },
  },
};
</script>
<style lang="less" scoped>
.compassSty {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 40%;
  left: 50%;
}
.cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

ps：根據echarts文檔調整獲取自己所需要的樣式，這里只是一個簡單的demo效果