在html中添加力导向图,echart力导向图的绘制

import echarts from 'echarts';

export default {

props: {

value: String

},

data () {

return {

list1: [{

'serviceCode': 10000,

'serviceName': '总行前置1',

'psize': 20,

'csize': 30,

'category': 0,

'name': '总行前置1'

}, {

'serviceCode': 10001,

'serviceName': '总行前置2',

'psize': 16,

'csize': 30,

'category': 0,

'name': '总行前置2'

}, {

'serviceCode': 10002,

'serviceName': '总行前置3',

'psize': 56,

'csize': 30,

'category': 1,

'name': '总行前置3'

}],

list2: [{

'sourceId': '10000',

'targetId': '10001'

}, {

'targetId': '10000',

'sourceId': '10001'

}]

}

},

mounted () {

this.drawLine();

this.GetRandom(this.list1);

},

methods: {

drawLine () {

this.GetRandom(this.list1);

var myChart = echarts.init(document.getElementById('relate_graph2'));

var option = {

animationDurationUpdate: 1500,

animationEasingUpdate: 'quinticInOut',

color:['#83e0ff', '#45f5ce'],

legend: {

show: true,

data: [

{name: '接口', textStyle:{color:'#333'}},

{name: '服务', textStyle:{color:'#333'}}

]

},

series : [{

type: 'graph',

layout: 'none',

legendHoverLink : true, //是否启用图例 hover(悬停) 时的联动高亮。

hoverAnimation : true, //是否开启鼠标悬停节点的显示动画

data: this.list1.map(function (node) {

return {

x: node.x,

y: node.y,

id: node.serviceCode,

symbolSize: node.psize,

symbolSize1: node.csize,

category: node.category,

itemStyle: {

normal: {

color: node.color

}

}

};

}),

edges: this.list2.map(function (edge) {

return {

source: edge.sourceId,

target: edge.targetId

};

}),

label : { //=============图形上的文本标签

normal : {

show : true, //是否显示标签。

position : 'outside', //标签的位置。['50%', '50%'] [x,y]

textStyle : { //标签的字体样式

// color : '#333', //字体颜色

fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜

fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200

fontFamily : 'sans-serif', //文字的字体系列

fontSize : 12 //字体大小

}

},

emphasis : { //高亮状态

textStyle : { //标签的字体样式

// color : '#a25fbc', //字体颜色

fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜

fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200

fontFamily : 'sans-serif', //文字的字体系列

fontSize : 12 //字体大小

}

}

},

edgeSymbol: [ 'arrow', 'none' ],

roam: true,

focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点

lineStyle : { //==========关系边的公用线条样式。

normal : {

color: '#333',

width : '1',

type : 'solid', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)

curveness : 0.3, //线条的曲线程度，从0到1

opacity : 0.6

// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5

},

emphasis : { //高亮状态

width : '2',

color: '#333',

type : 'solid', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)

curveness : 0.3, //线条的曲线程度，从0到1

opacity : 1

}

},

edgeLabel : { //==============线条的边缘标签

normal : {

show : false,

textStyle: {

fontSize: 10

}

},

emphasis : { //高亮状态

show : false,

textStyle: {

fontSize: 12

}

}

},

categories:[

{name: '接口'},

{name: '服务'}

]

}],

tooltip: { //==============显示鼠标移入的显示

triggerOn: 'mousemove', //点击 mousemove

enterable: true,

hideDelay: 50,

padding: 0,

confine: true,

formatter: function(params, ticket, callback) {

if (params.dataType === 'node') {

var html = '';

html += '

依赖的服务数量为：' + params.data.symbolSize + '

'

html += '

被依赖的服务数量为：' + params.data.symbolSize1 + '

'

html += '

'

return html;

} else if (params.dataType === 'edge') {

var html1 = '';

html1 += '

服务源代码为：' + params.data.source + '

';

return html1;

}

}

}

}

myChart.setOption(option);

},

GetRandom (list) {

for (var i = 0; i < this.list1.length; i++) {

var x = Math.floor(Math.random() * 400);

var y = Math.floor(Math.random() * 400);

var colorAll = ['#a75ebc', '#0025ff', '#ff7e00', '#289c00', '#cccccc'];

var n = Math.floor(Math.random() * 3);

var color = colorAll[n];

this.list1[i].x = x;

this.list1[i].y = y;

this.list1[i].color = color;

}

}

}

}