<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>