手拉手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-grid

ref="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-column

field="name"

show-overflow

title="名称"

: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-column

field="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 = current

fetchData()

}

function sizeChange(size) {

custPager.value.pageSize = size

fetchData()

}

function fetchData() {

getData({ page: custPager.value }).then(({ result, page }) => {

tableData.value = result

custPager.value.total = page.totalRows

})

}

function getData({ page }) {

return new Promise((resolve) => {

// 此处为用户自定义的服务端分页，排序，过滤服务

setTimeout(() => {

const startIndex = (page.currentPage - 1) * page.pageSize

const allData = mockData.value

const 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

​编辑

名称	类型	默认值	说明
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

​