import echarts from 'echarts'
import $ from "jquery";
export default{
init:function(data){
var option;
var myChart = echarts.init(document.getElementById("myDiagramDiv"));
myChart.clear();
var nodes = [];
var links = [];
var nodesList = [];//鼠标浮动联动显示效果节点
var initImg = {
fenzhijigou: "#d95546",
}
getData();
//根据节点返回节点大小
function returnImg(type){
var img;
switch(type){
case 6:img = initImg.fenzhijigou;break;
default:img = initImg.fenzhijigou;break;
}
return img;
}
function getData(){
//格式化节点
$.each(data.nodes,function(i,node){
nodes.push({
label:node.text,
symbolSize: 30,
itemStyle:{
normal:{
color: returnImg(node.type),
opacity:1//设置节点透明度 由于节点是图片 这里替换图片
},
},
label: {
normal: {
show: true,
fontSize: 12,
position: 'bottom',
color: '#6e6e6e',
formatter: function (param) {
return node.text.replace(/(.{8})(?=.)/g, '$1\n')
}
}
}
});
});
//格式化线
$.each(data.links, function(i, link) {
var symbol = ['none', 'arrow'];
links.push({
source: link.source,
target: link.target,
name:link.text,
symbol: symbol,
lineStyle: {
normal: {
width: 1,
color: '#999999',
curveness: link.curveness
}
},
label: {
normal: {
show: true,
color: '#26a9f1',
formatter: function () {
return link.text;
}
}
}
});
});
}
drawEchart(nodes,links);
function drawEchart(nodes,links){
option={
tooltip: {
triggerOn: 'click', //点击 mousemove
enterable: true,
hideDelay: 50,
padding: 0,
confine: true,
formatter: function(params, ticket, callback) {
if (params.dataType == 'node') {
/* UserClient.get("/business/baseinfo", param)
.then(response => {
if (response.code == 200) {
var data = response.data[0]; */
var html = '';
html+='<div><h5>北京股份有限公司</h5>'
html+=' <div class="line_show"></div>'
html+=' <div>'
html+=' <table>'
html+=' <tr><td>法人代表</td><td>李</td></tr>'
html+=' <tr><td>法人代表</td><td>李</td></tr>'
html+=' <tr><td>法人代表</td><td>李</td></tr>'
html+=' </table>'
html+=' </div>'
html+=' <div class="line_show"></div>'
html+=' <h5>风险提示</h5>'
html+=' <div class="fxdiv">'
html+=' <span>风险提示4</span>'
html+=' </div>'
html+=' <div class="line_show"></div>'
html+=' <h5>舆情风险</h5>'
html+=' <div class="fxdiv">'
html+=' <span>风险提示4</span>'
html+=' </div>'
html+='</div>'
return html;
/* } else {
console.info(response.desc);
}
})
.catch(e => {
console.info(e);
});*/
}
},
position: function(pos, params, dom, rect, size) {
let yPos = 0
let xPos = 0
if (pos[0] <= (size.viewSize[0] / 2)) {
xPos = pos[0] + 20;
} else {
xPos = pos[0] - dom.offsetWidth - 20;
}
if (pos[1] <= size.viewSize[1] - 20 - dom.offsetHeight) {
yPos = pos[1] + 20;
} else if (pos[1] <= size.viewSize[1] / 2) {
yPos = pos[1] - (dom.offsetWidth / 3);
} else if (pos[1] < 20 + dom.offsetHeight) {
yPos = pos[1] - (dom.offsetWidth / 3) * 2;
} else {
yPos = pos[1] - 20 - dom.offsetHeight;
}
return [xPos, yPos]
}
},
series: [{
type: 'graph',//图表类型
layout: 'force',//echarts3的变化，force是力向图，circular是和弦图
draggable: true,//指示节点是否可以拖动
data: nodes,//节点数据
links: links,//边、联系数据
legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
//hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
coordinateSystem : null,//坐标系可选
xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
yAxisIndex : 0, //y轴坐标
//focusNodeAdjacency:true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
label: {//图形上的文本标签，可用于说明图形的一些数据信息
normal: {
show : true,//显示
position: 'right',//相对于节点标签的位置
//回调函数，你期望节点标签上显示什么
/* formatter: function(params){
return params.data.label;
},*/
}
},
//节点的style
itemStyle:{
normal:{
opacity:1,//设置透明度为0.8，为0时不绘制
},
},
// 关系边的公用线条样式
lineStyle: {
normal: {
show : true,
color: 'target',//决定边的颜色是与起点相同还是与终点相同
// curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
}
},
force: {
//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
repulsion : 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity : 0,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength :[150,300],//[100,200]边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation : false
//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
}
} ]
}
}
myChart.setOption(option);
}
}