极致呈现系列之：Echarts地图的浩瀚视野(三)

经过前面两篇博文的介绍，我们对Echarts中地图的使用已经有了深入的了解， 今天我们通过一个实例来对Echarts地图做一个综合应用，实现地图上的飞线效果和坐标点波纹效果。最终效果如下图所示：

项目准备

在实现上述效果的代码之前，我们需要先创建一个vue项目，并安装Echarts库，并下载JSON格式的地图数据，这里选择vite作为打包工具来创建vue3项目

创建vue项目,使用下面命令创建vite项目，并在配置项里面选择vue，js

npm create vite@latest

安装Echarts

npm install echarts

准备JSON格式的数据

Echarts的地图组件需要传入地图数据，可以是SVG格式，也可以是GeoJSON格式，我们常用的是JSON格式，JSON格式的地图数据需要先在网上下载。地图数据可以到下面的网址进行下载：https://datav.aliyun.com/portal/school/atlas/area_selector

在public文件夹下新建json文件夹，将上面下载的json数据文件放入该文件夹。

创建组件及div

vscode打开刚刚创建的vue项目，在components文件夹下新建MapChartFlyLine.vue文件，在模板中创建一个div

点击App.vue页面，将上面创建的MapChartFlyLine.vue文件导入，

初始化地图

在MapChartFlyLine.vue组件中引入Echarts和地图的json数据，同时引入vue的组合式API

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' 
import cmap from '../assets/china.json'
const chart = ref(null)

注册地图数据

echarts.registerMap("china", cmap)

定义需要在地图上显示的点的坐标及样式

const points = [
  { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }
  , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
  , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
  , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
  , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
  , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
  , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
  , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
  , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
  , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
  , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
  , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
  , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
  , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
  , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
  , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
  , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
  , { value: [120.125248,30.224876] }
]

在onMounted中初始化地图

const myChart = echarts.init(chart.value)
const option = {}
myChart.setOption(option)

配置地图

使用geo配置项配置地图

geo: {
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      emphasis: {
        areaColor: '#2AB8FF',
        borderWidth: 0,
        color: 'green',
        label: {
          show: false
        },

      },
      itemStyle: {
        areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [{
            offset: 0,
            color: '#09132c' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#274d68'  // 100% 处的颜色
          }],
          globalCoord: true // 缺省为 false
        },
        shadowColor: 'rgb(58,115,192)',
        shadowOffsetX: 10,
        shadowOffsetY: 11,
      },
      regions: [{
        name: '南海诸岛',
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',

          borderColor: 'rgba(0, 10, 52, 1)',
          opacity: 0,
          label: {
            show: false,
            color: "#009cc9",
          }
        }, 
      }],
    },

三维效果

前面讲过，要实现三维效果，可以在geo的基础上在叠加一个地图，在series进行配置

{
      type: 'map',
      roam: false,
      label: {
        show: true,
        color: '#1DE9B6',
      },
      itemStyle: {
        borderColor: 'rgb(147, 235, 248)',
        borderWidth: 1,
        areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [{
            offset: 0,
            color: '#09132c' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#274d68'  // 100% 处的颜色
          }],
          globalCoord: true // 缺省为 false
        }, 
      },
      emphasis: {
        areaColor: 'rgb(46,229,206)', 
        borderWidth: 0.1
      },
      zoom: 1.1, 
      map: 'china' 
    },

飞线效果

在series中使用type: 'lines’来配置飞线效果；常用的飞线特效属性如下：

1. type：指定特效的类型，对于飞线特效，该值应设置为 'lines'。
2. effect：飞线特效的效果配置，可以通过该属性进行自定义。常见的属性包括：
   • show：是否显示特效。
   • period：特效的运动周期，以毫秒为单位。
   • trailLength：特效尾迹的长度，可以设置为一个百分比值。
   • symbol：特效图形的标记类型，如 'arrow'、'circle'、'rect' 等。
   • symbolSize：特效图形的大小，可以设置为一个固定的数值或一个数组，表示宽度和高度。
3. data：飞线特效的数据配置，用于定义特效的起始和结束点。每个数据项包括以下属性：
   • fromName：起始点的名称。
   • toName：结束点的名称。
   • coords：起始点和结束点的经纬度坐标数组。
