vue + echart 之热力图，关系图

注意：在默认引入echart 包的时候并没有关系图表，需要自己手动去官网自定义下载。我这边就是这么操作的

1.引入

2.使用

 

//初始化图表

initGraph() {

var chart = echarts.init(this.$refs.graph)

var graph = this.ChartData;

var newArr = this.ChartData.nodes;

for (var i = newArr.length - 1; i >= 0; i--) {

var targetNode = newArr[i];

for (var j = 0; j < i; j++) {

if (targetNode.name == newArr[j].name) {

newArr.splice(i, 1);

break;

}

}

}

var categories = [];

graph.nodes.map((node, index) => {

node.itemStyle = null;

node.size = null;

if (0 < node.value && node.value < 100) {

// console.log('0-100')

node.size = 10;

graph.nodes[index].symbolSize = node.size; //大小设置

graph.nodes[index].itemStyle = {

normal: {

color: '#c23531' //点的颜色设置

}

}

} else if (100 < node.value && node.value < 1000) {

// console.log('100-1000')

node.size = 20

graph.nodes[index].symbolSize = node.size; //大小设置

graph.nodes[index].itemStyle = {

normal: {

color: '#bda29a' //点的颜色设置

}

}

} else if (1000 < node.value && node.value < 10000) {

node.size = 30

graph.nodes[index].symbolSize = node.size; //大小设置

graph.nodes[index].itemStyle = {

normal: {

color: '#61a0a8' //点的颜色设置

}

}

} else if (10000 < node.value && node.value < 50000) {

node.size = 50

graph.nodes[index].symbolSize = node.size; //大小设置

graph.nodes[index].itemStyle = {

normal: {

color: '#d48265' //点的颜色设置

}

}

}else if( node.value == 0){

graph.nodes[index].symbolSize = 7; //大小设置

graph.nodes[index].itemStyle = {

normal: {

color: '#00BFFF' //点的颜色设置

}

}

}

 

// node.label = {

// //点文字的显示设置

// normal: {

// show: node.value > 500,

// color: 'blue'

// }

// };

// Use random x, y

node.x = node.y = null;

node.draggable = true;

})

// console.log(graph)

chart.setOption({

title: {

text: '文件外发关系图',

subtext: '',

top: 'top',

left: 'left'

},

//鼠标移动到点上显示

tooltip: {

trigger :'item',

formatter: function(params,e,c){

// console.log(params); 这里自己可以处理显示的内容

var targetValue = '';

var sourcetValue = '';

if(params.data.target){

// console.log(params.target)

graph.nodes.map((el,index)=>{

if(params.data.target == el.name ){

targetValue =el.value;

}

if(params.data.source == el.name ){

sourcetValue =el.value;

}

if(targetValue>sourcetValue){

//数值大小显示大小

params.data.name = params.data.target +'>'+ params.data.source

}else{

params.data.name = params.data.target +'<'+ params.data.source

}

})

return params.data.name

}else{

return params.data.name +':'+ params.data.value

}

}

},

legend: [{

// selectedMode: 'single',

data: categories.map(function(a) {

return a.name;

})

}],

animationDuration: 1500,

animationEasingUpdate: 'quinticInOut',

series: [{

name: '',

type: 'graph',

// layout: 'none',

layout: 'force',//这里显示的布局

data: graph.nodes,//点

links: graph.links,//线

categories: categories,//分类

roam: true,

focusNodeAdjacency: true,

// edgeSymbol: ['arrow',''],

itemStyle: {

normal: {

borderColor: '#fff',

borderWidth: 1,

shadowBlur: 1,

shadowColor: 'rgba(0, 0, 0, 0.3)'

}

},

label: {

position: 'right',

formatter: '{b}:{c}',

// normal: {

// // show: true //线条显示的文字

// color:'green'

// }

},

force: {

repulsion: 100

},

lineStyle: {

// type:'dashed'

// color: 'source',

// curveness: 0.1

},

emphasis: {

//鼠标移动过去线条的显示

formatter: '{b}:{c}',

label:{

normal: {

show: true //线条显示的文字

}

},

lineStyle: {

width: 6,

}

}

}]

})

}