Vue项目中使用 ZRender 二维绘图引擎

ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

安装

npm install zrender
或
yarn add zrender

使用

1. 在组件中引入zrender

import zrender from 'zrender'

2. 在模板中加入挂载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>

3. 在 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);
    },

4. 在项目页面挂载的时候，调用ZRender初始化方法

mounted() {
    this.zRenderInit();
  },

生成效果图如下

ZRender 外旋轮曲线