Vue大屏实战八：生命周期飞线图的实现

1.效果预览

2.页面实现

 <div>
    <div id="zqchart"></div>
  </div>

3.逻辑的实现

data() {
    return {
      nameArr: ['销毁', '创建', '修改', '流转'],
      shapeArr: ['rect', 'roundRect', 'circle', 'diamond'],
    }
  },
  methods: {
    getNameByType(isName, value) {
      if (isName) return this.nameArr[value]
      return this.shapeArr[value]
    },
    bars(obj) {
      let resObj = {
        msg: '操作成功',
        code: 200,
        data: {
          nodes: [