往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）

从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

从0到1完成一个Vue后台管理项目（十一、前端分页实现）

从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）

从0到1完成一个Vue后台管理项目（十三、信息列表页面实现：对话框新增、DateTimePicker 日期时间选择器）

从0到1完成一个Vue后台管理项目（十四、对话框封装、接口联通、api优化很重点（封装思想））

从0到1完成一个Vue后台管理项目（十五、作业列表、表格数据方法的封装）

从0到1完成一个Vue后台管理项目（十六、后端分页方法以及分页组件的封装以及复用）

从0到1完成一个Vue后台管理项目（十七、使用Echarts：柱状图、折线图）

从0到1完成一个Vue后台管理项目（十八、基础地图绘制）

从0到1完成一个Vue后台管理项目（十九、地图区域样式设置、区域文字和立体设置）

地图单点涟漪配置

我们的散点是需要数据的，这里我们看一下接口

在这里插入图片描述
配置

这样，我们现在就可以看到一个散点了

单点涟漪

封装地图接口并使用

在这里插入图片描述

效果在这里插入图片描述

线图

在这里插入图片描述

我们可以看到有条线了

样式调整

在这里插入图片描述

多线

在这里插入图片描述

完成

代码

代码放给大家

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

<script>
import geoJson from '@/assets/data.json'
import { travel } from '@/api/api'
export default {
  data() {
    return {}
  },
  created() {
    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'))
      this.$echarts.registerMap('china',geoJson) //注册可用的地图，必须包括geo组件或者map图表类型的时候才可以使用
      // console.log(geoJson);
      let option ={
        backgroundColor:'rgb(121,145,209)',
        geo:{
          map:'china',
          aspectScale:0.75,//scale地图长宽比
          zoom:1.1,//缩放比,
          itemStyle:{
            normal:{
              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
              },
              shadowColor:'rgb(58,115,192)',
              // 偏移值
              shadowOffsetX:10,
              shadowOffsetY:11,
            }
          },
          regions:[{
            name:'南海诸岛',
            itemStyle: {
              opacity:0
            }
          }]
        },
        series:[{
          //配置地图相关参数，绘制地图，这个对象是关于地图图表的相关设置
          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(31,54,150)' // 0%处的颜色
                  },
                  {
                    offset:1,
                    color:'rgb(89,128,142)' // 100%处的颜色
                  }
                ],
                globalCoord:true
              },
            },
            //设置高亮
            emphasis:{
              areaColor:'rgb(46,229,206)',
              borderWidth: 0.1
            }
          },
        },
          // 关于散点图的配置
          {
            type: 'effectScatter',
            // 坐标系
            coordinateSystem:'geo',
            // 配置何时展示特效
            showEffectOn:'render',
            // 散点的大小
            symbolSize:10,
            zlevel:1,
            data:points,
            rippleEffect:{
              // 涟漪特效相关配置
              period:15,
              scale:4,
              brushType:'fill'
            }
          },
            // 关于地图线路动画效果设置
          {
            type: 'lines',
            zlevel: 2,
            effect:{
              show:true,
              period:4,
              symbol:'arrow',
              symbolSize:7,
              //拖尾效果
              trailLength:0.4
            },
            // 线的样式
            lineStyle:{
              normal:{
                color:'#1DE9B6',
                width:1,
                opacity: 0.1,
                // 弯曲程度
                curveness:0.3
              }
            },
            data:linesData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

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