vite + vue3 —— vue地图大屏项目

重要// 这里是第一种方式，通过上级定义的ename获取数据// city.vue中是第二种方式，通过单独的js文件的键值对的key获取对应的json。-- echarts的容器 -->

勒布朗-前端

2061人浏览 · 2023-03-03 17:39:06

勒布朗-前端 · 2023-03-03 17:39:06 发布

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

项目开始时：

首先大屏需要自适应！要设置最大最小宽高！最大最小宽高要是用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>

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("😂👨🏾‍❤️‍👨🏼==>： ", params.data.ename, params.name); //===>打印后类似 xinjiang 新疆

router.push({

path: "/province",

query: { provinceName: params.data.ename, province: params.name },

});

// 缩放适应

window.addEventListener("resize", () => {

myChart.resize();

});

</script>

#main {

width: 100%;

height: 100%;

margin:-20px auto;

}

</style>

city.vue

敬请谅解，乡镇数据正在努力更新中...

</div><div :id="state.id" class="cityCharts"></div></template><script setup>

import * as echarts from "echarts";

import axios from "axios";import{ onMounted, reactive, ref } from "vue";// useRoute() 用于获取当前路由信息（路由实例对象） useRouter() 路由跳转对象import{ useRouter, useRoute } from "vue-router";

const router= useRouter();

const route= useRoute();// 引入定义的js，方便动态引入jsonimport{ cityMap } from "../../../public/public/city/china-main-city-map";

