菜单 搜索
首页 前端知识 从0到1完成一个Vue后台管理项目（二十一、网上地图资源、树形控件及路由权限分析、路由守卫）

从0到1完成一个Vue后台管理项目（二十一、网上地图资源、树形控件及路由权限分析、路由守卫）

2024-04-23 21:04:25 前端知识 前端哥 225 483 我要收藏

往期

从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后台管理项目（十九、地图区域样式设置、区域文字和立体设置）

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

网上地图资源

chartsdev.com：chartsdev.com
我们随便找一个资源
在这里插入图片描述
我们可以直接cv数据
在这里插入图片描述

<template>
  <div class="score-map">
    <div id="main"></div>
  </div>
</template>
 
<script>
import chinaJSon from 'echarts/map/json/china.json'
export default {
  data(){
    return{
 
    }
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('china', chinaJSon)
 
    // 从这里开始复制
    var name_title = "中国人民大学2017年各省市计划录取人数"
    var subname = '数据爬取自千栀网\n，\n上海、浙江无文理科录取人数'
    var nameColor = " rgb(55, 75, 113)"
    var name_fontFamily = '等线'
    var subname_fontSize = 15
    var name_fontSize = 18
    var mapName = 'china'
    var data = [
      {name:"北京",value:177},
      {name:"天津",value:42},
      {name:"河北",value:102},
      {name:"山西",value:81},
      {name:"内蒙古",value:47},
      {name:"辽宁",value:67},
      {name:"吉林",value:82},
      {name:"黑龙江",value:66},
      {name:"上海",value:24},
      {name:"江苏",value:92},
      {name:"浙江",value:114},
      {name:"安徽",value:109},
      {name:"福建",value:116},
      {name:"江西",value:91},
      {name:"山东",value:119},
      {name:"河南",value:137},
      {name:"湖北",value:116},
      {name:"湖南",value:114},
      {name:"重庆",value:91},
      {name:"四川",value:125},
      {name:"贵州",value:62},
      {name:"云南",value:83},
      {name:"西藏",value:9},
      {name:"陕西",value:80},
      {name:"甘肃",value:56},
      {name:"青海",value:10},
      {name:"宁夏",value:18},
      {name:"新疆",value:67},
      {name:"广东",value:123},
      {name:"广西",value:59},
      {name:"海南",value:14},
    ];
 
    var geoCoordMap = {};
    var toolTipData = [
      {name:"北京",value:[{name:"文科",value:95},{name:"理科",value:82}]},
      {name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
      {name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
      {name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
      {name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
      {name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
      {name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
      {name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
      {name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
      {name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
      {name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
      {name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
      {name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
      {name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
      {name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
      {name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
      {name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
      {name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
      {name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
      {name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
      {name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
      {name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
      {name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
      {name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
      {name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
      {name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
      {name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
      {name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
      {name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
      {name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
      {name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
    ];
 
    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function(v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp;
 
    });
 
// console.log("============geoCoordMap===================")
// console.log(geoCoordMap)
// console.log("================data======================")
    console.log(data)
    console.log(toolTipData)
    var max = 480,
        min = 9; // todo
    var maxSize4Pin = 100,
        minSize4Pin = 20;
 
    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    let option = {
      title: {
        text: name_title,
        subtext: subname,
        x: 'center',
        textStyle: {
          color: nameColor,
          fontFamily: name_fontFamily,
          fontSize: name_fontSize
        },
        subtextStyle:{
          fontSize:subname_fontSize,
          fontFamily:name_fontFamily
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (typeof(params.value)[2] == "undefined") {
            var toolTiphtml = ''
            for(let i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(let j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }
            console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
          } else {
            for(let i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(let j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }
            console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
          }
        }
      },
      // legend: {
      //     orient: 'vertical',
      //     y: 'bottom',
      //     x: 'right',
      //     data: ['credit_pm2.5'],
      //     textStyle: {
      //         color: '#fff'
      //     }
      // },
      visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {
          // color: ['#3B5077', '#031525'] // 蓝黑
          // color: ['#ffc0cb', '#800080'] // 红紫
          // color: ['#3C3B3F', '#605C3C'] // 黑绿
          // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
          // color: ['#23074d', '#cc5333'] // 紫红
          color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#1488CC', '#2B32B2'] // 浅蓝
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
 
        }
      },
      /*工具按钮组*/
      // toolbox: {
      //     show: true,
      //     orient: 'vertical',
      //     left: 'right',
      //     top: 'center',
      //     feature: {
      //         dataView: {
      //             readOnly: false
      //         },
      //         restore: {},
      //         saveAsImage: {}
      //     }
      // },
      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false,
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7',
          }
        }
      },
      series: [{
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#05C3F9'
          }
        }
      },
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          animation: false,
          data: data
        },
        {
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin', //气泡
          symbolSize: function(val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 9,
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#F62157', //标志颜色
            }
          },
          zlevel: 6,
          data: convertData(data),
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
          }).slice(0, 5)),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            }
          },
          zlevel: 1
        },
 
      ]
    };
    myChart.setOption(option);
  }
}
</script>
 
<style lang="scss" scoped>
.score-map{
  width: 100%;
  #main{
    width: 100%;
    height: 500px;
  }
}
</style>
 
复制

效果
在这里插入图片描述

使用el-tree

在这里插入图片描述
我们可以打印一下值，看看是什么
页面效果
在这里插入图片描述

动态路由思路

  1. 权限管理和动态路由的思路
  2. 根据不同的用户登陆上来，返回对应的路由权限菜单
  3. 一般可以通过树形控件达到权限的精准控制，根据不同的角色，勾选不同的菜单权限，将菜单数据提交给
    后端进行保存
  4. 后端保存之后，在用户进行登录都时候就会查询该用户的菜单数据，最终进行动态的渲染展示
  5. 动态添加路由使用addRoutes方法

获取树形控件选中的值

在这里插入图片描述
在这里插入图片描述

路由导航守卫拦截验证

在这里插入图片描述
这样我们必须通过login才能进入别的页面

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5816.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！