vite + vue3 —— vue地图大屏项目_vue3地图大屏项主要知识点

目录

项目开始时：

如何选择rem设配项目 （六步骤）

一：安装

二：根据设计稿修改配置

三：在main引入

四：cssrem插件

cssrem插件配置

五：页面使用

六：卸载依赖，复制 flexible.js

配置最小最大宽高

下面写入地图

china.vue

city.vue

home.vue

province.vue

---

---

项目开始时：

首先大屏需要自适应！要设置最大最小宽高！最大最小宽高要是用px单位！其他所有使用rem单位！

念及此！项目开始

推荐内容

如何选择rem设配项目 （六步骤）

这里分享一种轻量极简的方式

一：安装

cnpm i -S lib-flexible

二：根据设计稿修改配置

因为默认情况下只会在540px分辨率一下生效 所以我们需要根据我们的项目分辨率进行调整

在node_module/lib-flexible/flexible.js中修改代码如下

// 修改原始的

//if (width / dpr > 540) {

// width = 540 * dpr;

// }

// var rem = width / 10;

--------------------------------------------------

// 修改成为

// 最小400px，最大适配2560px

if (width / dpr < 400) {

width = 400 * dpr;

} elseif (width / dpr > 2560) {

width = 2560 * dpr;

}

// 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用

var rem = width / 24;

三：在main引入

import { createApp } from'vue'import App from'./App.vue'import router from'./router'import store from'./store'// 引用import'lib-flexible/flexible.js'

createApp(App).use(store).use(router).mount('#app')

这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size

四：cssrem插件

我们在写代码的时候发现如果我们都根据80px为1rem，在编写代码的时候手动转换，非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便

cssrem插件配置

在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置

修改Root Font Size（基准font-size） 配置项为80即可

五：页面使用

至此自适应 px转rem 前期已经完成！！！

六：卸载依赖，复制 flexible.js

但是你想一下，我们修改了 node_module ，你将上传到git仓库，别人在拉下来，下载依赖安装，是不是有回到默认的node_module/lib-flexible/flexible.js 配置了，所以我们直接将flexible.js这个文件复制，放在项目中，在将 npm uninstall lib-flexible 卸载了

配置完成！！！

配置最小最大宽高

现在就可以在页面开始书写代码了，注意最大最小宽高需要配合@media,最大最小宽高 只能使用px单位，

比如：我需要小于我笔记本宽/高度就不在缩小，

记录此时到宽高和font-size

最大的外层容器设置最大最小宽高

app.vue设置font-size，不然 虽然限制了最大最小宽但是页面比例还会缩小

下面写入地图

第一：地图是由点组成线！线组成图！

第二：如果每块的地图区域标识的文字不在居中位置可以在对应的地图json中调节cp ！

第三：地图数据在 DataV.GeoAtlas地理小工具系列 可以下载 ！

第四：目前地图全是静态json文件，假如要打包，可能会路径不对，所以放置的位置建议在publick中

第五：省、城、乡镇地图基于中国地图的json，所以第一步要有中国地图的json！

念及此！我将一步步展示地图，必须一遍回，一边懂

路由如下

因为地图里所有页面是home的children ，所以在页面使用<router-view></router-view>用于展示地地图

每行重要的地方都有注释，总结：将所需的地图文件准备好，配好路由，建好页面，基本就成了，到此也就基本结束了，最后祝大家2022 越来越强 我会吧项目上传，也把代码全部贴到博文中，希望大家bug减少，早早下班

china.vue

<template>

<!-- 中国地图 省级 一级页面 -->

<div id="main"></div>

</template>

<script setup>

import * as echarts from"echarts";

import jsonData from"../../../public/china.json";

import { onMounted, reactive } from"vue";

import { useRouter } from"vue-router";

constrouter = useRouter();

