快捷導(dǎo)航

基于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)系圖,文中有詳細(xì)的實現(xiàn)代碼,需要的朋友可以參考下

需求分析

用戶需要展示他的數(shù)據(jù)庫是有哪個數(shù)據(jù)庫轉(zhuǎn)化的，需要展示數(shù)據(jù)庫的軌跡圖，前導(dǎo)庫的關(guān)系圖。

后端接口返回的格式

傳入當(dāng)前的數(shù)據(jù)庫（節(jié)點）的id

接口返回

currentDb是當(dāng)前數(shù)據(jù)庫（節(jié)點）的信息 Object

newDbList當(dāng)前數(shù)據(jù)庫（節(jié)點）的后繼數(shù)據(jù)庫（節(jié)點）Array

oldDbList當(dāng)前數(shù)據(jù)庫（節(jié)點）的前導(dǎo)數(shù)據(jù)庫（節(jié)點）Array

前端需要實現(xiàn)的效果

第一次展示當(dāng)前數(shù)據(jù)庫（節(jié)點）以及前導(dǎo)數(shù)據(jù)庫（節(jié)點）和后繼數(shù)據(jù)庫（節(jié)點）

當(dāng)鼠標(biāo)懸浮在某個數(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)系圖',
        },
//鼠標(biāo)懸浮的時候展示的內(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)解釋，此處不過多解釋

準(zhǔn)備第一次渲染需要的數(shù)據(jù) 函數(shù)

 prepareData(data) {
      // 當(dāng)前節(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);
      });
    },

具體邏輯：先判斷當(dāng)前節(jié)點位置是否已經(jīng)存在，如果存在，則利用隨機數(shù)在存在的位置上偏移一定的值，再存儲。

節(jié)點位置存儲方式x_y

nodePositions: new Set(), // 使用 Set 來存儲節(jié)點位置信息

處理新節(jié)點信息的函數(shù)

  changeData(data) {
      console.log('data.currentDb', data.currentDb)
      // 當(dāng)前節(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;
            }
          });
          // 顯示當(dāng)前節(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來改變當(dāng)前的圖

完整代碼

<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é)點位置信息
      // 當(dāng)前節(jié)點id
      currentId: null
    };
  },
  mounted() {
    console.log('當(dāng)前的節(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); // 準(zhǔn)備節(jié)點和鏈接數(shù)據(jù)
    this.drawChart();
    this.updateNode()
  },
  methods: {
    // 準(zhǔn)備節(jié)點和鏈接數(shù)據(jù)
    prepareData(data) {
      // 當(dāng)前節(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)
      // 當(dāng)前節(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;
            }
          });
          // 顯示當(dāng)前節(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)圖的詳細(xì)內(nèi)容，更多關(guān)于Vue Echart動態(tài)圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: