vue3.0+antdv的admin管理系统vue-admin-beautiful
Vue-admin-beautiful是github开源admin中最优秀的集成框架之一,它是国内首个基于vue3.0的开源admin项目,同时支持电脑,手机,平板,默认分支使用vue3.x+antdv（ant-design-vue）开发。免费开源admin项目，star高达5.9K+
原文链接：https://blog.csdn.net/yyz_1987/article/details/138924440
开源项目
前端：monitor-ui: vue ui
后台：后台
快速安装
下面介绍的是vue3.0-antdv分支(ant-design-vue)
克隆项目
git clone -b vue3.0-antdv https://github.com/chuzhixin/vue-admin-beautiful.git
进入项目目录
cd vue-admin-beautiful
安装依赖
#这个不更新npm镜像源的话会很慢
npm install
# 或者 安装依赖
npm i --registry=http://mirrors.cloud.tencent.com/npm/
# 本地开发 启动项目
npm run serve
# 演示地址
http://chu1204505056.gitee.io/vue-admin-beautiful
# 仓库地址
https://github.com/chuzhixin/vue-admin-beautiful
vue-element-admin完整项目实例
项目运行地址：https://panjiachen.github.io/vue-element-admin/#/login
项目地址：https://github.com/PanJiaChen/vue-element-admin
项目地址：（国际化）https://github.com/PanJiaChen/vue-element-admin/tree/i18n
项目介绍：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
正常流程执行运行
#入门指南
# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# enter the project directory
cd vue-element-admin
# install dependency
npm install
# develop
npm run dev
#This will automatically open http://localhost:9527
VUE3 显示Echarts百度地图
技术基础以及环境要求
vue3 + echarts + 百度地图API
要求1：
VUE3 环境搭建：https://blog.csdn.net/LQ_001/article/details/136293795
要求2：
VUE3 + echatrs 环境搭建:https://blog.csdn.net/LQ_001/article/details/136308234?spm=1001.2014.3001.5502
要求3：
百度地图API申请地址：https://lbsyun.baidu.com/apiconsole/authflow/authresult
VUE3实现地图
1 百度地图API
申请百度地图开发者成功以后，创建一个API。百度地图API创建过程参考这里:在vue3中如何使用百度地图API
2 VUE3代码配置项
首先，再文件 public\index.html 中，插入以下代码：
<head>
。。。
。。。
。。。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=API号码"></script>
<style type="text/css">.BMap_cpyCtrl {display: none;}</style>
<style type="text/css">.anchorBL{display:none;}</style>
</head>
其次，文件 src/main.js 中，添加以下代码引入地图包：
import 'echarts/extension/bmap/bmap';
3 VUE3 引入 echarts 地图代码
新建一个 VUE3 布局文件模板，VUE3 代码如下：
<template>
<div ref="myChart" id="mychart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'MyChart',
mounted() {
let myChart = echarts.init(this.$refs.myChart,'dark');
let option = {
};
myChart.setOption(option);
},
};
</script>
<style>
#mychart {
width: 500px;
height: 500px;
border: 4px solid #89a2f5;
}
</style>
在vue3中如何使用百度地图API（详细步骤+demo示例）
一、注册账号、申请成为开发者
1、打开百度地图开放平台,点击开放文档中的JavaScript API
2、.通过百度账号注册成为百度地图开放平台开发者，选择开发者类型（个人/企业），完成开发者认证即可
二、申请密钥AK
JavaScript API只支持浏览端的AK进行接入与访问，请开发者在申请AK时注意选择正确的AK类型
1.进入百度地图开放平台官网控制台，点击**【应用管理】-【我的应用】
2、点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问
3、为了防止您的AK被盗用，请您务必配置refer白名单，只有该白名单中的网站才能成功发起调用。如下方示例所示，配置了*.mysite.com*为域名白名单，即代表域名中包含.mysite.com的网站=才可以使用该AK访问JS API的服务
完成上边一系列工作就可以开始使用我们得接口文档啦！！
三、在vue3.0中使用百度地图API
注：本人使用的是setup函数，可以借鉴参考，也可以使用语法糖
1、首先在public文件夹下index.html中引入
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
2、在组件中进行使用
<template>
<div class="homebox">
<div class="head">
<img class="headimg" src="./images/2.png" alt="" />
<div class="icont">
<p class="p">{{ nowTime }}</p>
<h1 class="h1">智慧照明综合管理平台</h1>
<button class="btn" @click="goTab">控制台</button>
<button class="btn2">设置</button>
</div>
</div>
<-- 设置放置地图的ref -->
<div class="mapp" ref="baiduRef"></div>
<div class="content"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import axios from "axios";
import { onMounted, onUnmounted, ref, reactive, toRefs } from "vue";
export default {
setup() {
// 地图嵌入
const baiduRef = ref();
const map = ref();
const point = ref();
const marker = ref();
function initMap(lng = 116.405725, lat = 39.935362) {
map.value = new BMap.Map(baiduRef.value);//新建一个map地图实例
point.value = new BMap.Point(lng, lat);//创建点
// console.log(point.value, 858585);
marker.value = new BMap.Marker(point.value);//做标记
map.value.centerAndZoom(point.value, 15);
map.value.enableScrollWheelZoom(true); //滚轮缩放
map.value.addOverlay(marker.value);//在地图上显示标记点
// 样式id，设置样式的自定义
map.value.setMapStyleV2({
styleId: "1fb853a740649182c004c7f05e3f1ac7",
});
// 点击标注监听事件
marker.value.addEventListener("click", function (e) {
alert("您点击了标注");
console.log(e,888888888);
});
}
onMounted(() => {
initMap();
});
return {
baiduRef,
// map,
// point,
// marker
};
},
};
</script>
<style scoped>
.homebox {
width: 100%;
height: 100vh;
position: relative;
}
.head {
height: 100px;
background: #071f4d;
}
.headimg {
width: 100%;
height: 100%;
}
.mapp {
position: absolute;
width: 100%;
height: 100%;
top: 100px;
}
.content {
height: calc(100vh - 100px);
display: flex;
}
</style>
利用Echarts快捷绘图方案
介绍
ECharts 是一个强大的，基于 JavaScript 的开源数据可视化库，适用于创建多种类型的图表，满足广泛的业务需求。它由百度团队开发并维护，后来捐赠给了 Apache 软件基金会，并已在2021年从孵化项目毕业，成为Apache顶级项目。
echarts支持折线图、柱状图、散点图、饼图、K线图、盒须图、地图、热力图、线图、关系图、树状图、旭日图、平行坐标等多种图表，几乎覆盖所有常见的数据可视化需求。
可以再前端开发，手机APP，论文，组会各种可视化场景中使用到
比如：VUE3 显示Echarts百度地图，等各种应用。
echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
非常精彩的一个网站。
绘图指南
我这里就用他来开开组会绘图了，顺便记录一下平时的配置代码。需要用到的时，我就直接打开链接直接修改网页代码就行。
绘制柱状图
绘图地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category
代码：
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: { textStyle: { fontSize: 40 }},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
min:95,
max:100,
axisLabel: {fontSize: 20}
},
yAxis: {
type: 'category',
data: ['准确率', '特异性', '敏感度'],
axisLabel: {fontSize: 40}
},
series: [
{
name: '位置嵌入',
type: 'bar',
data: [97.24, 97.47, 97.12]
},
{
name: 'Patch嵌入',
type: 'bar',
data: [97.90, 98.12, 97.70]
},
{
name: '时间嵌入',
type: 'bar',
data: [97.94, 98.43, 97.63]
},
{
name: 'WPE嵌入',
type: 'bar',
data: [98.50, 99.07, 98.14]
}
]
};
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
