VUE ECharts人際關系圖

1. 概述

1.1 說明

　　項目中需要對某個人的人際關系進行展示，故使用echarts中的關系圖進行處理此需求。

2. 代碼

2.1 代碼示例

<template>
  <div class="echartLayout">
    <div id="container" style="width:100%; height:100%; overflow:hidden;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import imgSrc from '../../assets/img/echar_person.png'
  export default {
    name: "personRelation",
    data() {
      return {
        myChart: null,
        chartData:[],
        chartLink:[]
      }
    },
    mounted() {
      this.initEchart()
    },
    methods: {
      initEchart() {
        let dom = document.getElementById("container");
        this.myChart = echarts.init(dom);
        this.chartData=this.dataEChart();
        this.chartLink=this.linkEChart();
        let option = {
          tooltip:{
            show:false
          },
          series: [
            {
              edgeLabel: {
                normal: {
                  formatter:"{c}",
                  show:true
                }
              },
              edgeSymbol:'circle',
              force:{
                repulsion:2000
              },
              layout:'force',
              roam:true,
              itemStyle:{
                normal:{
                  color: '#6495ED'
                },
                //鼠標放上去有陰影效果
                emphasis: {
                  shadowColor: '#3721db',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 40,
                },
              },
              label:{
                normal:{
                  show:true
                }
              },
              //頭像
              symbol: `image://${imgSrc}`,
              symbolSize:86,
              type:'graph',
              links: this.chartLink,
              data:this.chartData
            }
          ]
        };
        this.myChart.setOption(option);
        this.myChart.on('click', function (params) {
          console.log(params.data)//獲取點擊的頭像的數據信息
        });
      },
      /**
       * 數據集合
       */
      dataEChart(){
        let data = [
          {
            name: '張1',
            symbolSize: 76,
            id: '1',
          },
          {
            name: '張2',
            id: '2',
          },
          {
            name: '張3',
            id: '3',
          },
          {
            name: '張4',
            id: '4',
          },
          {
            name: '張5',
            id: '5',
          },
          {
            name: '張6',
            id: '6',
          },
          {
            name: '張7',
            id: '7',
          },
          {
            name: '張6',
            id: '8',
          },
        ];
        return data;
      },
      /**
       * 關系數據集合
       */
      linkEChart(){
        let dataLink=[
          {value: "同事",source: "1",target: "2"},
          {value: "同事",source: "1",target: "3"},
          {value: "同事",source: "1",target: "4"},
          {value: "同學",source: "1",target: "5"},
          {value: "同學",source: "1",target: "6"},
          {value: "同學",source: "1",target: "7"},
          {value: "爸爸",source: "1",target: "8"},
        ];
        return dataLink;
      },
    }
  }
</script>

<style scoped>
  .echartLayout {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>

2.2 結果展示