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跨平臺應用（九）基礎技法（四）
Electron + Vue跨平臺應用（十）可視化（一）
- 在main.js文件中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
- 在vue頁面中引入div，並完成Echarts的初始化
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
initEcharts () {
this.echart = this.$echarts.init(document.getElementById('myChart'))
},
- 最後一步就是填充Echarts數據，完整代碼如下
<template>
<div class="main">
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
</div>
</template>
<script>
export default {
name: 'EchartsActivity',
data () {
return {
echart: null,
option: {},
graphData: [{
name: '節點1',
id: 1
}, {
name: '節點2',
id: 2
}, {
name: '節點3',
id: 3
}, {
name: '節點4',
id: 4
}, {
name: '節點5',
id: 5
}, {
name: '節點6',
id: 6
}],
graphLinks: [{
source: '1',
target: '2'
}, {
source: '2',
target: '3'
}, {
source: '2',
target: '4'
}, {
source: '3',
target: '5'
}, {
source: '4',
target: '6'
}]
}
},
mounted () {
this.initEcharts()
this.setOption()
this.reFreshEcharts()
},
methods: {
initEcharts () {
this.echart = this.$echarts.init(document.getElementById('myChart'))
},
setOption () {
let graphOption = {
title: {
text: '關係圖示例'
},
tooltip: {},
series: [
{
type: 'graph',
layout: 'force',
data: this.graphData,
links: this.graphLinks,
force: {
repulsion: 500
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
}
this.option = graphOption
},
reFreshEcharts () {
this.$nextTick(() => {
this.echart.setOption(this.option)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
顯示效果如下
那沒有固定座標的關係圖的節點位置是如何確定的? 其實他是根據力導圖算法動態分佈的。
那如果我們需要 固定某些節點要如何處理尼？
通過查看Echarts配置項可知，關係圖的data數據有如下部分屬性
所以我們只要通過設置data的數據fixed屬性爲true，並且設置對應x和y的座標即可固定節點位置，完整代碼如下
<template>
<div class="main">
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
<button>關係圖</button>
<button>儀表盤</button>
</div>
</template>
<script>
export default {
name: 'EchartsActivity',
data () {
return {
echart: null,
option: {},
graphData: [{
name: '節點1',
id: 1,
fixed: true,
x: 100,
y: 50
}, {
name: '節點2',
id: 2,
fixed: true,
x: 180,
y: 50
}, {
name: '節點3',
id: 3
}],
graphLinks: [{
source: '1',
target: '2'
}, {
source: '2',
target: '3'
}]
}
},
mounted () {
this.initEcharts()
this.setOption()
this.reFreshEcharts()
},
methods: {
initEcharts () {
this.echart = this.$echarts.init(document.getElementById('myChart'))
},
setOption () {
let graphOption = {
title: {
text: '關係圖示例'
},
tooltip: {},
series: [
{
type: 'graph',
layout: 'force',
data: this.graphData,
links: this.graphLinks,
force: {
repulsion: 500
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
}
this.option = graphOption
},
reFreshEcharts () {
this.$nextTick(() => {
this.echart.setOption(this.option)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
顯示效果如下：
通過上面你的屬性設置就完成了關係圖固定節點的功能，同時我們也可以知道關係圖中座標系的（0,0）點屏幕左上角
當關系圖中的力導圖如果節點過多，在繪製的時候性能比較慢，那我們要如何加快這種渲染速度？
通過上面的代碼我們發現，series對象裏面的data是組成關係圖的重要數據，而series是一個數組對象，所以爲了優化過多節點的渲染速度，我們可以爲series就像分片數據一樣設置多個數據，完整代碼如下
<template>
<div class="main">
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
<button>關係圖</button>
<button>儀表盤</button>
</div>
</template>
<script>
export default {
name: 'EchartsActivity',
data () {
return {
echart: null,
option: {},
graphData: [{
name: '節點1',
id: 1
}, {
name: '節點2',
id: 2
}, {
name: '節點3',
id: 3
}],
graphLinks: [{
source: '1',
target: '2'
}, {
source: '2',
target: '3'
}]
}
},
mounted () {
this.initEcharts()
this.setOption()
this.reFreshEcharts()
},
methods: {
initEcharts () {
this.echart = this.$echarts.init(document.getElementById('myChart'))
},
setOption () {
let graphOption = {
title: {
text: '關係圖示例'
},
tooltip: {},
series: [
{
type: 'graph',
layout: 'force',
data: this.graphData,
links: this.graphLinks,
force: {
repulsion: 500
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}, {
type: 'graph',
layout: 'force',
data: this.graphData,
links: this.graphLinks,
force: {
repulsion: 500
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}, {
type: 'graph',
layout: 'force',
data: this.graphData,
links: this.graphLinks,
force: {
repulsion: 500
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
}
this.option = graphOption
},
reFreshEcharts () {
this.$nextTick(() => {
this.echart.setOption(this.option)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
顯示效果如下
補充說明一個在使用關係圖常見的異常
Cannot set property 'dataIndex' of undefined
出現這個異常的原因是在你的關係圖中出現了重複數據，一般是指id重複