Vue+Echarts 实现中国地图和飞线效果

目录

实现效果

在线预览:https://mouday.github.io/vue-demo/packages/china-map/dist/index.html

准备

高版本的echarts,不包含地图数据,需要自己下载到项目中

1、地图数据下载

https://datav.aliyun.com/portal/school/atlas/area_selector#\&lat=30.332329214580188\&lng=106.72278672066881\&zoom=3.5

2、注册地图到echarts中

js 复制代码
//根据自身情况,粘贴来的数据放在哪里就从哪里导入
import chinaMap from "@/assets/map/china.json";

//注册地图到echarts中  这里的 "china" 要与地图数据的option中的geo中的map对应
echarts.registerMap("china", { geoJSON: chinaMap });

为了能复现效果,给出了项目的完整结构和完整代码

项目结构

$ tree -I node_modules
.
├── package.json
└── src
    ├── App.vue
    ├── ChinaMap.vue
    ├── main.js
    └── utils
        ├── event-util.js
        └── map-util
            ├── china.json
            ├── index.js
            └── map-data.js

package.json

json 复制代码
{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "echarts": "^5.5.0",
    "element-ui": "^2.15.11",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.8",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

ChinaMap.vue

主要有3个部分:地图、线条、点

html 复制代码
<template>
  <div class="chartMap" ref="chinaMap"></div>
</template>

<script>
import * as echarts from "echarts";
import "@/utils/map-util/index.js"; // 注册地图数据
import { chinaRegions } from "@/utils/map-util/map-data.js";

// 事件监听工具类
import * as eventUtil from "@/utils/event-util.js";

export default {
  name: "dataView",

  data() {
    return {
      chinaMap: "", // 地图
    };
  },
  created() {},

  mounted() {
    this.init();
  },

  beforeDestroy() {
    eventUtil.off(window, "resize", this.handleWindowResize);
  },

  methods: {
    handleWindowResize() {
      //动态改变图表尺寸
      this.chinaMap.resize();
    },

    init() {
      this.getMap(); // 地图
    },

    // 地图
    getMap() {
      this.chinaMap = echarts.init(this.$refs.chinaMap);

      let option = {
        // 设置地图样式
        geo: {
          map: "china",
          zoom: 1.2,
          layoutSize: "100%", //保持地图宽高比
          // 设置图块颜色,也可以通过图例 visualMap 设置颜色,但是飞线的颜色设置会失效,一直取 图例 设置的颜色;根据需求选择;
          regions: chinaRegions,
          label: {
            // 默认样式
            normal: {
              show: false,
              fontSize: "10",
              color: "rgba(255,255,255,.3)",
            },
            // 高亮样式
            emphasis: {
              show: true,
              textStyle: {
                color: "#1955a4",
              },
            },
          },
          itemStyle: {
            // 默认样式,图块没数据时,会取默认颜色
            normal: {
              borderColor: "#c0e0e3",
              areaColor: "#29c5f6",
              opacity: 0.8,
            },
            // 高亮样式
            emphasis: {
              areaColor: "#f2d5ad",
            },
          },
        },
        series: [
          // 设置飞线样式
          {
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 100,
            effect: {
              show: true,
              period: 4, // 图标飞跃速度,值越小速度越快
              trailLength: 0.2, // 尾迹长度[0,1]值越大,尾迹越长
              symbol: "pin", // 图标类型
              symbolSize: 4, // 图标大小
              color: "#f5f3b3", // 图标颜色
            },

            lineStyle: {
              color: "#000",
              normal: {
                show: true,
                width: 1, //尾迹线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
                color: "#44add00f", // 飞线颜色
              },
            },
            // 飞线数据
            data: [
              [
                {
                  // 出发
                  coord: [117.1582, 36.8701], // 山东
                  value: 1,
                },
                {
                  // 目的地
                  coord: [116.4551, 40.2539], // 北京
                },
              ],
              [
                {
                  // 出发
                  coord: [110.3893, 19.8516], // 海南
                  value: 1,
                },
                {
                  // 目的地
                  coord: [116.4551, 40.2539], // 北京
                },
              ],
            ],
          },

          // 中心点设置
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 15,
            rippleEffect: {
              period: 3,
              brushType: "fill", // 动画样式 fill stroke
              scale: 60,
              color: "#7ce7fd",
              number: 2,
            },
            symbol: "circle", // 图标样式
            symbolSize: 2,
            itemStyle: {
              color: "#5cc8d4",
            },
            // 中心点数据
            data: [
              {
                name: "北京",
                value: [116.4551, 40.2539, 10],
              },
            ],
          },
        ],
      };

      this.chinaMap.setOption(option);

      eventUtil.on(window, "resize", this.handleWindowResize);
    },
  },
};
</script>

<style lang="less">
.chartMap {
  width: 500px;
  height: 500px;
  background: #132d48;
}
</style>

源码地址:https://github.com/mouday/vue-demo

参考文章

相关推荐
懒大王爱吃狼29 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式