快捷導(dǎo)航

基于Vue+Echart繪制動(dòng)態(tài)圖

更新時(shí)間：2023年10月11日 08:49:00 作者：浪矢小同學(xué)

這篇文章主要給大家介紹了基于Vue+Echart的動(dòng)態(tài)圖繪制,用戶(hù)需要展示他的數(shù)據(jù)庫(kù)是有哪個(gè)數(shù)據(jù)庫(kù)轉(zhuǎn)化的,需要展示數(shù)據(jù)庫(kù)的軌跡圖,前導(dǎo)庫(kù)的關(guān)系圖,文中有詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下

需求分析

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

后端接口返回的格式

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

接口返回

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

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

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

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

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

當(dāng)鼠標(biāo)懸浮在某個(gè)數(shù)據(jù)庫(kù)（節(jié)點(diǎn)）的時(shí)候，再在此基礎(chǔ)上渲染懸浮的數(shù)據(jù)庫(kù)（節(jié)點(diǎn))以及前導(dǎo)數(shù)據(jù)庫(kù)（節(jié)點(diǎn)）和后繼數(shù)據(jù)庫(kù)（節(jié)點(diǎn)）

解決方法

關(guān)系圖的`setOption`

如下

 const chartOptions = {
        title: {
          text: '前導(dǎo)庫(kù)關(guān)系圖',
        },
//鼠標(biāo)懸浮的時(shí)候展示的內(nèi)容
        tooltip: {
          formatter: function (params) {
            return `名稱(chēng): ${params.data.name}<br>
                      別名: ${params.data.info?.dbNickName || '無(wú)'}<br>
                      所在平臺(tái)：${params.data.info?.datasourceSystemName || '無(wú)'}<br>
                      數(shù)據(jù)庫(kù)類(lèi)型：${params.data.info?.dbType || '無(wú)'}<br>
                      備注：${params.data.info?.remark || '無(wú)'}
  `;
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            animation: false,
            roam: true,
            label: {
              show: true,
            },
            force: {
              gravity: 0,
              repulsion: 1000,
              edgeLength: 5
            },
            edgeSymbol: ['circle', 'arrow'], // 使用箭頭作為邊的符號(hào)
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12,
            },
            data: this.nodes,
            links: this.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              // 添加箭頭配置
              arrow: {
                type: 'arrow', // 箭頭的類(lèi)型
                size: 8, // 箭頭的大小
                arrowOffset: 10, // 箭頭偏移位置
              },
            },
            emphasis: {
              focus: 'adjacency',
              link: {
                show: true,
              },
              handleSize: 6,
            },
          },
        ],
      };

參考echart官網(wǎng)https://echarts.apache.org/zh/index.html 可以查看配置的相關(guān)解釋?zhuān)颂幉贿^(guò)多解釋

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

 prepareData(data) {
      // 當(dāng)前節(jié)點(diǎn)
      const currentNode = [
        {
          id: data.currentDb.id,
          name: data.currentDb.dbName,
          info: data.currentDb,
          x: 400,
          y: 100,
          symbol: 'rect', // 使用矩形作為節(jié)點(diǎn)的形狀
          symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
          itemStyle: {
            color: '#e63f32'
          },
        }
      ]
      this.nodePosition(currentNode)
      this.currentId = data.currentDb.id;
      // 根據(jù)父組件傳遞的數(shù)據(jù)創(chuàng)建節(jié)點(diǎn)
      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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },

注：此處使用曲線(xiàn)的原因是因?yàn)榍€(xiàn)可以大大降低兩個(gè)節(jié)點(diǎn)的連線(xiàn)通過(guò)第三個(gè)節(jié)點(diǎn)的問(wèn)題，造成展示錯(cuò)誤（沒(méi)有做link連線(xiàn)的判定）

結(jié)算新節(jié)點(diǎn)的位置函數(shù)

輸入?yún)?shù)nodes是存儲(chǔ)節(jié)點(diǎn)的數(shù)組

 // 計(jì)算節(jié)點(diǎn)位置并添加節(jié)點(diǎn)
    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é)點(diǎn)位置是否已經(jīng)存在，如果存在，則利用隨機(jī)數(shù)在存在的位置上偏移一定的值，再存儲(chǔ)。

節(jié)點(diǎn)位置存儲(chǔ)方式x_y

