手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS_tinyvue 和echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47268883/article/details/136244932

博客介绍了ECharts开源可视化库和TinyVue UI组件库。重点讲述了搭建Vite项目的步骤，包括创建工程、安装使用Vue组件等。还给出了使用TinyVue和ECharts实现内存使用率水滴球案例，以及notify基本用法和API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术栈	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: 44104