@huyuchen/visual
Version:
## 组件环境
65 lines (64 loc) • 2.06 kB
JavaScript
import { reactive as s, openBlock as x, createElementBlock as h, toRefs as u, createElementVNode as r } from "vue";
import p from "../_virtual/_plugin-vue_export-helper.js";
const g = {
name: "HuElectrocardiogram",
props: {
mointerData: {
type: Array,
default: () => []
},
option: {
type: Array,
default: () => []
}
},
setup(l) {
const o = () => {
let a = l.option, e = document.getElementById("canvas");
t.startY = 0, t.clearnHeight = 250, t.ctx = e.getContext("2d"), t.ctx.strokeStyle = a[0].color, d();
}, d = () => {
let { option: a, mointerData: e } = u(l);
setInterval(() => {
t.allData = t.allData.concat(e.value), c(a.value[0], e.value);
}, 500);
}, t = s({
allData: [],
// 最终的数据
ctx: null,
startY: "",
x: "",
clearnWidth: 20,
clearnHeight: "",
index: 0,
dataIndex: 0,
lastPoint: ""
}), c = (a, e) => {
let n = 250 / (a.maxValue - a.minValue);
t.x = 750 / a.length, t.ctx.beginPath(), t.index < a.length ? t.dataIndex <= e.length ? (t.ctx.moveTo(t.x * t.index, n * t.lastPoint), t.ctx.lineTo(
t.x * t.index - 1,
n * e[t.dataIndex]
), t.ctx.stroke(), t.dataIndex !== 0 && (t.lastPoint = e[t.dataIndex]), t.dataIndex += 1, t.index += 1, setTimeout(() => {
i(t.index * t.x), c(a, e);
}, 100)) : (t.dataIndex = 0, t.lastPoint = e[e.length - 1]) : t.index = 0;
}, i = (a) => {
let e = t.clearnHeight, n = t.clearnWidth;
t.ctx.clearRect(a, 0, n, e);
};
return { init: o };
}
}, f = { style: { width: "100%", height: "100%", "align-items": "center", display: "flex", "justify-content": "center" } }, _ = /* @__PURE__ */ r("div", null, [
/* @__PURE__ */ r("canvas", {
id: "canvas",
width: "750",
height: "250"
}, " 浏览器不支持html5 ")
], -1), v = [
_
];
function m(l, o, d, t, c, i) {
return x(), h("div", f, v);
}
const E = /* @__PURE__ */ p(g, [["render", m]]);
export {
E as default
};