UNPKG

@huyuchen/visual

Version:

## 组件环境

65 lines (64 loc) 2.06 kB
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 };