<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
was 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 "Name:" + x.data.name + '<br/>' + "Address:" + x.data.address
}else if(x.dataType=="edge"){
return "relationship:" + x.data.dblx
}
}
},
legend:{
x:'left',
},
series: [{
type: 'graph', // title
layout: 'force',
//roam: true,
animationDurationUpdate: 1500,
// animationEasingUpdate: 'quinticInOut',
top: 'top', // vertical position
left: 'left', // left position
symbol:'image://'+imga,
symbolSize: 35,
roam: true, // whether to open the mouse to zoom and pan roaming
focusNodeAdjacency: true,
edgeSymbol: ['', 'arrow'],
force: {// force the guide basic configuration
layoutAnimation:true,
// xAxisIndex: 0, // x-axis coordinate a variety of coordinate system axis coordinate Options
// yAxisIndex: 0, // y-axis coordinate
gravity: 0.02, // node to the center of gravity by the factor. More to the center point of the value of the larger node closer.
edgeLength: 30, the distance between two nodes // edge, this distance will be affected by repulsion. [10, 50]. The smaller the value the longer the length
repulsion: repulsion factor between 300 // node. It expressed support for an array of repulsion range, the greater the value the greater the repulsion.
// repulsion: 3000, // repulsion factor between nodes. It expressed support for an array of repulsion range, the greater the value the greater the repulsion.
// edgeLength: 80 // distance between the edges of two nodes, this distance will be affected by repulsion. [10, 50]. The smaller the value the longer the length
},
draggable: true, // indicating whether the node can drag
itemStyle: {
normal: {
color: '#4b565b'
}
},
edge label: {
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%;
.joke{
width:40%;
height:43%;
border:1px solid red;
margin: 0 auto;
}
}
</style>