介绍:通过ZRender画一个大屏项目的顶部样式,在其中放入大屏的标题。ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
一、下载
npm install zrender
终端输入以上命令下载包即可。
二、导入
import * as zrender from "zrender";
三、使用。
ZRender的API文档:ZRender 文档 (ecomfe.github.io)
<template>
<div class="top">
<div class="header" id="header"></div>
<div class="top-title">这是一个大屏标题</div>
</div>
</template>
首先创建一个id为header的元素作为canvas画布,然后通过以下代码初始化
onMounted(()=>{
zr = zrender.init(document.getElementById("header"));
init();
})
const init=()=>{
//你的绘画内容
}
init()方法则为你的绘画方法。init()中的代码较多,在文档里不做展示,需要的请自己拉取demo代码。
四、代码地址
banyan666/Demo-vue (github.com)https://github.com/banyan666/Demo-vue