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

参考文章

相关推荐
沉浮yu大海3 分钟前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆3 分钟前
软件工程第13章小测
服务器·前端·数据库·软件工程
莘薪1 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧1 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow
在路上`1 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员1 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
蒜蓉大猩猩1 小时前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
铅华尽2 小时前
前端---HTML(一)
前端
无限大.2 小时前
0基础学前端系列 -- 深入理解 HTML 布局
前端·html
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html