• VUE ECharts人际关系图


    1. 概述

    1.1 说明

      项目中需要对某个人的人际关系进行展示,故使用echarts中的关系图进行处理此需求。

    2. 代码

    2.1 代码示例

    <template>
      <div class="echartLayout">
        <div id="container" style="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 结果展示

      

  • 相关阅读:
    2020年,初级、中级 Android 工程师可能因离职而失业吗?
    Android 后台运行白名单,优雅实现保活
    使用DataBinding还在为数据处理头疼?这篇文章帮你解决问题
    Android 7.x Toast BadTokenException处理
    2017-2020历年字节跳动Android面试真题解析(累计下载1082万次,持续更新中)
    Flutter 尺寸限制类容器总结:这可能是全网解析最全的一篇文章,没有之一!
    并行收集器
    高性能索引策略
    Innodb简介
    索引的优点
  • 原文地址:https://www.cnblogs.com/ajuan/p/10917835.html
Copyright © 2020-2023  润新知