vue3/AMapUI/PathNavigator/echarts gauge仪表盘

原创已于 2023-07-08 09:15:57 修改 · 置顶 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #数据可视化 #typescript #vue.js #vite

于 2022-03-23 08:43:01 首次发布

import this 专栏收录该内容

26 篇文章

订阅专栏

本文探讨了如何在Web应用中正确引入AMapLoader并设置AMapUI全局变量，同时介绍了如何销毁高德轨迹、PathSimplifier的使用以及PathNavigator与ECharts gauge的动态更新。还涉及了如何关闭ECharts动画和实现轨迹分段显示整数。

1.AMapLoader 引入AMapUI 全局变量问题

 AMapLoader.load({
    key: "****************", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.MapType", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      // 是否加载 AMapUI，缺省不加载
      version: "1.1", // AMapUI 版本
      plugins: [], // 需要加载的 AMapUI ui插件
    },
  })

// 全局AMapUI变量
declare var AMapUI: any;

2. 高德AMapUI/PathSimplifier 上一次轨迹销毁

 if (pathSimplifier.value) {
    pathSimplifier.value.setData([]);
    pathSimplifier.value = null;
  }

3.PathNavigator + echarts gauge仪表盘动态更新数据setOption

由于此处写在了 PathNavigator的onMove监听里边数据更新或很快需要将echarts的动画属性关闭（默认是开启的）

const option = {
    tooltip: {
      show: false,
    },
    color: "#1890FF",
    animation: false,
    series:{}
  };

 gauge.value.setOption({
          series: [
            {
              data: [
                {
                  value: Number(naviAtData.value.spd || 0),
                  name: "行驶速度",
                },
              ],
            },
            {
              data: [
                {
                  value: miles,
                  name: "轨迹里程",
                },
              ],
            },
          ],
        });

4.echarts gauge 自动分段保留整数

  axisLabel: {
          distance: 5,
          fontFamily: "Courier New",
          formatter: function (axis:number) {
            return Math.ceil(axis || 0)
          },
        },

5.PathNavigator 巡航器在巡航完毕不会触发stop事件判断是否巡航完毕可使用`isCursorAtPathEnd`

isCursorAtPathEnd()

boolean

  if (navi.value.isCursorAtPathEnd()) {
        //  巡航器位于终点
        navi.value.stop();
        setTimeout(() => {
          navi.value.start();
        }, 500);
      }