Electron + Vue跨平台应用(十)可视化(一)
Electron + Vue + Vscode构建跨平台应用(一)知识点补充Electron + Vue + Vscode构建跨平台应用(二)Electron + Vue环境搭建Electron + Vue + Vscode构建跨平台应用(三)利用webpack搭建vue项目Electron + Vue + Vscode构建跨平台应用(四)利用Electron-Vue构建Vue应用详解El...
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浏览器中响应不好 |
- 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: [
{ 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的属性和方法的说明
- datasource属性 : 组件使用的数据集
- pan属性: 通过设置该属性来控制组件是否可以通过鼠标来拖放,默认为false
- zoom属性: 通过设置该属性来控制组件是否可以缩放,默认为false
- node-click方法: 节点点击事件
缺点1 : 子节点一定要有一个父节点,即这里必须要有一个类似的Lao Lao的节点存在
缺点2 : 组件内部是通过table的方式来实现的,节点与节点关系不好表示,如不方便绘制双向/单向箭头
1.3 组件扩展: 绘制箭头 / 去除父节点 / 定制节点样式
我们要如何实现如下关系图?我们仔细看这个关系图,他有三个地方需要注意
- 最上层缺少一个父节点,这导致我们不能直接使用OrgChart组件
- 子节点上面绘制了蓝色的箭头
- 定制节点样式
第一个问题的解决方案:
我们通过查看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>
实现效果如下
更多推荐
所有评论(0)