使用 Echarts 插件完成中国旅游地图

最新推荐文章于 2025-05-07 14:38:51 发布

清风与我

最新推荐文章于 2025-05-07 14:38:51 发布

阅读量2.8k

点赞数 3

分类专栏： Echarts 文章标签： echarts 旅游前端

本文链接：https://blog.youkuaiyun.com/weixin_62897746/article/details/128203821

版权

Echarts 专栏收录该内容

3 篇文章

订阅专栏

前言：

大家都知道，一般情况下，想要使用前端设置一个 中国旅游地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

什么是 Echarts 插件

echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果

具体实现思路

设置一个标签，标签设置宽高，否则不显示
引入中国地图的数据
初始化echarts实例，并挂载到dom中
注册中国地图，必须在geo或map中
this.$echarts.registerMap(“china”, geoJson);
编写配置项，把配置项添加到实例中（简写）
配置项：
背景色
geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛
series：相关数据的各项参数，可以分为好几层，层次显示用图层（zoom）划分，

基础地图相关的数据参数：显示文字，文字颜色，图层，样式（itemStyle)：地图区域的颜色，背景色，边框，高亮效果（鼠标移入时显示样式）

请求数据（把请求到的值：points, linesData）给2，3的data

配置散点图的各项参数：类型（type）：散点图（气泡图），使用地理坐标系，配置何时显示特效(绘制完成后显示特效)，标记的大小(默认为10)
图层：1，data（数据），涟漪特效相关配置：动画周期，缩放比例，波纹的绘制
配置线性图的各项参数：类型（type）：线性图，图层：2，线特效的配置（effect）：是否显示特效（show），特效动画的时间，显示方式，特效的大小，
拖尾的效果，取值范围 0-1，值越大效果越明显，线的样式（透明度，颜色，宽，弯曲度），data（数据）

中国旅游地图成品展示

线条上的箭头可以移动

在这里插入图片描述

步骤：

1. 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save

1. 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

1. 在js中使用需要进行的步骤：

引入中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下

1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);

注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
地图分为：世界地图，中国地图，省份地图，市区地图

下面代码的意思，可以跳转至官方网站进行查看

完成中国旅游地图代码

代码中大部分功能写有注释，部分没有可以在 Echarts 官网进行查看

<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import geoJson from "echarts/map/json/china";
import { travel } from "@/api/api";
export default {
  data() {
    return {};
  },
  mounted() {
    travel().then((res) => {
      if (res.data.status === 200) {
        let { points, linesData } = res.data.data;
        this.draw(points, linesData);
      }
    });
  },
  methods: {
    draw(points, linesData) {
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
      // 地图：世界地图，中国地图，省份地图，市区地图
      this.$echarts.registerMap("china", geoJson);
      myChart.setOption({
        // 背景色
        backgroundColor: "rgb(121,145,200)",
        // 配置项(组件)
        geo: {
          map: "china",
          // 地图的长宽比例
          aspectScale: 0.75,
          // 图层
          zoom: 1.1,
          // 样式
          itemStyle: {
            // 标准
            normal: {
              // 地图区域的颜色
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                // 颜色的步骤
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c",
                  },
                  {
                    offset: 1,
                    color: "#274d68",
                  },
                ],
                // 延长作用域
                globalCoord: true,
              },
              // 盒子的阴影
              shadowColor: "rgb(58,115,192)",
              // 偏移
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
          region: [
            {
              name: "南海诸岛",
              itemStyle: {
                opacity: 0,
              },
            },
          ],
        },
        series: [
          // 1. 配置基础地图相关的数据参数
          {
            type: "map",
            label: {
              normal: {
                // 显示文字
                show: true,
                textStyle: {
                  color: "#1DE9B6",
                },
              },
              emphasis: {
                textStyle: {
                  color: "rgb(183,185,14)",
                },
              },
            },
            // 图层
            zoom: 1.1,
            map: "china",
            itemStyle: {
              normal: {
                // 背景色
                backgroundColor: "rgb(147,235,248)",
                // 边框
                borderWidth: 1,
                // 区域颜色
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  // 文档
                  r: 0.8,
                  colorStops: [
                    { offset: 0, color: "rgb(34,54,150)" },
                    { offset: 1, color: "rgb(89,128,142)" },
                  ],
                  // 全局生效
                  globalCoord: true,
                },
              },
              // 高亮效果
              emphasis: {
                areaColor: "rgb(46,229,206)",
                borderWidth: 0.1,
              },
            },
          },
          // 2. 配置散点图的各项参数
          {
            // 散点图（气泡图）
            type: "effectScatter",
            // 使用地理坐标系
            coordinateSystem: "geo",
            // 配置何时显示特效(绘制完成后显示特效)
            showEffectOn: "render",
            // 标记的大小(默认为10)
            symbolSize: 10,
            // 图层
            zlevel: 1,
            // 数据
            data: points,
            // 涟漪特效相关配置
            rippleEffect: {
              // 动画周期
              period: 5,
              // 缩放比例
              scale: 4,
              // 波纹的绘制
              brushType: "fill",
            },
          },
          // 3. 配置线性图的各项参数
          {
            // 线性图
            type: "lines",
            // 图层
            zlevel: 2,
            // 线特效的配置
            effect: {
              // 是否显示特效
              show: true,
              // 特效动画的时间
              period: 4,
              // 显示方式
              symbol: "arrow",
              // 特效的大小
              symbolSize: 7,
              // 拖尾的效果，取值范围 0-1，值越大效果越明显
              trailLength: 0.6,
            },
            lineStyle: {
              normal: {
                color: "#1DE986",
                width: 1,
                opacity: 0.4,
                curveness: 0.7,
              },
            },
            data: linesData,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  height: 100%;
  #main {
    width: 100%;
    height: 650px;
  }
}
</style>