Echarts之世界地图，展示路线图组件开发

开心市民小李・ࡇ・

已于 2022-08-04 15:58:53 修改

阅读量854

点赞数

分类专栏： vue3.0 echarts 文章标签： echarts javascript ecmascript

于 2022-07-29 14:40:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44242623/article/details/126054639

版权

本文详细介绍了如何使用Echarts库开发一个展示世界地图并呈现路线图的组件。通过配置option对象，实现地图的个性化展示和数据的动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts世界地图在这里插入图片描述
option配置

<template>
  <div class="h-full w-full">
    <Loadings :loading="loading" />
    <div ref="chartRef" class="h-full w-full"></div>
  </div>
</template>
<script lang="ts" setup>
  import { registerMap } from 'echarts';
  import { onActivated, ref, Ref, watch } from 'vue';

  import { Loadings } from '/@/components/Loadings';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { userDetailsStore } from '/@/store/modules/userDetails';
  import echarts from '/@/utils/lib/echarts';

  const mapType = 'world';
  const loading = ref(true);
  const chartRef = ref<HTMLDivElement | null>(null);

  const { setOptions, resize } = useEChart