基于Vue+Echart繪制動態(tài)圖
更新時間：2023年10月11日 08:49:00 作者：浪矢小同學(xué)
這篇文章主要給大家介紹了基于Vue+Echart的動態(tài)圖繪制,用戶需要展示他的數(shù)據(jù)庫是有哪個數(shù)據(jù)庫轉(zhuǎn)化的,需要展示數(shù)據(jù)庫的軌跡圖,前導(dǎo)庫的關(guān)系圖,文中有詳細的實現(xiàn)代碼,需要的朋友可以參考下
需求分析
用戶需要展示他的數(shù)據(jù)庫是有哪個數(shù)據(jù)庫轉(zhuǎn)化的，需要展示數(shù)據(jù)庫的軌跡圖，前導(dǎo)庫的關(guān)系圖。
后端接口返回的格式
傳入當前的數(shù)據(jù)庫（節(jié)點）的id
接口返回
currentDb是當前數(shù)據(jù)庫（節(jié)點）的信息 Object
newDbList當前數(shù)據(jù)庫（節(jié)點）的后繼數(shù)據(jù)庫（節(jié)點）Array
oldDbList當前數(shù)據(jù)庫（節(jié)點）的前導(dǎo)數(shù)據(jù)庫（節(jié)點）Array
前端需要實現(xiàn)的效果
第一次展示當前數(shù)據(jù)庫（節(jié)點）以及前導(dǎo)數(shù)據(jù)庫（節(jié)點）和后繼數(shù)據(jù)庫（節(jié)點）
當鼠標懸浮在某個數(shù)據(jù)庫（節(jié)點）的時候，再在此基礎(chǔ)上渲染懸浮的數(shù)據(jù)庫（節(jié)點)以及前導(dǎo)數(shù)據(jù)庫（節(jié)點）和后繼數(shù)據(jù)庫（節(jié)點）
解決方法
關(guān)系圖的setOption
如下
const chartOptions = {
title: {
text: '前導(dǎo)庫關(guān)系圖',
},
//鼠標懸浮的時候展示的內(nèi)容
tooltip: {
formatter: function (params) {
return `名稱: ${params.data.name}<br>
別名: ${params.data.info?.dbNickName || '無'}<br>
所在平臺：${params.data.info?.datasourceSystemName || '無'}<br>
數(shù)據(jù)庫類型：${params.data.info?.dbType || '無'}<br>
備注：${params.data.info?.remark || '無'}
`;
}
},
series: [
{
type: 'graph',
layout: 'none',
animation: false,
roam: true,
label: {
show: true,
},
force: {
gravity: 0,
repulsion: 1000,
edgeLength: 5
},
edgeSymbol: ['circle', 'arrow'], // 使用箭頭作為邊的符號
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 12,
},
data: this.nodes,
links: this.links,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
// 添加箭頭配置
arrow: {
type: 'arrow', // 箭頭的類型
size: 8, // 箭頭的大小
arrowOffset: 10, // 箭頭偏移位置
},
},
emphasis: {
focus: 'adjacency',
link: {
show: true,
},
handleSize: 6,
},
},
],
};參考echart官網(wǎng)https://echarts.apache.org/zh/index.html 可以查看配置的相關(guān)解釋，此處不過多解釋
準備第一次渲染 需要的數(shù)據(jù) 函數(shù)
prepareData(data) {
// 當前節(jié)點
const currentNode = [
{
id: data.currentDb.id,
name: data.currentDb.dbName,
info: data.currentDb,
x: 400,
y: 100,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#e63f32'
},
}
]
this.nodePosition(currentNode)
this.currentId = data.currentDb.id;
// 根據(jù)父組件傳遞的數(shù)據(jù)創(chuàng)建節(jié)點
if (data.newDbList) {
const gridSize = 60; // 網(wǎng)格大小
const newNodes = data.newDbList.map((item, index) => {
// let indexNew=index+1;
const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
return {
id: item.id,
info: item,
name: item.dbName,
x: 400 + gridSize,
y: 100 + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
}
})
this.nodePosition(newNodes)
const newLinks = data.newDbList.map((link) => (
{
source: data.currentDb.id.toString(),
target: link.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...newLinks
]
}
if (data.oldDbList) {
const gridSize = 60; // 網(wǎng)格大小
const oldNodes = data.oldDbList.map((item, index) => {
// let indexNew=index+1;
const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
return {
id: item.id,
info: item,
name: item.dbName,
x: 400 - gridSize,
y: 100 + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
};
})
this.nodePosition(oldNodes)
const oldLinks = data.oldDbList.map((link) => (
{
source: link.id.toString(),
target: data.currentDb.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...oldLinks
]
}
},注：此處使用曲線的原因是因為曲線可以大大降低 兩個節(jié)點的連線通過第三個節(jié)點的問題 ，造成展示錯誤（沒有做link連線的判定）
結(jié)算新節(jié)點的位置 函數(shù)
輸入?yún)?shù)nodes是存儲節(jié)點的數(shù)組
// 計算節(jié)點位置并添加節(jié)點
nodePosition(nodes) {
nodes.forEach(node => {
const originalPositionKey = `${node.x}_${node.y}`;
let positionKey = originalPositionKey;
while (this.nodePositions.has(positionKey)) {
const randomValue = Math.floor(Math.random() * 81) - 40;
node.x += randomValue;
node.y += randomValue;
positionKey = `${node.x}_${node.y}`;
}
this.nodePositions.add(positionKey);
this.nodes.push(node);
});
},具體邏輯：先判斷當前節(jié)點位置是否已經(jīng)存在，如果存在，則利用隨機數(shù)在存在的位置上偏移一定的值 ，再存儲。
節(jié)點位置存儲方式x_y
nodePositions: new Set(), // 使用 Set 來存儲節(jié)點位置信息
處理新節(jié)點信息的函數(shù)
changeData(data) {
console.log('data.currentDb', data.currentDb)
// 當前節(jié)點的x，y值
const currentX = data.currentDb.x;
const currentY = data.currentDb.y;
if (data.newDbList) {
const newNodes=[]
// 使用Set來創(chuàng)建一個唯一節(jié)點ID的集合
const existingNodeIds = new Set(this.nodes.map(node => node.id));
const gridSize = 60; // 網(wǎng)格大小
data.newDbList.map((item, index) => {
const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
const newNode = {
id: item.id,
info: item,
name: item.dbName,
x: currentX + gridSize,
y: currentY + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
}
}
if (!existingNodeIds.has(item.id)) {
newNodes.push(newNode)
} else {
}
this.nodePosition(newNodes)
})
const newLinks = data.newDbList.map((link) => (
{
source: data.currentDb.id.toString(),
target: link.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...newLinks
]
}
if (data.oldDbList) {
const oldNodes=[]
// 使用Set來創(chuàng)建一個唯一節(jié)點ID的集合
const existingNodeIds = new Set(this.nodes.map(node => node.id));
console.log('existingNodeIds', existingNodeIds)
const gridSize = 60; // 網(wǎng)格大小
data.oldDbList.map((item, index) => {
const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20);
const newNode = {
id: item.id,
info: item,
name: item.dbName,
x: currentX - gridSize,
y: currentY + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
}
if (!existingNodeIds.has(item.id)) {
// 如果新節(jié)點的ID不存在于現(xiàn)有節(jié)點中，添加新節(jié)點
oldNodes.push(newNode);
} else {
}
this.nodePosition(oldNodes)
})
const oldLinks = data.oldDbList.map((link) => (
{
source: link.id.toString(),
target: data.currentDb.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...oldLinks
]
}
},與prepareData函數(shù)內(nèi)容差不多 ，作者此處還未做代碼整合
懸浮在節(jié)點上方時的處理函數(shù)
updateNode() {
this.myChart.on('mouseover', (params) => {
if (params.dataType === 'node') {
const currentData = params.data;
// 先隱藏所有節(jié)點的 label
this.nodes.forEach(node => {
if (node.label) {
node.label.show = false;
}
});
// 顯示當前節(jié)點的 label
if (currentData.label) {
currentData.label.show = true;
}
databaseRelation(currentData.id).then(res => {
if (res.code === 200) {
const data = {
...res.data,
currentDb: params.data,
}
this.changeData(data)
this.drawChart();
} else {
this.$message(res.msg)
}
})
console.log('params', params.data)
}
});
}databaseRelation是作者項目的后端請求，請根據(jù)自己實際情況調(diào)整
主要是通過改變setOption里面的data來改變當前的圖
完整代碼
<template>
<div>
<div id="chart-container" style="height: 400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import { databaseRelation } from '@/api/qysj/app/rawData/Database'
export default {
props: {
data: Object,
},
data() {
return {
myChart: null,
nodes: [
],
links: [
],
nodePositions: new Set(), // 使用 Set 來存儲節(jié)點位置信息
// 當前節(jié)點id
currentId: null
};
},
mounted() {
console.log('當前的節(jié)點', this.data.currentDb)
console.log('第一次的節(jié)點', this.data)
const chartContainer = this.$el.querySelector('#chart-container');
this.myChart = echarts.init(chartContainer);
this.myChart.clear();
this.prepareData(this.data); // 準備節(jié)點和鏈接數(shù)據(jù)
this.drawChart();
this.updateNode()
},
methods: {
// 準備節(jié)點和鏈接數(shù)據(jù)
prepareData(data) {
// 當前節(jié)點
const currentNode = [
{
id: data.currentDb.id,
name: data.currentDb.dbName,
info: data.currentDb,
x: 400,
y: 100,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#e63f32'
},
}
]
this.nodePosition(currentNode)
this.currentId = data.currentDb.id;
// 根據(jù)父組件傳遞的數(shù)據(jù)創(chuàng)建節(jié)點
if (data.newDbList) {
const gridSize = 60; // 網(wǎng)格大小
const newNodes = data.newDbList.map((item, index) => {
// let indexNew=index+1;
const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
return {
id: item.id,
info: item,
name: item.dbName,
x: 400 + gridSize,
y: 100 + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
}
})
this.nodePosition(newNodes)
const newLinks = data.newDbList.map((link) => (
{
source: data.currentDb.id.toString(),
target: link.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...newLinks
]
}
if (data.oldDbList) {
const gridSize = 60; // 網(wǎng)格大小
const oldNodes = data.oldDbList.map((item, index) => {
// let indexNew=index+1;
const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
return {
id: item.id,
info: item,
name: item.dbName,
x: 400 - gridSize,
y: 100 + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
};
})
this.nodePosition(oldNodes)
const oldLinks = data.oldDbList.map((link) => (
{
source: link.id.toString(),
target: data.currentDb.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...oldLinks
]
}
},
changeData(data) {
console.log('data.currentDb', data.currentDb)
// 當前節(jié)點的x，y值
const currentX = data.currentDb.x;
const currentY = data.currentDb.y;
if (data.newDbList) {
const newNodes=[]
// 使用Set來創(chuàng)建一個唯一節(jié)點ID的集合
const existingNodeIds = new Set(this.nodes.map(node => node.id));
const gridSize = 60; // 網(wǎng)格大小
data.newDbList.map((item, index) => {
const yOffset = data.newDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20) * (index + 1);
const newNode = {
id: item.id,
info: item,
name: item.dbName,
x: currentX + gridSize,
y: currentY + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
}
}
if (!existingNodeIds.has(item.id)) {
newNodes.push(newNode)
} else {
}
this.nodePosition(newNodes)
})
const newLinks = data.newDbList.map((link) => (
{
source: data.currentDb.id.toString(),
target: link.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...newLinks
]
}
if (data.oldDbList) {
const oldNodes=[]
// 使用Set來創(chuàng)建一個唯一節(jié)點ID的集合
const existingNodeIds = new Set(this.nodes.map(node => node.id));
console.log('existingNodeIds', existingNodeIds)
const gridSize = 60; // 網(wǎng)格大小
data.oldDbList.map((item, index) => {
const yOffset = data.oldDbList.length === 1 ? 0 : (index % 2 === 0 ? 20 : -20);
const newNode = {
id: item.id,
info: item,
name: item.dbName,
x: currentX - gridSize,
y: currentY + yOffset,
symbol: 'rect', // 使用矩形作為節(jié)點的形狀
symbolSize: [40, 30], // 設(shè)置矩形節(jié)點的大小
itemStyle: {
color: '#41a5ee'
},
}
if (!existingNodeIds.has(item.id)) {
// 如果新節(jié)點的ID不存在于現(xiàn)有節(jié)點中，添加新節(jié)點
oldNodes.push(newNode);
} else {
}
this.nodePosition(oldNodes)
})
const oldLinks = data.oldDbList.map((link) => (
{
source: link.id.toString(),
target: data.currentDb.id.toString(),
lineStyle: {
normal: {
curveness: 0.2, // 調(diào)整曲線的彎曲度
},
},
}
))
this.links = [
...this.links,
...oldLinks
]
}
},
// 計算節(jié)點位置并添加節(jié)點
nodePosition(nodes) {
nodes.forEach(node => {
const originalPositionKey = `${node.x}_${node.y}`;
let positionKey = originalPositionKey;
while (this.nodePositions.has(positionKey)) {
const randomValue = Math.floor(Math.random() * 81) - 40;
node.x += randomValue;
node.y += randomValue;
positionKey = `${node.x}_${node.y}`;
}
this.nodePositions.add(positionKey);
this.nodes.push(node);
});
},
drawChart() {
console.log('this.nodes', this.nodes)
console.log('this.links', this.links)
const chartOptions = {
title: {
text: '前導(dǎo)庫關(guān)系圖',
},
tooltip: {
formatter: function (params) {
return `名稱: ${params.data.name}<br>
別名: ${params.data.info?.dbNickName || '無'}<br>
所在平臺：${params.data.info?.datasourceSystemName || '無'}<br>
數(shù)據(jù)庫類型：${params.data.info?.dbType || '無'}<br>
備注：${params.data.info?.remark || '無'}
`;
}
},
series: [
{
type: 'graph',
layout: 'none',
// layout: 'force',
animation: false,
// data: [this.createTreeData()], // 樹狀布局需要提供一個樹形結(jié)構(gòu)的數(shù)據(jù)
roam: true,
label: {
show: true,
},
force: {
// initLayout: 'circular'
gravity: 0,
repulsion: 1000,
edgeLength: 5
},
edgeSymbol: ['circle', 'arrow'], // 使用箭頭作為邊的符號
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 12,
},
data: this.nodes,
links: this.links,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
// 添加箭頭配置
arrow: {
type: 'arrow', // 箭頭的類型
size: 8, // 箭頭的大小
arrowOffset: 10, // 箭頭偏移位置
},
},
emphasis: {
focus: 'adjacency',
link: {
show: true,
},
handleSize: 6,
},
},
],
};
this.myChart.setOption(chartOptions);
},
updateNode() {
this.myChart.on('mouseover', (params) => {
if (params.dataType === 'node') {
const currentData = params.data;
// 先隱藏所有節(jié)點的 label
this.nodes.forEach(node => {
if (node.label) {
node.label.show = false;
}
});
// 顯示當前節(jié)點的 label
if (currentData.label) {
currentData.label.show = true;
}
databaseRelation(currentData.id).then(res => {
if (res.code === 200) {
const data = {
...res.data,
currentDb: params.data,
}
console.log('data', data)
this.changeData(data)
this.drawChart();
// this.myChart.setOption(chartOptions);
} else {
this.$message(res.msg)
}
})
console.log('params', params.data)
}
});
}
},
};
</script>以上就是基于Vue+Echart繪制動態(tài)圖的詳細內(nèi)容，更多關(guān)于Vue Echart動態(tài)圖的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解Vue.js項目API、Router配置拆分實踐,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)的組件兄弟間通信功能,結(jié)合實例形式分析了vue兄弟組件間通信的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
$是在vue中所有實例中都可用的一個簡單約定,這樣做會避免和已被定義的數(shù)據(jù),方法,計算屬性產(chǎn)生沖突,下面這篇文章主要給大家介紹了關(guān)于vue中$含義及其用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
在vue3中使用el-tree-select實現(xiàn)樹形下拉選擇器效果
el-tree-select是一個含有下拉菜單的樹形選擇器,結(jié)合了?el-tree?和?el-select?兩個組件的功能,這篇文章主要介紹了在vue3中使用el-tree-select做一個樹形下拉選擇器,需要的朋友可以參考下2024-03-03
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼
這篇文章主要介紹了Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 讀取HTMLCollection列表的length為0問題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
axios是用來做數(shù)據(jù)交互的插件，最近正在學(xué)習(xí)axios，所以想著整理成筆記方便大家和自己參考學(xué)習(xí)，下面這篇文章主要跟大家介紹了關(guān)于Axios使用方法的相關(guān)資料，需要的朋友們下面來一起看看吧。2017-07-07
使用Vue3實現(xiàn)倒計時器及倒計時任務(wù)的完整代碼
文章介紹了如何使用Vue3和Element-plus開發(fā)一個倒計時器和倒計時任務(wù)管理界面,倒計時器具備手動設(shè)置、開始、暫停和重啟功能,文章還提供了倒計時器的完整代碼,包括HTML、JavaScript和CSS部分,感興趣的朋友一起看看吧2024-11-11
這篇文章主要介紹了vue動畫效果實現(xiàn)方法,結(jié)合完整實例形式分析了vue.js+animate.css實現(xiàn)的動畫切換效果相關(guān)操作技巧,需要的朋友可以參考下2019-03-03