devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vite + vue3 —— vue地图大屏项目_vue大屏展示项目实例

作者：weixin_40725706 | 2024-04-16 19:07:44

赞

踩

vue大屏展示项目实例

5f22ff66e0214611a1d87a3ebf9fc5a3.gif

0fa5c6911cad4848ba37167e5017793e.gif

9a69fede8b2044a79dd834e3e48f20b4.png​回顾  前期  ​       

前端利器 —— 提升《500倍开发效率》 传一张设计稿，点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点，那么我觉得就是它会，让你cv大法都没处使！！！比如：公司让你写一个小程序、或h5web页面、UI给了你30张UI图，说让你自己切图，你当时就准备拍案而起，拳棒相加，但突然想起来她好像是你老婆，所以 你忍了！你进入到网站，这个时候犹如战神附体，几秒钟搞定一张设计稿（包括透明图），祝大家2022 越来越强。https://blog.csdn.net/m0_57904695/article/details/126976940

 

ddefaa04c4c3467aad413d82e341b461.png

 677e4ccf77274dd2989107d129f7bf3f.png

a6f96990ec65498cb672f2f1de61669f.gif

9c204ad790ca473eb277c1e34832686a.gif

目录

项目开始时： 

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

一：安装

二：根据设计稿修改配置 

 三：在main引入

四：cssrem插件

cssrem插件配置

 五：页面使用

​

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

配置最小最大宽高 

 下面写入地图

china.vue

 city.vue

home.vue

province.vue

项目开始时： 

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

念及此！项目开始

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

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

一：安装

cnpm i -S lib-flexible

二：根据设计稿修改配置 

4149afd573ff4c549438f90ea72b6b6c.png

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

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

  1.         // 修改原始的
  2.         // if (width / dpr > 540) {
  3.         //     width = 540 * dpr;
  4.         // }
  5.         // var rem = width / 10;
  6. --------------------------------------------------
  7.         // 修改成为
  8.           // 最小400px，最大适配2560px
  9.         if (width / dpr < 400) {
  10.             width = 400 * dpr;
  11.         } else if (width / dpr > 2560) {
  12.             width = 2560 * dpr;
  13.         }
  14.         // 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用
  15.         var rem = width / 24;

1fa13f5fe81e41e8b30f150fa2ebc823.png

 三：在main引入

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. // 引用
  6. import 'lib-flexible/flexible.js'
  7.  
  8. 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即可

 fe9796bcbb324ae7a1e0c5c75d22e8f9.png

 五：页面使用

9aa0b804ad5b44409be17d022b30cae5.png

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

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

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

f3e15a100e9940a384fdcd4a474c70bf.png

 配置完成！！！

配置最小最大宽高 

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

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

b905c75048d14445bda5ad69b8f42de4.png

 记录此时到宽高和font-size

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

d8be8deb798a45969c3433eeca0fef3c.png

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

 2dcc0eacc3954d76bcd66ba4e86dc985.png

 下面写入地图

                 20080d3fa92b4db69cab189f9c81dd2c.gif                                 

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

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

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

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

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

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

e5d0bf23b81f494796149b75024db9f5.png

 路由如下

b257faf2b794460b8403ae14e335f8c0.png

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

222f02f9d57349c58ea53b417de98c1d.png

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

