ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
安装
npm install zrender
或
yarn add zrender
使用
- 在组件中引入zrender
import zrender from 'zrender'
- 在模板中加入挂载ZRender的DOM节点
<template>
<div class="app">
<div ref="zrender" id="zrender" class="zrender"></div>
</div>
</template>
<style lang="less">
#zrender {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
- 在 methods 中添加 ZRender初始化&绘制 方法
methods: {
/**初始化 zRender */
zRenderInit() {
let dom = this.$refs.zrender;
this.zr = zrender.init(dom);
this.group = new zrender.Group();
this.drawTrochoid();
this.zr.add(this.group);
},
/** 绘制函数 */
drawTrochoid() {
let option = {
shape: {
cx: 200,
cy: 200,
r: 80,
r0: 35,
d: 50,
n:"out"
},
style: {
fill: "transparent", // 填充颜色，默认#000
stroke: "#fff", // 描边颜色，默认null
lineWidth: 2, // 线宽， 默认1
text :'外旋轮曲线',
fontSize:"25",
textFill:"red",
},
hoverable: true, // default true
draggable: true,
};
// 外旋轮线
let TrochoidShape = new zrender.Trochoid(option);
// 添加外旋轮线到group里
this.group.add(TrochoidShape);
},
- 在项目页面挂载的时候，调用ZRender初始化方法
mounted() {
this.zRenderInit();
},
生成效果图如下
ZRender 外旋轮曲线
