后台管理项目v2重构v3----分数地图，旅游地图

本文链接：https://blog.csdn.net/fgujkkoiuyt_/article/details/129074067

创建3.0项目

1: vue-cli : 安装并执行 npm init vue@latest

选择项目功能时：除了第一项的项目名字外，其他可以暂时No

npm install

npm run dev ：运行

npm run build: 打包 (生成一个dist文件夹)

1. 2 : vite: 使用vite 体验更快速

npm init vite-app

npm install

npm run dev

分数地图

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

<script setup>
import chinaJson from "echarts/map/json/china";
import {onMounted} from 'vue';
import echarts from 'echarts';

  onMounted(()=>{
    let myChart = echarts.init(document.getElementById("main"));
    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 = 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 {
    height: 500px;
    width: 100%;
  }
}
</style>

旅游地图

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

<script setup>
import { travelView } from "@/api/api.js";
// 加大括号代表的是引入这个文件，引入路径下的指定文件中的某一项内容，所以说名字一定要对应上
import geoJson from "../../assets/data.json";
import echarts from 'echarts';
import {onMounted} from 'vue';

      onMounted(()=>{
        travelView().then((res) => {
        if (res.data.status === 200) {
          let {points,linesData} = res.data.data
          draw(points,linesData)
        }
      })
      })
    function draw(point,linesData) {
      console.log(linesData);
      //实例化一下
      let myChart = echarts.init(document.getElementById("main"));
      // 注册的是中国地图,必须包括geo组件或者map图表类型的时候才可以使用
      // 地图：世界地图，中国地图，省份地图，市区地图
      echarts.registerMap("china", geoJson);
      myChart.setOption({
        backgroundColor: "rgb(121,145,200)",
        geo: {
          map: "china",
          aspectScale: 0.75, //地图的长宽比
          zoom: 1.1, //图层
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    //偏移0的时候一个颜色
                    offset: 0,
                    color: "#09132c",
                  },
                  {
                    // 偏移1的时候一个颜色
                    offset: 1,
                    color: "#274d68",
                  },
                ],
                globalCoord: true, //延长作用域
              },
              // 区域阴影颜色
              shadowColor: "rgb(58,115,192)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
          // 加一个附件
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                opacity: 0,
              },
            },
          ],
        }, //配置结束了
        // 南海诸岛的配置
        series: [
          //1. 配置地图相关的数据参数
          {
            type: "map",
            label: {
              normal: {
                show: true, //显示文字
                textStyle: {
                  color: "1DE986",
                },
              },
              emphasis: {
                textStyle: {
                  color: "rgb(183,185,14)",
                },
              },
            },
            zoom: 1.1, //图层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)",
                    },
                    {
                      offset: 1,
                      color: "rgb(89,128,142)",
                    },
                  ], //渐变
                  globalCoord: true, //全局生效
                },
              },
              emphasis: {
                //高亮效果
                areaColor: "rgb(46,229,206)",
                borderWidth: 0.1,
              },
            },
          },
          //2.配置散点图的各项参数
          {
            type: "effectScatter", //散点(气泡)图
            coordinateSystem: "geo", //使用 地理 坐标系
            showEffectOn: "render", //配置何时显示特效
            SymbolSize: 10,
            zleval: 1,
            data: point,
            rippleEffect: {
              period: 5, //动画周期
              scale: 4, //缩放比例
              brushType: "fill", //波纹的绘制方式
            },
          },
          //3.配置线性图的各项参数
          {
            type:'lines',
            zlevel:2,//图层
            effect:{
              show:true,
              period:4,
              symbol:'arrow',//显示方式
              symbolSize:7,
              trailLength:0.4//拖尾的效果 取值范围0-1，值越大效果越明显
            },
            lineStyle:{
              normal:{
                color:'#1DE9B6',
                width:1,
                opacity:0.4,
                curveness:0.7
              }
            },
            data:linesData
          }
        ],
      });
    }
</script>

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