力导向图（关系图） echarts的运用

<template>

<div class="demo">

<div id="grap" class="grap"></div>

</div>

 

</template>

<script>

import { mapMutations } from 'vuex'

import api from "@/api/qingpu-api";

import list from './datalist';

import imga from '../home/images/product.png'

export default {

name:'demo',

props:["list"],

data(){

return{

}

},

methods:{

init(){

var this_ = this

        var data = list.payload.data

        data.edges.forEach(element => {

            element.source = element.bzrmc

            element.target = element.khmc

            element.name = element.dblx

        })

     //console.log(data)

        let option2 = {

            title: {

                text: 'aaa'

            },

            tooltip: {

                show: true,

                formatter:function(x){

                    console.log(x)

                 if(x.dataType=="node"){

return "公司名称 : "+x.data.name+'<br/>'+"公司地址："+x.data.address

}else if(x.dataType=="edge"){

return "关系:"+x.data.dblx

}

                }

            },

            legend:{

x:'left',

            },

            series: [{

                type: 'graph', //标题

                layout: 'force',

                //roam: true,

                animationDurationUpdate: 1500,

// animationEasingUpdate: 'quinticInOut',

                top: 'top',//上下位置

                left: 'left',//左右位置

                symbol:'image://'+imga,

                symbolSize: 35,

                roam: true,//是否开启鼠标缩放和平移漫游

                focusNodeAdjacency: true,

                edgeSymbol: ['', 'arrow'],

                force: { //力引导图基本配置

                 layoutAnimation:true,

                    // xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项

                    // yAxisIndex : 0, //y轴坐标

                    gravity:0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。

                    edgeLength: 30, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长

                    repulsion: 300 //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。

                    // repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。

                    // edgeLength: 80 //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长

                },

                draggable: true,//指示节点是否可以拖动

                itemStyle: {

                    normal: {

                        color: '#4b565b'

                    }

                },

                edgeLabel: {

                    normal: {

                        textStyle: {

                            fontSize: 10,

                            color:'black',

                            margin: 'auto',

                        },

                        

                        show: true,

                        formatter(x) {

                            return x.data.name

                        }

                    }

                },

                label: {

                    normal: {

                        show: true,

                        position:'bottom',

                    }

                },

                data: data.vertices,

                links: data.edges

            }]

        }

const chartObj2 = this_.$echarts.init(document.getElementById('grap'))

chartObj2.setOption(option2);

window.addEventListener('resize',function() {chartObj2.resize()});

}

},

mounted(){

this.init()

}

}

</script>

<style lang="less" scoped>

.demo{

width:100%;

height:100%;

.grap{

width:40%;

height:43%;

border:1px solid red;

margin: 0 auto;

}

}

</style>