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

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>

實現效果如下