let state= reactive({ cityId: null,

id:"echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),

myChart: null,

option:{// 背景颜色// backgroundColor: "#0b1c3e", title:{ text:"",

top:"8%",

left:"8%",

textStyle:{ fontSize:14,

fontWeight:300,

color:"#fff",

// 提示浮窗样式 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:{//分段型视觉映射组件 show: true,

type:"piecewise",

left:50,

bottom:50,

showLabel: true,

itemWidth:10,

itemHeight:10,

inverse: true,

color:"#fff",

textStyle:{ color:"#ffffff",

// lt:小于; lte:小于等于; gt:大于; gte:大于等于; pieces: [

{ lt:5,

label:" < 5",

color:"#83CBAC",

{ gte:5,

lte:10,

label:"5 - 10",

color:"#55BB8A",

{ gt:10,

lte:15,

label:"10 - 15",

color:"#20A162",

{ gt:15,

lte:20,

label:"15 - 20",

color:"#9ABEFA",

{ gt:20,

lte:30,

label:"20 - 30",

color:"#78A9F9",

{ gt:30,

label:"> 30",

color:"#5693F7",

// 地图配置 geo:{ map:"",

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, // 缺省为 false},

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

shadowOffsetX:-2,

shadowOffsetY:2,

shadowBlur:10,

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

layoutSize:"100%",

series: [

{ name:"模拟数据",

type:"map",

geoIndex:0, // 不可缺少，否则无tooltip 指示效果 data: [{ name: "", value: ""}],

});

onMounted(async () => {// console.log(route.query);/* 接受来自province.vue的参数:

console.log(route.query); 打印后====》类似 {city: '哈密市'}*/

const city= route.query.city;// 设置地图标题

state.option.title.text=city;// 设置地图

state.option.geo.map=city;// 第二种方式通过js文件引入json

state.cityId = cityMap[city];// console.log(state.cityId);// 初始化echarts

state.myChart= echarts.init(document.getElementById(state.id));

if (state.cityId === undefined) return;

await axios.get(`/public/city/${state.cityId}.json`).then((res) => {// console.log('\😂👨🏾‍❤️‍👨🏼==>： ',res);// 地图注册，第一个参数的名字必须和option.geo.map一致，第二个参数是地图json数据

echarts.registerMap(city, res.data);

res.data.features.forEach((item) => {// console.log(item);// series是数组里面data是一个对象，所以要用series[0].data.push

state.option.series[0].data.push({ name: item.properties.name,

value: Math.floor(Math.random() * 100),

});});

state.myChart.setOption(state.option);});// state.myChart.on("click", function (params) {// console.log("😂👨🏾‍❤️‍👨🏼==>： ", params);// });// 自适应

window.addEventListener("resize", () => {

myChart.resize();});});</script><style>

.cityCharts{ width:100%; height:100%; margin:0auto;}

.tip{

text-align: center;

margin-top: .375rem; color:#fff;

font-size: .1875rem;}</style>

home.vue

// 方便看清文字，可删除

div {

text-align: center;

font-size: 0.375rem;

}

.content-wrap {

width: 100%;

height: 100%;

// 最大最小宽/高不能转rem

min-width: 1536px;

min-height: 702px;

margin: 0 auto;

padding: 00.125rem0.125rem0.125rem;

background-color: pink;

header {

width: 100%;

height: 1.25rem;

background-color: tomato;

}

.content-main {

display: flex;

justify-content: space-between;

height: calc(100% - 1.25rem);

width: 100%;

.left,

.right {

display: flex;

flex-direction: column;

flex: 3;

height: 100%;

div {

flex: 1;

border: 0.0125rem solid #1bb4f9;

box-shadow: #1bb4f90rem0rem0.0625rem0.0125rem inset;

background-color: rgb(255, 191, 0);

&:nth-child(2) {

margin: 0.125rem0;

}

.center-map-wrap {

position: relative;

overflow: hidden;

flex: 5;

margin: 00.125rem;

background: url("image/home/bg.jpg") no-repeat center center;

img {

position: absolute;

}

.map {

animation: run1 50s infinite linear;

width: 6.25rem;

height: 6.25rem;

top: 1.525rem;

left: 2.5625rem;

}

.link {

width: 7.5rem;

height: 7.5rem;

animation: run 45s infinite linear;

transform-origin: center center;

z-index: 5;

top: 1.025rem;

left: 1.9375rem;

}

@keyframes run {

from {

transform: rotate(360deg);

}

to {

transform: rotate(-360deg);

}

@keyframes run1 {

from {

transform: rotate(-360deg);

}

to {

transform: rotate(360deg);

}

.map-main {

position: relative;

z-index: 10;

width: 100%;

height: 100%;

}

</style>

province.vue

import * as echarts from "echarts";

const router= useRouter();

const route= useRoute();// 定义echarts的数据

let state= reactive({ id:"echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),

myChart: null,

option:{// 背景颜色// backgroundColor: "#0b1938", title:{ text:"",

top:"8%",

left:"8%",

textStyle:{ fontSize:14,

fontWeight:300,

color:"#fff",

// 提示浮窗样式 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:{//分段型视觉映射组件 show: true,

type:"piecewise",

left:50,

bottom:50,

showLabel: true,

itemWidth:10,

itemHeight:10,

inverse: true,

//设置字体颜色 textStyle:{ color:"#ffffff",

// 图例// lt:小于; lte:小于等于; gt:大于; gte:大于等于; pieces: [

{ lt:5,

label:" < 5",

color:"#83CBAC",

{ gte:5,

lte:10,

label:"5 - 10",

color:"#55BB8A",

{ gt:10,

lte:15,

label:"10 - 15",

color:"#20A162",

{ gt:15,

lte:20,

label:"15 - 20",

color:"#9ABEFA",

{ gt:20,

lte:30,

label:"20 - 30",

color:"#78A9F9",

{ gt:30,

label:"> 30",

color:"#5693F7",

// 地图配置 geo:{ map:"", //会从点击的省份的ename中获取 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, // 不可缺少，否则无tooltip 指示效果 data: [{ name: "", value: ""}],

});

onMounted(async () => {/* 接受来自china.vue的参数:

console.log(route.query); 打印后====》 { "provinceName": "xinjiang", "province": "新疆" } */

const provinceName= route.query.provinceName;

const province= route.query.province;// 设置地图标题

state.option.title.text=province;// 设置地图

state.option.geo.map=province;// 初始化echarts

state.myChart= echarts.init(document.getElementById(state.id));// 根据china.vue点击的省份，传过来的名称（china定义的ename）获取数据（不同json）！！！重要// 这里是第一种方式，通过上级定义的ename获取数据// city.vue中是第二种方式，通过单独的js文件的键值对的key获取对应的json

await axios.get(`/public/province/${provinceName}.json`).then((res) => {/*

地图注册第一个参数是地图名称，第二个参数是地图json数据，第一参数要和goe.map的值一样

（这里注册的地图和goe.map 是接受china点击的ename 都是动态赋值）

echarts.registerMap(province, res.data);// 模拟数据 series

res.data.features.forEach((item) => {// series是数组里面data是一个对象，所以要用series[0].data.push

state.option.series[0].data.push({ name: item.properties.name,

value: Math.round(Math.random() * 100),

});});// 将定义的数据设置进myChart （myChary 是初始化echarts）

state.myChart.setOption(state.option);});// 点击市数据跳转到区县数据

state.myChart.on("click", (params) => {

router.push({ path:"/city",

query:{ city: params.name },

});});// echarts适应屏幕大小

window.addEventListener("resize", () => {

myChart.resize();});});</script><style scoped>

.provinceCharts{ width:100%; height:100%; margin:0auto;}</style>

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...