正文
力导向图（关系图） 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>
