从0到1完成一个Vue后台管理项目(二十、地图涟漪、线图)

导读:本篇文章讲解 从0到1完成一个Vue后台管理项目(二十、地图涟漪、线图),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

往期

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/79667.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!