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

技術棧	springboot3+hutool-all+oshi-core+Vue3+vite+TinyVue+Echarts+TailwindCSS
軟件	版本
IDEA	IntelliJ IDEA 2022.2.1
JDK	17
Spring Boot	3.1
hutool-all	5.8.18
oshi-core	6.4.1
Vue3	5.0.10
vite	5.0.10
axios	1.6.7
echarts	5.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>

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

名稱	類型	默認值	說明
closeIcon	Component	IconClose	關閉圖標組件對象
customClass	string	--	自定義樣式類
debounceDelay	number	0	啟用防抖
duration	number	4500	自動關閉延時毫秒數
message	INotifyMessage	--	通知消息文本，可用 jsx 定制
position	'top-right' \| 'bottom-right'	'bottom-right'	通知顯示位置
showClose	boolean	TRUE	是否顯示關閉按鈕
showIcon	boolean	TRUE	是否顯示類型圖標
statusIcon	Component	IconInfoSolid	類型圖標組件對象
title	INotifyTitle	--	通知消息標題，可用 jsx 定制
type	'info' \| 'success' \| 'warning' \| 'error'	'info'	通知消息類型
verticalOffset	number \| string	16	設置垂直方向偏離距離,單位 px