china.vue

  1. <template>
  2.   <!-- 中国地图 省级 一级页面 -->
  3.   <div id="main"></div>
  4. </template>
  5.  
  6. <script setup>
  7. import * as echarts from "echarts";
  8. import jsonData from "../../../public/china.json";
  9. import { onMounted, reactive } from "vue";
  10. import { useRouter } from "vue-router";
  11. const router = useRouter();
  12.  
  13. let state = reactive({
  14.   // ename为了获取省份的名字
  15.   dataList: [
  16.     { ename: "nanhaizhudao", name: "南海诸岛" },
  17.     { ename: "beijing", name: "北京" },
  18.     { ename: "tianjin", name: "天津" },
  19.     { ename: "shanghai", name: "上海" },
  20.     { ename: "chongqing", name: "重庆" },
  21.     { ename: "hebei", name: "河北" },
  22.     { ename: "henan", name: "河南" },
  23.     { ename: "yunnan", name: "云南" },
  24.     { ename: "liaoning", name: "辽宁" },
  25.     { ename: "heilongjiang", name: "黑龙江" },
  26.     { ename: "hunan", name: "湖南" },
  27.     { ename: "anhui", name: "安徽" },
  28.     { ename: "shandong", name: "山东" },
  29.     { ename: "xinjiang", name: "新疆" },
  30.     { ename: "jiangsu", name: "江苏" },
  31.     { ename: "zhejiang", name: "浙江" },
  32.     { ename: "jiangxi", name: "江西" },
  33.     { ename: "hubei", name: "湖北" },
  34.     { ename: "guangxi", name: "广西" },
  35.     { ename: "gansu", name: "甘肃" },
  36.     { ename: "jin", name: "山西" },
  37.     { ename: "neimenggu", name: "内蒙古" },
  38.     { ename: "shanxi", name: "陕西" },
  39.     { ename: "jilin", name: "吉林" },
  40.     { ename: "fujian", name: "福建" },
  41.     { ename: "guizhou", name: "贵州" },
  42.     { ename: "guangdong", name: "广东" },
  43.     { ename: "qinghai", name: "青海" },
  44.     { ename: "xizang", name: "西藏" },
  45.     { ename: "sichuan", name: "四川" },
  46.     { ename: "ningxia", name: "宁夏" },
  47.     { ename: "hainan", name: "海南" },
  48.     { ename: "taiwan", name: "台湾" },
  49.     { ename: "xianggang", name: "香港" },
  50.     { ename: "aomen", name: "澳门" },
  51.   ],
  52. });
  53.  
  54. onMounted(() => {
  55.   let dataList = state.dataList;
  56.   // 模拟数据，给dataList添加一个随机的value值
  57.   for (let i = 0; i < dataList.length; i++) {
  58.     dataList[i].value = Math.floor(Math.random() * 1000 - 1);
  59.   }
  60.   var myChart = echarts.init(document.getElementById("main"));
  61.   // 注册中国地图 第一个参数为地图的名字，第二个参数为地图的json数据，第一个要和geo map一样
  62.   echarts.registerMap("china", jsonData);
  63.   // 配置项
  64.   var option = {
  65.     tooltip: {
  66.       show: true,
  67.       trigger: "item",
  68.       alwaysShowContent: false,
  69.       backgroundColor: "#0C121C",
  70.       borderColor: "rgba(0, 0, 0, 0.16);",
  71.       hideDelay: 100,
  72.       triggerOn: "mousemove",
  73.       enterable: true,
  74.       formatter: "",
  75.       textStyle: {
  76.         color: "#DADADA",
  77.         fontSize: "12",
  78.         width: 20,
  79.         height: 30,
  80.         overflow: "break",
  81.       },
  82.       showDelay: 100,
  83.     },
  84.  
  85.     visualMap: {
  86.       min: 0,
  87.       max: 1000,
  88.       text: ["高", "低"], //两端的文本
  89.       realtime: false,
  90.       calculable: true,
  91.       itemWidth: 20, //图形的宽度，即长条的宽度。
  92.       itemHeight: 90, //图形的高度，即长条的高度。
  93.       align: "auto", //指定组件中手柄和文字的摆放位置.可选值为：‘auto’ 自动决定。‘left’ 手柄和label在右。‘right’ 手柄和label在左。‘top’ 手柄和label在下。‘bottom’ 手柄和label在上。
  94.       left: "left", //组件离容器左侧的距离,‘left’, ‘center’, ‘right’,‘20%’
  95.       top: "60%", //组件离容器上侧的距离,‘top’, ‘middle’, ‘bottom’,‘20%’
  96.       right: "auto", //组件离容器右侧的距离,‘20%’
  97.       bottom: "auto", //组件离容器下侧的距离,‘20%’
  98.       orient: "vertical", //图例排列方向
  99.       inRange: {
  100.         color: ["#141c48", "#0d3d86"],
  101.       },
  102.       //设置字体颜色
  103.       textStyle: {
  104.         color: "#ffffff",
  105.       },
  106.     },
  107.     geo: {
  108.       map: "china",
  109.       roam: true, //是否开启平游或缩放
  110.       zoom: 0.9, //当前视角的缩放比例
  111.       emphasis: {
  112.         label: {
  113.           color: "#fff",
  114.         },
  115.         // 鼠标放上高亮样式
  116.         itemStyle: {
  117.           areaColor: "#389BB7",
  118.           borderWidth: 0,
  119.         },
  120.       },
  121.       label: {
  122.         // 通常状态下的样式
  123.         show: true,
  124.         color: "#fff",
  125.         // 鼠标放上去的样式
  126.       },
  127.       // 地图区域的样式设置
  128.       itemStyle: {
  129.         borderColor: "rgba(147, 235, 248, 1)",
  130.         borderWidth: 1,
  131.         areaColor: {
  132.           type: "radial",
  133.           x: 0.5,
  134.           y: 0.5,
  135.           r: 0.8,
  136.           colorStops: [
  137.             {
  138.               offset: 0,
  139.               color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
  140.             },
  141.             {
  142.               offset: 1,
  143.               color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
  144.             },
  145.           ],
  146.           globalCoord: false,
  147.         },
  148.         shadowColor: "rgba(128, 217, 248, 1)",
  149.         shadowOffsetX: -2,
  150.         shadowOffsetY: 2,
  151.         shadowBlur: 10,
  152.       },
  153.       layoutCenter: ["50%", "50%"],
  154.       layoutSize: "100%",
  155.     },
  156.     // 鼠标悬浮提示框
  157.     series: [
  158.       {
  159.         name: "省份",
  160.         type: "map",
  161.         geoIndex: 0,
  162.         data: dataList,
  163.       },
  164.     ],
  165.   };
  166.   //设置配置项
  167.   myChart.setOption(option);
  168.   // 点击事件地图 enmae为获取省地图的json数据
  169.   myChart.on("click", function (params) {
  170.     // console.log("
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/435948
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。