Electron + Vue跨平台应用（十）可视化（一）

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）

在前端开发中可视化技术应用非常广泛，如各种大屏监控系统，各种图表，关系图的绘制，这里我们先介绍几个可视化技术在前端中的应用

1. Vue-Orgnaniztion-Chart
  1.1 组件使用
  1.2 组件缺点
  1.3 组件扩展： 绘制箭头 / 去除父节点 / 定制节点样式

先概览下如下三个组件，orgchart，echarts和antv

组件名称	实现方式	优点	缺点
Vue-Orgnanization-chart	通过html表格的方式实现	可以通过js语法控制对应元素	只适用于某些图表，并且需要一个父节点
Echarts	通过Canvas方式绘制	使用广泛
AntV	通过Canvas方式绘制		参考资料少，兼容性差，如点击事件关系图的点击事件在google浏览器中响应不好

1. Vue-Orgnaniztion-Chart

  1.1 组件使用

这个组件使用起来比较简单

1. npm 安装依赖

npm install vue-organization-chart -S

2. 引入相关文件

import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'

4. 数据构造，比较简单，照着vue-orgchart官网 做一遍

<template>
  <div>
    <organization-chart :datasource="ds"></organization-chart>
  </div>
</template>

<script>
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'

export default {
  components: {
    OrganizationChart
  },
  data () {
    return {
      ds: {
        id: '1',
        name: 'Lao Lao',
        title: 'general manager',
        children: [
          { id: '2', name: 'Bo Miao', title: 'department manager' },
          {
            id: '3',
            name: 'Su Miao',
            title: 'department manager',
            children: [
              { id: '4', name: 'Tie Hua', title: 'senior engineer' },
              {
                id: '5',
                name: 'Hei Hei',
                title: 'senior engineer',
                children: [
                  { id: '6', name: 'Pang Pang', title: 'engineer' },
                  { id: '7', name: 'Xiang Xiang', title: 'UE engineer' }
                ]
              }
            ]
          },
          { id: '8', name: 'Hong Miao', title: 'department manager' },
          { id: '9', name: 'Chun Miao', title: 'department manager' }
        ]
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

展示如下：

Vue-Orgnaniztion-Chart的属性和方法的说明

1. datasource属性 ： 组件使用的数据集
2. pan属性： 通过设置该属性来控制组件是否可以通过鼠标来拖放，默认为false
3. zoom属性： 通过设置该属性来控制组件是否可以缩放，默认为false
4. node-click方法: 节点点击事件

  1.2 组件缺点

缺点1 ： 子节点一定要有一个父节点，即这里必须要有一个类似的Lao Lao的节点存在

缺点2 ： 组件内部是通过table的方式来实现的，节点与节点关系不好表示，如不方便绘制双向/单向箭头

  1.3 组件扩展： 绘制箭头 / 去除父节点 / 定制节点样式

我们要如何实现如下关系图？

我们仔细看这个关系图，他有三个地方需要注意

1. 最上层缺少一个父节点，这导致我们不能直接使用OrgChart组件
2. 子节点上面绘制了蓝色的箭头
3. 定制节点样式

第一个问题的解决方案：

   我们通过查看OrgChart内部实现可知，父节点其实就是table的第一行，所以我们可以通过js的方式去查找table的第一个和第二个子节点，即可隐藏父节点与下方的线条

第二个问题的解决方案：
   因为orgchart实现方式为table，每一个节点都是一个div，所以我们可以通过css的方式来在节点上方绘制蓝色箭头

第三个问题的解决方案：
   通过OrgChart内置方法实现，如下代码用来定制节点样式

<template slot-scope="{ nodeData }">
  <!-- feel free to customize the internal structure of node -->
</template>

完整代码如下

<template>
  <div>
    <organization-chart :datasource="ds">
      <template slot-scope="{ nodeData }">
      <!--通过对div设置triangle属性,通过css方式绘制箭头 -->
        <div :class="{'triangle': nodeData.triangle}">
          <div class="nodeTop">
            <i>{{nodeData.name}}</i>
          </div>
          <div class="nodeBottom">
            <span>{{nodeData.title}}</span>
          </div>
        </div>
      </template>
    </organization-chart>
  </div>
</template>

<script>
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'

export default {
  components: {
    OrganizationChart
  },
  data () {
    return {
      ds: {
        id: 'first',
        name: 'Lao Lao',
        title: 'general manager',
        children: [
          { id: '2', name: 'Bo Miao', title: 'department manager' },
          {
            id: '3',
            name: 'Su Miao',
            triangle: true,
            title: 'department manager',
            children: [
              { id: '4', name: 'Tie Hua', title: 'senior engineer' },
              {
                id: '5',
                name: 'Hei Hei',
                title: 'senior engineer',
                children: [
                  { id: '6', name: 'Pang Pang', title: 'engineer', triangle: true },
                  { id: '7', name: 'Xiang Xiang', title: 'UE engineer', triangle: true }
                ]
              }
            ]
          },
          { id: '8', name: 'Hong Miao', title: 'department manager', triangle: true },
          { id: '9', name: 'Chun Miao', title: 'department manager' }
        ]
      }
    }
  },
  mounted () {
  	// 通过js方法隐藏父节点
    this.$nextTick(() => {
      document.querySelector('#first.node').style.display = 'none'
      document.querySelector('.orgchart>table>tbody>tr.lines:nth-child(2)').style.display = 'none'
      let ele = document.querySelector('.orgchart>table>tbody').children[2]
      this.ds.children.length === 1 ? ele.style.display = 'none' : ele.style.display = ''
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nodeTop{
  background: #67c23a;
}
.nodeBottom{
  background: yellow;
}
.triangle {
  width:  150px;
  position: relative;
}
.triangle:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: blue;
  left: 36%;
  bottom: 40px;
}
</style>

实现效果如下