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
  1. 引入相关文件
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'
  1. 数据构造,比较简单,照着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>

实现效果如下
在这里插入图片描述

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Electron是一个基于Chromium和Node.js的框架,可以帮助开发者使用Web技术(HTML,CSS,JavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装ElectronVueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理ElectronVueCli。 2. 安装Electron 在安装Electron之前,需要先创建一个空目录作为项目根目录,然后在命令行中切换到该目录下,执行以下命令: ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件,并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件,这是Electron应用的主进程文件。在main.js中添加以下代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口,并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli: ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用: ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录,并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件,并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用: ``` npm run build ``` 以上命令会生成一个名为dist的子目录,并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用: ``` npm start ``` 以上命令会启动Electron应用,并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用,你可以使用Web技术来构建跨平台桌面应用程序,为用户提供更好的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值