4. lineStyle：飞线的样式配置，用于定义线条的颜色、宽度等属性。常见的属性包括：
   • color：线条的颜色。
   • width：线条的宽度。
   • curveness：线条的曲度，可以设置为一个介于 0 和 1 之间的值，值越大曲线越明显。
     通过上面的属性，设置飞线效果代码如下

 {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 7, //图标大小
      },
      lineStyle: {
        color: '#1DE9B6',
        width: 1, //线条宽度
        opacity: 0.1, //尾迹线条透明度
        curveness: .3 //尾迹线条曲直度 
      },
      data: [
        { coords: [[118.8062, 31.9208], [120.125248, 30.224876]], lineStyle: { color: '#4ab2e5' } }
        , { coords: [[127.9688, 45.368], [120.125248, 30.224876]], lineStyle: { color: '#4fb6d2' } }
        , { coords: [[110.3467, 41.4899], [120.125248, 30.224876]], lineStyle: { color: '#52b9c7' } }
        , { coords: [[125.8154, 44.2584], [120.125248, 30.224876]], lineStyle: { color: '#5abead' } }
        , { coords: [[116.4551, 40.2539], [120.125248, 30.224876]], lineStyle: { color: '#f34e2b' } }
        , { coords: [[123.1238, 42.1216], [120.125248, 30.224876]], lineStyle: { color: '#f56321' } }
        , { coords: [[114.4995, 38.1006], [120.125248, 30.224876]], lineStyle: { color: '#f56f1c' } }
        , { coords: [[117.4219, 39.4189], [120.125248, 30.224876]], lineStyle: { color: '#f58414' } }
        , { coords: [[112.3352, 37.9413], [120.125248, 30.224876]], lineStyle: { color: '#f58f0e' } }
        , { coords: [[109.1162, 34.2004], [120.125248, 30.224876]], lineStyle: { color: '#f5a305' } }
        , { coords: [[103.5901, 36.3043], [120.125248, 30.224876]], lineStyle: { color: '#e7ab0b' } }
        , { coords: [[106.3586, 38.1775], [120.125248, 30.224876]], lineStyle: { color: '#dfae10' } }
        , { coords: [[101.4038, 36.8207], [120.125248, 30.224876]], lineStyle: { color: '#d5b314' } }
        , { coords: [[103.9526, 30.7617], [120.125248, 30.224876]], lineStyle: { color: '#c1bb1f' } }
        , { coords: [[108.384366, 30.439702], [120.125248, 30.224876]], lineStyle: { color: '#b9be23' } }
        , { coords: [[113.0823, 28.2568], [120.125248, 30.224876]], lineStyle: { color: '#a6c62c' } }
        , { coords: [[102.9199, 25.46639], [120.125248, 30.224876]], lineStyle: { color: '#96cc34' } }
      ]
    },

波纹效果

在ECharts中，我们可以使用type: 'effectScatter' 来实现波纹效果；
effectScatter 是一种图表类型，用于绘制带有特殊效果的散点图。它可以通过在散点上添加波纹或闪烁的效果来吸引用户的注意力，以突出显示特定的数据点。

使用 type: 'effectScatter' ，我们可以通过以下方式配置散点图的效果：

1. data: 散点图的数据数组，每个数据项包含位置信息和其他需要展示的数据。位置信息可以通过经纬度或者坐标系的数值来表示。

2. symbol: 散点的形状，可以是预定义的形状，如圆形、方形等，也可以是自定义的 SVG 路径。

3. symbolSize: 散点的大小，可以是一个固定的数值，也可以是一个函数，根据数据的值来动态设置散点的大小。

4. rippleEffect: 波纹效果的配置，可以设置波纹的颜色、扩散速度、透明度等参数。

5. label: 散点上的标签配置，可以设置标签的内容、字体样式、位置等。

6. itemStyle: 散点的样式配置，可以设置散点的颜色、描边、透明度等。
   波纹效果代码如下：

{
      type: 'effectScatter',
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      zlevel: 1,
      rippleEffect: {
        period: 15,
        scale: 4,
        brushType: 'fill'
      }, 
      label: {
        formatter: '{b}',
        position: 'right',
        offset: [15, 0],
        color: '#1DE9B6',
        show: true,
      },
      itemStyle: {
        color: '#1DE9B6',
        shadowBlur: 10,
        shadowColor: '#333'
      },
      symbolSize: 12,
      data: points
    },  

至此，地图的飞线效果和波纹效果已经完成，刷新浏览器看下效果

好了，关于Echarts中地图的应用九写到这里，有问题的小伙伴评论区见，喜欢的小伙伴点赞关注加收藏哦！也可以通过公众号搜索“九仞山”关注我的公众号，获取更多内容，里面会不定期放出源码哦！