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

最新推荐文章于 2025-11-14 06:56:38 发布

原创

最新推荐文章于 2025-11-14 06:56:38 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue-Orgnanization-Chart组件的使用方法，包括其优点、缺点及如何解决特定问题，如绘制箭头、去除父节点和定制节点样式，同时还提供了完整的代码示例。

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 组件使用

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

npm 安装依赖

npm install vue-organization-chart -S

引入相关文件

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

数据构造，比较简单，照着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: