vue和ZRender一起(一)

1、ZRender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。文档地址是：ecomfe.github.io/zrender-doc…
安装可以直接引入JavaScript文件，也可以使用npm安装

npm install zrender

2、代码如下：

<template>
  <div id="main" class="main-content">

  </div>
</template>

<script>
import * as zrender from 'zrender'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      zr: Object
    }
  },
  mounted() {
    this.zr = zrender.init(document.getElementById('main'))
    //这里添加图形代码
    let rect = new zrender.Rect({
      style: {
        fill: 'green',      //填充颜色
        stroke: 'red'    //描边颜色
      },
      shape: {
        x: 100,           //x,y代表坐标  左上角
        y: 100,
        width: 200,
        height: 100,
        r: [3]            //圆角
      },
      z: 1                   //层次，大的会覆盖小的
    });
    this.zr.add(rect);

    //点击事件
    rect.on('click', function (e) {
      console.log('点击了矩形',e)
    });
    //或者给zr添加事件绑定
    this.zr.on('click', function (e) {
      //可以查看 e 里包含的属性,进行判断
      console.log(e)
    });

    //圆形
    let circle = new zrender.Circle({
      style: {
        fill: 'red'
      },
      shape: {
        cx: 100,        //圆心X坐标
        cy: 100,        //圆心Y坐标
        r: 80           //半径
      },
      z: 2
    });
    console.log(circle)
    this.zr.add(circle);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main-content {
  width: 100vw;
  height: 100vh;

}
</style>