Vue仅记录

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]
    }
  ]
};
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值