关系图自动切换TOP10

微信截图_20231114163225.png
微信截图_20231114163258.png

引入使用 "echarts": "^5.4.2",

import MiddleGuanXiTu from './components/MiddleGuanXiTu'
<MiddleGuanXiTu :id="'MiddleGuanXiTu'" :datas="middleGuanXiTuData" @accountFun="accountFun" />
<div v-if="middleGuanXiTuData_Data10.length > 0" class="top10Box">
  <table>
    传播力TOP10
  </table>
  <div class="ul">
    <div v-for="(item, k) in middleGuanXiTuData_Data10" :key="k" class="li"
      :class="{ accountTxt: accountTxt == item.account }">
      <el-image :src="item.pic" fit="cover" style="
        border-radius: 50%;
        width: 30px;
        height: 30px;
        background: #999;
      ">
        <div slot="placeholder">
          <i class="el-icon-loading"></i>
        </div>
        <div slot="error">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <div class="nameDiv" :title="`${item.author}@${item.account}`">
        {{ item.author }}@{{ item.account }}
      </div>
    </div>
  </div>
</div>

top10的css样式

.top10Box {
  position: absolute;
  bottom: 38px;
  right: 0;
  padding: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  width: 180px;

  >table {
    color: #00c4ff;
    font-size: 16px;
  }

  .ul {
    .li {
      margin-top: 8px;
      display: flex;
      width: 100%;

      .el-image {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      i {
        color: #ddd;
      }

      .nameDiv {
        flex: 1;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 30px;
        color: #aaa;
        font-size: 14px;
      }
    }

    .accountTxt {
      .nameDiv {
        color: #F4824B;
        font-weight: 600;
      }
    }
  }
}

.top10Box:hover {
  transition: 0.7s;
  width: 330px !important;
}

组件代码

<template>
  <div :id="id" class="echarts1" @mouseenter="yr = true" @mouseleave="yr = false"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  // startVal 初始值 endVal 最终值 title 标签值
  props: {
    datas: {
      type: [Array, Object],
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      myChart: '',
      Time1: null,
      yr: false,
      k: 0,
      dataCopy: ''
    }
  },
  computed: {},
  watch: {
    // 这是监听json值变化
    datas: {
      // json为监听参数名
      handler: function (val, oldVal) {
        // 不能用箭头函数
        this.echartsFun(val)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.Time1)
  },
  methods: {
    echartsFun(val) {
      this.dataCopy = val
      // console.log(JSON.parse(JSON.stringify(val)))
      echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
      this.myChart = echarts.init(document.getElementById(this.id))
      this.myChart.clear()
      // let colorArr = [
      //   '#00c4ff',
      //   '#00c4ff',
      //   '#00c4ff',
      //   '#4992FF',
      //   '#7CFFB2',
      //   '#FDDD60',
      //   '#FF6E76',
      //   '#57D9F9',
      //   '#4992FF',
      //   '#7CFFB2',
      //   '#FDDD60',
      //   '#FF6E76',
      //   '#57D9F9'
      // ]
      let colorArr = ['red', '#a50082', '#2d9e49', '#00a1e9', '#fbbc18']
      const option = {
        color: colorArr,
        animationDuration: 1000, // 初始动画时长
        animationDurationUpdate: 2500, // 更新动画时长
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '',
            type: 'graph',
            // layout: 'force', // 布局 circular/force/
            // force: {
            //   repulsion: 50,
            //   gravity: 0.5,
            //   friction: 0.1,
            //   edgeLength: 100 // 边的两个节点之间的距离
            // },
            selectedMode: true,
            data: val.nodes,
            links: val.links,
            categories: val.categories,
            animationDuration: 0,
            roam: true, // 鼠标缩放
            legendHoverLink: true, // 鼠标滑过是否启用图例 hover 时的联动高亮。
            label: {
              show: false,
              position: 'right',
              formatter: '{b}',
              color: 'inherit'
            },
            lineStyle: {
              color: '#eee',
              width: 1,
              opacity: 0.1
            },
            emphasis: {
              scale: 1.1,
              focus: 'adjacency',
              lineStyle: {
                width: 3
              }
            }
          }
        ],
        toolbox: {
          show: false
        }
      }
      this.myChart.setOption(option, true) // true无数据时更新试图
      setTimeout(() => {
        this.shiTu()
      }, 3000)
    },
    shiTu() { // 启动定时器操作视图移动
      let top10 = this.dataCopy.top10// 前10个
      console.log(JSON.parse(JSON.stringify(top10)))
      this.graphroamFun(top10[0].account)// account关系图点的唯一名称
      // console.log(top10[0].account)
      clearInterval(this.Time1)
      this.Time1 = setInterval(() => {
        this.myChart.setOption({
          series: [{
            zoom: 1,
            center: [0, 0]
          }]
        }) // true无数据时更新试图
        setTimeout(() => {
          if (this.yr == false) {
            this.k++
            if (this.k >= 10) {
              this.k = 0
            }
            this.graphroamFun(top10[this.k].account)
          }
        }, 2000)
      }, 7000)
    },
    /** 视图移动到某个点、3000以内的点移动才不卡，并且看得出来移动效果。 */
    graphroamFun(nodeName) {
      this.$emit("accountFun", nodeName)
      // 获取当前的 option 配置
      let option = this.myChart.getOption()
      // 遍历 nodes 数组，查找 nodeName 的索引
      let nodeIndex = -1
      let item
      option.series[0].data.forEach(function (node, index) {
        if (node.name === nodeName) {
          nodeIndex = index
          item = node
        }
      })
      // 如果找到了 nodeName 节点，将其放大
      if (nodeIndex !== -1) {
        this.myChart.setOption(option)
        // 触发关系图缩放并移动到该节点
        // console.log(item)
        // 修改中心点和缩放比例
        option.series[0].center = [item.x, item.y]
        option.series[0].zoom = 8
        // 应用修改后的配置项
        this.myChart.setOption(option)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  position: relative;
}
</style>