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

news2024/9/20 22:38:54

实现效果

在这里插入图片描述

在线预览：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中

//根据自身情况，粘贴来的数据放在哪里就从哪里导入
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

{
  "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个部分：地图、线条、点

<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>