手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS

技术栈springboot3+hutool-all+oshi-core+Vue3+vite+TinyVue+Echarts+TailwindCSS
软件版本
IDEAIntelliJ IDEA 2022.2.1
JDK17
Spring Boot3.1
hutool-all5.8.18
oshi-core6.4.1
Vue35.0.10
vite5.0.10
axios1.6.7
echarts5.4.3

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

TinyVue 是一个基于 Vue 的 UI 组件库,可以同时支持 Vue 2.0 和 Vue 3.0。

浏览器兼容性 TinyVue 支持主流浏览器的最新版本:Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器

搭建 Vite 项目

创建 Vite 工程

yarn create vite
# 或
npm init vite@latest

Vite 工程之后进入到工程目录,下载依赖和启动工程

yarn
# 或
npm install

启动项目

yarn dev
# 或
npm run dev

Vue安装使用 TinyVue 组件

yarn add @opentiny/vue@3
#或
npm install @opentiny/vue@3

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],define: {'process.env': { ...process.env }}
})

添加components

<template><div><tiny-gridref="basicGridRef"seq-serial:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }":data="tableData"><tiny-grid-column type="index" width="60"></tiny-grid-column><tiny-grid-column type="selection" width="50"></tiny-grid-column><tiny-grid-columnfield="name"show-overflowtitle="名称":editor="{ component: 'input', autoselect: true }"></tiny-grid-column><tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column><tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column><tiny-grid-columnfield="introduction"title="公司简介":editor="{ component: 'input', autoselect: true }"show-overflow></tiny-grid-column></tiny-grid><tiny-pager:current-page="custPager.currentPage":page-size="custPager.pageSize":total="custPager.total":page-sizes="[5, 10, 20, 50]"@current-change="currentChange"@size-change="sizeChange"layout="total, prev, pager, next, jumper, sizes"></tiny-pager></div>
</template><script setup>
import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager as TinyPager } from '@opentiny/vue'const custPager = ref({currentPage: 1,pageSize: 5,total: 0
})
const tableData = ref([])
const mockData = ref([{id: '1',name: 'GFD科技YX公司',userId: 421000103624183,area: '华东区',province: '福建省',city: '福州',contact: '许生',telephone: '1234567890',address: '福州',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 800,createdDate: '2014-04-30 00:56:00',boole: false,assets: '1000000',rate: 0.9},{id: '2',name: 'WWW科技YX公司',userId: 421000103624183,area: '华南区',province: '广东省',city: '深圳',contact: '朱生',telephone: '1234567890',address: '深圳福田区',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 300,createdDate: '2016-07-08 12:36:22',boole: true,assets: '1500000',rate: 0.7},{id: '3',name: 'RFV有限责任公司',userId: 441047913162396,area: '华南区',province: '广东省',city: '中山',contact: '秦生',telephone: '1234567890',address: '中山市',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 1300,createdDate: '2014-02-14 14:14:14',boole: false,assets: '1500000',rate: 0.6},{id: '4',name: 'TGB科技YX公司',userId: 702973890055088,area: '华东区',province: '福建省',city: '龙岩',contact: '周生',telephone: '1234567890',address: '龙岩',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 360,createdDate: '2013-01-13 13:13:13',boole: true,assets: '1200000',rate: 0.5},{id: '5',name: 'YHN科技YX公司',userId: 702973890055088,area: '华南区',province: '广东省',city: '韶关',contact: '郑生',telephone: '1234567890',address: '韶关',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 810,createdDate: '2012-12-12 12:12:12',boole: true,assets: '1500000',rate: 0.6},{id: '6',name: 'WSX科技YX公司',userId: 441047913162396,area: '华中区',province: '湖北省',city: '黄冈',contact: '陈生',telephone: '1234567890',address: '黄冈',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 800,createdDate: '2011-11-11 11:11:11',boole: true,assets: '1500000',rate: 0.6},{id: '7',name: 'KBG物业YX公司',userId: 421000103624183,area: '华中区',province: '湖北省',city: '赤壁',contact: '王二',telephone: '1234567890',address: '赤壁',introduction:'公司治理结构严格按现代企业制度设计,管理机构设置合理,制度完善,各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的80%以上,具有雄厚的资金实力和高度专业化的项目开发管理能力,是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',employees: 400,createdDate: '2016-04-30 23:56:00',boole: false,assets: '2000000',rate: 0.7},{id: '8',name: '深圳市福德宝网络技术YX公司',userId: 421000103624183,address: '厦门岛内',area: '华东区',assets: '2000000',boole: true,city: '厦门',contact: '李四',createdDate: '2016-06-03 13:53:25',employees: 540,introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',province: '福建省',rate: 0.6,telephone: '1234567890'},{id: '9',name: 'UJM有限责任公司',userId: 421000103624183,area: '华南区',province: '广西省',city: '南宁',contact: '段生',telephone: '1234567890',address: '南宁',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 750,createdDate: '2014-04-21 11:56:00',boole: true,assets: '1500000',rate: 0.6},{id: '10',name: 'IKA有限责任公司',userId: 421000103624183,area: '华南区',province: '广西省',city: '北海',contact: '谭生',telephone: '1234567890',address: '北海',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 400,createdDate: '2014-09-30 00:56:00',boole: false,assets: '110000',rate: 0.11},{id: '11',name: 'TIG管理YX公司',userId: 421000103624183,area: '华南区',province: '广西省',city: '桂林',contact: '陈生',telephone: '1234567890',address: '桂林',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 900,createdDate: '2014-11-30 00:56:00',boole: true,assets: '120000',rate: 0.13},{id: '12',name: 'GGT科技YX公司',userId: 441047913162396,area: '西南区',province: '云南省',city: '昆明',contact: '周生',telephone: '1234567890',address: '昆明',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 500,createdDate: '2014-03-20 02:50:00',boole: false,assets: '100000',rate: 0.1},{id: '13',name: 'YYSYX公司',userId: 441047913162396,area: '西南区',province: '云南省',city: '西双版纳',contact: '廖生',telephone: '1234567890',address: '西双版纳',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 985,createdDate: '2015-07-28 11:37:00',boole: true,assets: '120000',rate: 0.12},{id: '14',name: 'VBN有限责任公司',userId: 421000103624183,area: '西南区',province: '云南省',city: '大理',contact: '欧生',telephone: '1234567890',address: '大理',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 598,createdDate: '2014-04-30 00:56:00',boole: false,assets: '220000',rate: 0.22},{id: '15',name: '深圳万众科技YX公司',userId: 441047913162396,area: '华中区',province: '湖北省',city: '武汉',contact: '阮生',telephone: '1234567890',address: '武汉',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 725,createdDate: '2014-04-30 00:56:00',boole: true,assets: '2500000',rate: 0.8},{id: '16',name: '深圳云创信息技术YX公司',userId: 421000103624183,area: '华中区',province: '湖北省',city: '十堰',contact: '邓生',telephone: '1234567890',address: '十堰',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 632,createdDate: '2014-07-30 02:44:00',boole: true,assets: '3000000',rate: 0.85},{id: '17',name: '深圳明乐餐饮管理YX公司',userId: 441047913162396,area: '华中区',province: '湖北省',city: '潜江',contact: '罗生',telephone: '1234567890',address: '潜江',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 246,createdDate: '2013-04-30 00:56:00',boole: false,assets: '2000000',rate: 0.7},{id: '18',name: '珠海忆兰居科技YX公司',userId: 441047913162396,area: '华南区',province: '广东省',city: '珠海',contact: '黄生',telephone: '1234567890',address: '珠海香洲区',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 592,createdDate: '2014-05-30 01:00:00',boole: false,assets: '1800000',rate: 0.66},{id: '19',name: '珠海万家医疗科技YX公司',userId: 441047913162396,area: '华南区',province: '广东省',city: '广州',contact: '刘生',telephone: '1234567890',address: '广州天河区',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 851,createdDate: '2014-04-29 08:56:00',boole: false,assets: '100000',rate: 0.1},{id: '20',name: '东莞亿聚礼品YX公司',userId: 421000103624183,area: '华中区',province: '湖北省',city: '襄阳',contact: '范生',telephone: '1234567890',address: '襄阳',introduction: '公司技术和研发实力雄厚,是国家863项目的参与者,并被政府认定为“高新技术企业”。',employees: 394,createdDate: '2014-04-28 10:56:00',boole: true,assets: '400000',rate: 0.4}
])fetchData()function currentChange(current) {custPager.value.currentPage = currentfetchData()
}function sizeChange(size) {custPager.value.pageSize = sizefetchData()
}function fetchData() {getData({ page: custPager.value }).then(({ result, page }) => {tableData.value = resultcustPager.value.total = page.totalRows})
}function getData({ page }) {return new Promise((resolve) => {// 此处为用户自定义的服务端分页,排序,过滤服务setTimeout(() => {const startIndex = (page.currentPage - 1) * page.pageSizeconst allData = mockData.valueconst data = {result: allData.slice(startIndex, startIndex + page.pageSize),page: Object.assign({}, page, { totalRows: allData.length })}resolve({ result: data.result, page: data.page })}, 500)})
}
</script>

App.vue 文件
引入pagedemo.vue

import pagedemo from './components/pagedemo.vue'使用
<pagedemo/>

效果

案例内存使用率水滴球

TinyVue+echarts

实现内存使用率水滴球,并设置通知阈值弹窗

效果

代码

<template><div style="text-align:center">内存使用率</div><div ref="target" class="w-full h-full hover:border-lime-200 hover:border-2"></div>
</template><script setup>
import { Button as TinyButton, Notify } from '@opentiny/vue'import { ref ,onMounted ,watch } from 'vue'
import * as echarts from 'echarts'
import "echarts-liquidfill";//需安装 cnpm i echarts-liquidfill
const props = defineProps({MemoryData: {type: Object,required: true}
})var value = 0.54;
// console.log(props.MemoryData)
console.log(props.MemoryData.data.usageRate)
let hChart = null;
//1、初始化echarts实例
const target = ref(null)
onMounted(() => {hChart=echarts.init(target.value)renderChart()
})
//监听器
watch(()=> props.MemoryData,() => {renderChart()if (props.MemoryData.data.usageRate >= 80) {baseClick80()} if (props.MemoryData.data.usageRate >= 95) {baseClick95()}})//2、构建option配置对象
const renderChart = () => {const options ={name: "CPU使用率",// backgroundColor: "#000", //背景色title: {text: props.MemoryData.data.usageRate + "%",textStyle: {fontSize: 20,fontFamily: "Microsoft Yahei",fontWeight: "normal",color: "#fff",},x: "center",y: "48%",},series: [{type: "liquidFill", //配置echarts图类型radius: "60%",center: ["50%", "50%"],//  shape: 'roundRect',// 设置水球图类型(矩形[rect],菱形[diamond],三角形[triangle],水滴状[pin],箭头[arrow]...) 默认为圆形data: [0.5, 0.5],  //设置波浪的值 //waveAnimation:false, //静止的波浪backgroundStyle: {borderWidth: 1,color: "transparent",//水球图内部背景色},outline: { borderDistance: 10, itemStyle: {borderWidth: 4,borderColor: "#5acef2",},},color: [ //波浪颜色{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "rgba(6, 187, 112, 0.3)", //下},{                                    offset: 0,color: "rgba(11, 201, 199, 0.3)",},],globalCoord: false,},{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "rgba(6, 187, 112, 1)", //下},{offset: 0,color: "rgba(11, 201, 199, 1)",},],globalCoord: false,},],label: {normal: {formatter: "",},},},],};
//3、通过 实例.setOptions(option)hChart.setOption(options)
}function baseClick80() {Notify({type: 'info',title: '信息',message: '内存使用率大于80',position: 'bottom-right',duration: 5000,})
}function baseClick95() {Notify({type: 'warning',title: '警告',message: '内存使用率大于95',position: 'bottom-right',duration: 5000,})
}</script>
<style>
</style>

notify基本用法

<template>
  <div class="content">
    <tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
  </div>
</template>

<script lang="jsx">
import { Notify, Button } from '@opentiny/vue'

export default {
  components: {
    TinyButton: Button
  },
  methods: {
    handleClick() {
      Notify({
        type: 'info',
        title: (h, params) => <h4>通知消息的标题</h4>,
        message: '通知消息的正文,通知消息的正文,通知消息的正文,通知消息的正文,通知消息的正文,通知消息的正文',
        position: 'top-right',
        duration: 5000,
        customClass: 'my-custom-cls'
      })
    }
  }
}
</script>

API

名称类型默认值说明
closeIconComponentIconClose关闭图标组件对象
customClassstring--自定义样式类
debounceDelaynumber0启用防抖
durationnumber4500自动关闭延时毫秒数
messageINotifyMessage--通知消息文本,可用 jsx 定制
position'top-right' | 'bottom-right''bottom-right'通知显示位置
showClosebooleanTRUE是否显示关闭按钮
showIconbooleanTRUE是否显示类型图标
statusIconComponentIconInfoSolid类型图标组件对象
titleINotifyTitle--通知消息标题,可用 jsx 定制
type'info' | 'success' | 'warning' | 'error''info'通知消息类型
verticalOffsetnumber | string16设置垂直方向偏离距离,单位 px

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/696934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速搭建ARM64实验平台(QEMU虚拟机+Debian)

文章目录 前言一、实验平台介绍二、安装步骤2.1 安装工具2.2 下载仓库2.3 编译内核并制作根文件系统2.4 运行刚才编译好的ARM64版本的Debian系统2.5 在线安装软件包2.6 在QEMU虚拟机和主机之间共享文件 三、单步调试ARM64 Linux内核参考资料 前言 最近翻阅笨叔的《奔跑吧Linux…

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd&#xff0c; mysql&#xff0c;redis&#xff0c;建议采用docker安装。 MySQL安装好之后&#xff0c;新建数据库dsms_admin&#xff0c;并新建表sys_user&#…

【Git】 删除远程分支

Git 删除远程分支有以下几种方法 服务端UI工具 Git 的服务端图形化工具主要是 web 端。常用的有 GitHub、Gitea、Gutlab 等。 这些工具都提供了分支管理&#xff0c;可以直接在各服务端找到相关功能&#xff0c;谨慎删除。 客户端UI工具 Git 拥有诸多客户端 UI 工具&#x…

详细分析Python中的unittest测试框架

目录 1. 基本知识2. API2.1 断言2.2 setUp() 和 tearDown() 3. Demo 1. 基本知识 unittest 是 Python 标准库中的一个单元测试框架&#xff0c;用于编写和执行测试用例以验证代码的正确性 提供了一种结构化的方法来编写测试&#xff0c;使得测试代码更加模块化和易于维护 以…

【ACW 服务端】页面操作Java增删改查代码生成

版本: 1.2.2-JDK17-SNAPSHOT 项目地址&#xff1a;wu-smart-acw 演示地址&#xff1a;演示地址 admin/admin Java增删改查代码生成 找到对应菜单 选择你需要的数据实例 选择数据库 选择数据库表 选择客户端&#xff08;如果是本地ACW服务代码启动默认注册上的客户端ID是…

腾讯云主机Ubuntu22.04安装Odoo17

一、安装PostgreSQL16 参见之前的文章 Ubuntu22.04安装PostgreSQL-CSDN博客 二、安装Odoo17 本方案使用的nightly版的odoo&#xff0c;安装的都是最新版odoo wget -O - https://nightly.odoo.com/odoo.key | apt-key add - echo "deb http://nightly.odoo.com/17.0/n…

Maven【1】(命令行操作)

文章目录 一丶创建maven工程二、理解pom.xml三、maven的构建命令1.编译操作2.清理操作3.测试操作4.打包操作5.安装操作 一丶创建maven工程 首先创建这样一个目录&#xff0c;然后从命令行里进入这个目录&#xff1a; 然后接下来就在这个命令行里进行操作了。 这个命令是&…

Python学习笔记——PySide6设计GUI应用之UI与逻辑分离

1、打开PySide6的UI设计工具pyside6-designer&#xff0c;设计一个主窗口&#xff0c;保存文件名为testwindow.ui 2、使用PySide6的RCC工具把testwindow.ui文件转换为testwindow_rc.py文件&#xff0c;此文件中有一个类Ui_MainWindow&#xff08;包含各种控件对象&#xff09;…

设计模式浅析(八) ·外观模式

设计模式浅析(八) 外观模式 日常叨逼叨 java设计模式浅析&#xff0c;如果觉得对你有帮助&#xff0c;记得一键三连&#xff0c;谢谢各位观众老爷&#x1f601;&#x1f601; 外观模式 概念 外观模式&#xff08;Facade Pattern&#xff09;是一种设计模式&#xff0c;它为…

深度学习发展里程碑事件2006-2024

2006-2024年&#xff0c;深度学习发展经历众多的里程碑事件&#xff0c;一次次地刺激着人们的神经&#xff0c;带来巨大的兴奋。电影还在继续&#xff0c;好戏在后面&#xff0c;期待…… 2006年 深度信念网络&#xff08;DBNs&#xff09;&#xff1a;Geoffrey Hinton与他的学…

备战蓝桥杯 Day10(背包dp)

01背包问题 1267&#xff1a;【例9.11】01背包问题 【题目描述】 一个旅行者有一个最多能装 M&#xfffd; 公斤的背包&#xff0c;现在有 n&#xfffd; 件物品&#xff0c;它们的重量分别是W1&#xff0c;W2&#xff0c;...,Wn&#xfffd;1&#xff0c;&#xfffd;2&#…

蓝桥杯刷题--python-10(2023填空题3)

0工作时长 - 蓝桥云课 (lanqiao.cn) import datetime time_str_list=[] while(True):tmp=input()if not tmp: breaktime_str_list.append(tmp)# time_list=[datetime.datetime.strptime(t,"%Y-%m-%d %H:%M:%S")for t in time_str_list] time_list.sort() sum=0 for i…

【代码随想录算法训练营Day25】● 216.组合总和III ● 17.电话号码的字母组合

文章目录 Day 25 第七章 回溯算法part02216.组合总和III自己的思路&#xff08;✅通过&#xff09; 17.电话号码的字母组合思路代码 Day 25 第七章 回溯算法part02 今日内容&#xff1a; ● 216.组合总和III● 17.电话号码的字母组合 216.组合总和III 如果把 组合问题理解了…

计算机组成原理(9)----硬布线控制器

控制单元CU若想发出对应的控制信号&#xff0c;则需要以下信息&#xff1a;指令操作码&#xff0c;目前的机器周期&#xff0c;节拍信号&#xff0c;机器状态条件&#xff0c;根据这些信息&#xff0c;CU就能确定在这个节拍下应该发出哪些"微命令"&#xff0c;也就是…

SQL注入:使用预编译防御SQL注入时产生的问题

目录 前言 模拟预编译 真正的预编译 预编译中存在的SQL注入 宽字节 没有进行参数绑定 无法预编译的位置 前言 相信学习过SQL注入的小伙伴都知道防御SQL注入最好的方法&#xff0c;就是使用预编译也就是PDO是可以非常好的防御SQL注入的&#xff0c;但是如果错误的设置了…

计算机设计大赛 深度学习动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

从零学算法238

238.给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复…

Python自动化UI测试之Selenium基础实操

1. Selenium简介 Selenium 是一个用于 Web 应用程序测试的工具。最初是为网站自动化测试而开发的&#xff0c;可以直接运行在浏览器上&#xff0c;支持的浏览器包括 IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Googl…

SVN忽略已提交的文件(ignore,移出版本控制)

本文适用于已安装TortoiseSVN客户端的同学。 1、右键点击要忽略的文件夹或文件&#xff0c;鼠标移到“TortoiseSVN”&#xff0c;找到“Unversion and add to ignore list”&#xff0c;选择文件夹&#xff0c;弹出提示框确认忽略。 2、设置完忽略文件后&#xff0c;还需要做…

多维时序 | Matlab实现GRU-MATT门控循环单元融合多头注意力多变量时间序列预测模型

多维时序 | Matlab实现GRU-MATT门控循环单元融合多头注意力多变量时间序列预测模型 目录 多维时序 | Matlab实现GRU-MATT门控循环单元融合多头注意力多变量时间序列预测模型预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.多维时序 | Matlab实现GRU-MATT门控循环单元融…