nodePositions: new Set(), // 使用 Set 來(lái)存儲(chǔ)節(jié)點(diǎn)位置信息

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

  changeData(data) {
      console.log('data.currentDb', data.currentDb)
      // 當(dāng)前節(jié)點(diǎn)的x，y值
      const currentX = data.currentDb.x;
      const currentY = data.currentDb.y;
      if (data.newDbList) {
        const newNodes=[]
        // 使用Set來(lái)創(chuàng)建一個(gè)唯一節(jié)點(diǎn)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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks
        ]
      }
      if (data.oldDbList) {
        const oldNodes=[]
        // 使用Set來(lái)創(chuàng)建一個(gè)唯一節(jié)點(diǎn)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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
          if (!existingNodeIds.has(item.id)) {
            // 如果新節(jié)點(diǎn)的ID不存在于現(xiàn)有節(jié)點(diǎn)中，添加新節(jié)點(diǎn)
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },

與prepareData函數(shù)內(nèi)容差不多，作者此處還未做代碼整合

懸浮在節(jié)點(diǎn)上方時(shí)的處理函數(shù)

 updateNode() {
      this.myChart.on('mouseover', (params) => {
        if (params.dataType === 'node') {
          const currentData = params.data;
          // 先隱藏所有節(jié)點(diǎn)的 label
          this.nodes.forEach(node => {
            if (node.label) {
              node.label.show = false;
            }
          });
          // 顯示當(dāng)前節(jié)點(diǎn)的 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是作者項(xiàng)目的后端請(qǐng)求，請(qǐng)根據(jù)自己實(shí)際情況調(diào)整

主要是通過(guò)改變setOption里面的data來(lái)改變當(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 來(lái)存儲(chǔ)節(jié)點(diǎn)位置信息
      // 當(dāng)前節(jié)點(diǎn)id
      currentId: null
    };
  },
  mounted() {
    console.log('當(dāng)前的節(jié)點(diǎn)', this.data.currentDb)
    console.log('第一次的節(jié)點(diǎn)', this.data)
    const chartContainer = this.$el.querySelector('#chart-container');
    this.myChart = echarts.init(chartContainer);
    this.myChart.clear();
    this.prepareData(this.data); // 準(zhǔn)備節(jié)點(diǎn)和鏈接數(shù)據(jù)
    this.drawChart();
    this.updateNode()
  },
  methods: {
    // 準(zhǔn)備節(jié)點(diǎn)和鏈接數(shù)據(jù)
    prepareData(data) {
      // 當(dāng)前節(jié)點(diǎn)
      const currentNode = [
        {
          id: data.currentDb.id,
          name: data.currentDb.dbName,
          info: data.currentDb,
          x: 400,
          y: 100,
          symbol: 'rect', // 使用矩形作為節(jié)點(diǎn)的形狀
          symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
          itemStyle: {
            color: '#e63f32'
          },
        }
      ]
      this.nodePosition(currentNode)
      this.currentId = data.currentDb.id;
      // 根據(jù)父組件傳遞的數(shù)據(jù)創(chuàng)建節(jié)點(diǎn)
      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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },
    changeData(data) {
      console.log('data.currentDb', data.currentDb)
      // 當(dāng)前節(jié)點(diǎn)的x，y值
      const currentX = data.currentDb.x;
      const currentY = data.currentDb.y;
      if (data.newDbList) {
        const newNodes=[]
        // 使用Set來(lái)創(chuàng)建一個(gè)唯一節(jié)點(diǎn)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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...newLinks
        ]
      }
      if (data.oldDbList) {
        const oldNodes=[]
        // 使用Set來(lái)創(chuàng)建一個(gè)唯一節(jié)點(diǎn)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é)點(diǎn)的形狀
            symbolSize: [40, 30], // 設(shè)置矩形節(jié)點(diǎn)的大小
            itemStyle: {
              color: '#41a5ee'
            },
          }
          if (!existingNodeIds.has(item.id)) {
            // 如果新節(jié)點(diǎn)的ID不存在于現(xiàn)有節(jié)點(diǎn)中，添加新節(jié)點(diǎn)
            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)整曲線(xiàn)的彎曲度
              },
            },
          }
        ))
        this.links = [
          ...this.links,
          ...oldLinks
        ]
      }
    },
    // 計(jì)算節(jié)點(diǎn)位置并添加節(jié)點(diǎn)
    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)庫(kù)關(guān)系圖',
        },
        tooltip: {
          formatter: function (params) {
            return `名稱(chēng): ${params.data.name}<br>
                      別名: ${params.data.info?.dbNickName || '無(wú)'}<br>
                      所在平臺(tái)：${params.data.info?.datasourceSystemName || '無(wú)'}<br>
                      數(shù)據(jù)庫(kù)類(lèi)型：${params.data.info?.dbType || '無(wú)'}<br>
                      備注：${params.data.info?.remark || '無(wú)'}
  `;
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            //   layout: 'force',
            animation: false,
            // data: [this.createTreeData()], // 樹(shù)狀布局需要提供一個(gè)樹(shù)形結(jié)構(gòu)的數(shù)據(jù)
            roam: true,
            label: {
              show: true,
            },
            force: {
              // initLayout: 'circular'
              gravity: 0,
              repulsion: 1000,
              edgeLength: 5
            },
            edgeSymbol: ['circle', 'arrow'], // 使用箭頭作為邊的符號(hào)
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12,
            },
            data: this.nodes,
            links: this.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              // 添加箭頭配置
              arrow: {
                type: 'arrow', // 箭頭的類(lèi)型
                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é)點(diǎn)的 label
          this.nodes.forEach(node => {
            if (node.label) {
              node.label.show = false;
            }
          });
          // 顯示當(dāng)前節(jié)點(diǎn)的 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繪制動(dòng)態(tài)圖的詳細(xì)內(nèi)容，更多關(guān)于Vue Echart動(dòng)態(tài)圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: