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

往期

从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才能进入别的页面