Vue仅记录

我就是我是好孩子啊

于 2024-05-22 17:06:45 发布

阅读量346

点赞数 4

文章标签： vue.js 前端 javascript

from zhangxia

本文链接：https://blog.csdn.net/weixin_41442949/article/details/139124299

版权

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
评论
Vue仅记录

绘图地址：https://echarts.apache.org/examples/zh/editor.html?项目地址：（国际化）https://github.com/PanJiaChen/vue-element-admin/tree/i18n。项目介绍：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/项目运行地址：https://panjiachen.github.io/vue-element-admin/#/login。
复制链接

扫一扫