let state = reactive({

// ename为了获取省份的名字

dataList: [

{ ename: "nanhaizhudao", name: "南海诸岛" },

{ ename: "beijing", name: "北京" },

{ ename: "tianjin", name: "天津" },

{ ename: "shanghai", name: "上海" },

{ ename: "chongqing", name: "重庆" },

{ ename: "hebei", name: "河北" },

{ ename: "henan", name: "河南" },

{ ename: "yunnan", name: "云南" },

{ ename: "liaoning", name: "辽宁" },

{ ename: "heilongjiang", name: "黑龙江" },

{ ename: "hunan", name: "湖南" },

{ ename: "anhui", name: "安徽" },

{ ename: "shandong", name: "山东" },

{ ename: "xinjiang", name: "新疆" },

{ ename: "jiangsu", name: "江苏" },

{ ename: "zhejiang", name: "浙江" },

{ ename: "jiangxi", name: "江西" },

{ ename: "hubei", name: "湖北" },

{ ename: "guangxi", name: "广西" },

{ ename: "gansu", name: "甘肃" },

{ ename: "jin", name: "山西" },

{ ename: "neimenggu", name: "内蒙古" },

{ ename: "shanxi", name: "陕西" },

{ ename: "jilin", name: "吉林" },

{ ename: "fujian", name: "福建" },

{ ename: "guizhou", name: "贵州" },

{ ename: "guangdong", name: "广东" },

{ ename: "qinghai", name: "青海" },

{ ename: "xizang", name: "西藏" },

{ ename: "sichuan", name: "四川" },

{ ename: "ningxia", name: "宁夏" },

{ ename: "hainan", name: "海南" },

{ ename: "taiwan", name: "台湾" },

{ ename: "xianggang", name: "香港" },

{ ename: "aomen", name: "澳门" },

],

});

onMounted(() => {

let dataList = state.dataList;

// 模拟数据，给dataList添加一个随机的value值for (let i = 0; i < dataList.length; i++) {

dataList[i].value = Math.floor(Math.random() * 1000 - 1);

}

var myChart = echarts.init(document.getElementById("main"));

// 注册中国地图 第一个参数为地图的名字，第二个参数为地图的json数据，第一个要和geo map一样

echarts.registerMap("china", jsonData);

// 配置项var option = {

tooltip: {

show: true,

trigger: "item",

alwaysShowContent: false,

backgroundColor: "#0C121C",

borderColor: "rgba(0, 0, 0, 0.16);",

hideDelay: 100,

triggerOn: "mousemove",

enterable: true,

formatter: "",

textStyle: {

color: "#DADADA",

fontSize: "12",

width: 20,

height: 30,

overflow: "break",

},

showDelay: 100,

},

visualMap: {

min: 0,

max: 1000,

text: ["高", "低"], //两端的文本

realtime: false,

calculable: true,

itemWidth: 20, //图形的宽度，即长条的宽度。

itemHeight: 90, //图形的高度，即长条的高度。

align: "auto", //指定组件中手柄和文字的摆放位置.可选值为：‘auto’ 自动决定。‘left’ 手柄和label在右。‘right’ 手柄和label在左。‘top’ 手柄和label在下。‘bottom’ 手柄和label在上。

left: "left", //组件离容器左侧的距离,‘left’, ‘center’, ‘right’,‘20%’

top: "60%", //组件离容器上侧的距离,‘top’, ‘middle’, ‘bottom’,‘20%’

right: "auto", //组件离容器右侧的距离,‘20%’

bottom: "auto", //组件离容器下侧的距离,‘20%’

orient: "vertical", //图例排列方向

inRange: {

color: ["#141c48", "#0d3d86"],

},

//设置字体颜色

textStyle: {

color: "#ffffff",

},

},

geo: {

map: "china",

roam: true, //是否开启平游或缩放

zoom: 0.9, //当前视角的缩放比例

emphasis: {

label: {

color: "#fff",

},

// 鼠标放上高亮样式

itemStyle: {

areaColor: "#389BB7",

borderWidth: 0,

},

},

label: {

// 通常状态下的样式

show: true,

color: "#fff",

// 鼠标放上去的样式

},

// 地图区域的样式设置

itemStyle: {

borderColor: "rgba(147, 235, 248, 1)",

borderWidth: 1,

areaColor: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.8,

colorStops: [

{

offset: 0,

color: "rgba(147, 235, 248, 0)", // 0% 处的颜色

},

{

offset: 1,

color: "rgba(147, 235, 248, .2)", // 100% 处的颜色

},

],

globalCoord: false,

},

shadowColor: "rgba(128, 217, 248, 1)",

shadowOffsetX: -2,

shadowOffsetY: 2,

shadowBlur: 10,

},

layoutCenter: ["50%", "50%"],

layoutSize: "100%",

},

// 鼠标悬浮提示框

series: [

{

name: "省份",

type: "map",

geoIndex: 0,

data: dataList,

},

],

};

//设置配置项

myChart.setOption(option);

// 点击事件地图 enmae为获取省地图的json数据

myChart.on("click", function (params) {

// console.log("