深圳招聘网站推荐_继续访问浏览器_快速网站轻松排名哪家好_15个常见关键词

数据可视化组件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" //偶数行
};