力导向图（关系图） echarts的运用
2024-08-30 13:15:13
<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>
最新文章
- 支持自动切换的tab标签代码札记
- Lingo语法
- ural 2064. Caterpillars
- ckeditor简单的演示
- Windows7：Visual Studio 2008试用版的评估期已经结束解决方法
- PAT IO-04 混合类型数据格式化输入(5)
- jquery 日期控件
- InkPicture 控件使用_01
- Hadoop InputFormat
- TTS异步+同步
- hibernate flushMode 错误
- JDK内置工具使用
- Java 获取当前系统的时间
- bzoj1563: [NOI2009]诗人小G 决策单调性(1D1D)
- jsp配置文件数据信息读取
- shell 变量的默认值
- 接口详解例子代码（附Java1.8的接口新特性）
- 1036. [ZJOI2008]树的统计【树链剖分】
- CSS3 - chrome，傲游，360极速浏览器不支持小于12px的字号的解决办法
- WCF实现多个服务