当前位置：首页 > article >正文

数据可视化组件DataV在Vue3中的基本使用

article 2024/11/2 20:30:00

数据可视化组件DataV在Vue3中的基本使用

DataV Vue3+TS+Vite版链接地址

1、安装

npm install @kjgl77/datav-vue3

2、在main.ts中全局引入

import { createApp } from 'vue'

import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App)

app.use(DataVVue3)
app.mount('#app')

在这里插入图片描述

3、在.vue文件中就可以直接使用了

这里以轮播表的使用为例，如下：

<!-- 某个.vue文件 -->
<script setup>
import { option } from "./mock";
</script>

<template>
	<div class="bg h-full">
		<dv-scroll-board :config="option" />
	</div>
</template>
<style lang="scss" scoped>
	.bg {
		background: linear-gradient(180deg, rgba(31, 124, 163, 0.43) 0%, rgba(13, 70, 106, 0.17) 100%);
	}
</style>

<!-- mock.js文件 -->
import error_1 from "/src/assets/dashboard/safety/error_1.png";
import error_2 from '/src/assets/dashboard/safety/error_2.png';
import error_3 from '/src/assets/dashboard/safety/error_3.png';


const style = "flex justify-center items-center text-[22px]";
const imgStyle = "w-[50px] h-[45px]";
export const option = {
	header: ["人员", "卡号", "位置", "开门时间"],
	data: [
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "材料异常", "121前处理室", "2023-6-29 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_2}'/>2级</div>`, "人员异常", "106高温室", "2023-6-27 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_3}'/>4级</div>`, "储存柜异常", "217样品流转间", "2023-6-21 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "器材异常", "304红外光谱室", "2023-6-20 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "器材异常", "203前处理室", "2023-6-18 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_2}'/>2级</div>`, "人员异常", "108原子吸收室", "2023-6-17 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "材料异常", "121前处理室", "2023-6-29 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_2}'/>2级</div>`, "人员异常", "106高温室", "2023-6-27 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_3}'/>4级</div>`, "储存柜异常", "217样品流转间", "2023-6-21 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "器材异常", "304红外光谱室", "2023-6-20 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_1}'/>1级</div>`, "器材异常", "203前处理室", "2023-6-18 "],
		[`<div class='${style}'><img class='${imgStyle}' src='${error_2}'/>2级</div>`, "人员异常", "108原子吸收室", "2023-6-17 "]
	],
	columnWidth: [150, 200, 250, 300],
	headerHeight: 50,
	rowNum: 7,
	headerBGC: "transparent",
	oddRowBGC: "rgba(2,5,6,0.13)", //奇数行
	evenRowBGC: "transparent" //偶数行
};