数据可视化组件DataV在Vue3中的基本使用
<!-- 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" //偶数行
};