echart 图谱_vue + echarts 实现有层级关系图的图谱
因为接下来要做的事是一个关系图的东西，所以自己先写一个小demo，特次记录一下，主要实现的点有如下：
节点的颜色的更改
自定义提示框配置，以及在里面的点击事件
提示框中的点击事件可以获取到vue实例
图列的自定义
先上效果图
截屏2020-11-18下午4.31.28.png
我们说关键吧：
颜色的配置，直接配置color ，它是一个数组，不同级别的的节点根据数组来
color:['red', 'orange', 'green', 'blue', 'purple'],
自定义提示框配置，以及在里面的点击事件
需要配置option.tooltip.formatter
formatter: function(params) {
// console.log(params , window , this)
var htmlStr = `
return htmlStr;
},
⚠️注意一下，这里一不小心就很容易报错：handleClick is not defined，因为这个方法是要找window上的，所以我们一定要确保window上有这个方法
提示框中的点击事件可以获取到vue实例
我都想好了，说不定在handleClick事件里面要获取到vue实例的对象呢，那怎么可以获取到vue实例呢？嘻嘻本仙女有办法，我们可以在挂载的时候写上这么一句
window.handleClick = this.handleClick;
然后在销毁的时候
window.handleClick = null;
完美解决，至少我是这样认为的
自定义图列的点击事件，让原图列点击事件无路可走
因为我要的目的是点击事件之后重新渲染页面，所以我就用 v-if 来控制视图区，用来实现自己的业务逻辑
好了，废话不多说，知道你们想要源码，那我就贴源码咯
导出
// 测试数据，应当要封装成一个js导入进来
var categories = [];
for (var i = 0; i < 5; i++) {
categories[i] = {
name: '类目' + i
};
}
var data= [{
name: '父亲节点',
category: 0,
}, {
name: '儿子2',
category: 1,
}, {
name: '儿子1',
category: 1,
}, {
name: '孙子2',
category: 2,
}, {
name: '孙子1',
category: 2,
}, {
name: '曾孙1',
category: 3,
}]
var option = {
// 图的标题
title: {
text: 'ECharts 关系图',
show:false
},
// 提示框的配置
tooltip: {
enterable: true, // 鼠标可移入tooltip中
axisPointer: {
type: 'cross',
lineStyle: {
type: 'solid',
width: 1,
color: '#eee'
}
},
padding:0,
formatter: function(params) {
// console.log(params , windows , this)
var htmlStr = `
return htmlStr;
},
//tooltip到鼠标的距离
position: function (point) {
return [point[0]+2, point[1]+2];
}
// show:false
},
// 工具箱
toolbox: {
// 显示工具箱
show: false,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图片
saveAsImage: {
show: true
}
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a,index) {
if(index > 2 || index === 0){
return ''
}
return a.name;
}),
icon:'circle',
}],
color:['red', 'orange', 'green', 'blue', 'purple'],
series: [{
type: 'graph', // 类型:关系图
layout: 'force', //图的布局，类型为力导图
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: [ 'arrow','circle'],
edgeSymbolSize: [10,2],
force: {
repulsion: 2500,//子节点之间的间距
edgeLength: 215 //[105, 50] 连线的长度
},
draggable: true,
//线图颜色及文字颜色大小
lineStyle: {
normal: {
width: 1,
color: '#ccc',
}
},
//线段上的值，取name字段
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
},
}
},
label: {
// position: ['50%', '50%'],
normal: {
show: true,
//节点里面字体的大小
textStyle: {
fontSize: 10
},
color:"#fff",
formatter: function (val) {
var strs = val.data.name.split(''); //字符串数组
var str = ''
for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
str += s;
if(i % 2 === 0)
{
str += '\n'; //按需要求余
}
}
return str
},
}
},
symbolSize: function (value, params) {//改变节点大小
var SizeList = [160, 110, 80, 55, 60];
return SizeList[params.data.category]
},
// 数据
data:data,
links: [{
source: '父亲节点',
target: '儿子2',
name: '我是'
}, {
source: '父亲节点',
target: '儿子1',
name: '一条'
}, {
source: '儿子1',
target: '孙子2',
name: '没有'
}, {
source: '儿子1',
target: '孙子1',
name: '感情'
}, {
source: '孙子1',
target: '曾孙1',
name: '的线'
}],
categories: categories,
}]
}
const vm = {
name: 'App',
data(){
return {
flag:true,
}
},
mounted(){
console.log('mounted')
window.handleClick = this.handleClick;
this.test()
},
methods:{
handleClick(){
console.log('click',this)
},
test(){
let _this = this
var myChart = this.$echarts.init(document.getElementById('main'));
myChart.setOption(option);
myChart.on('legendselectchanged', function(params) {
_this.flag = false
var select_value = Object.values(params.selected);
var index = select_value.findIndex(ele => !ele)
if(index === -1){
option.series[0].data = data
}
else{
var arr = data.filter(ele => ele.category <= 1)
option.series[0].data = arr
}
this.setOption(option)
_this.flag = true
});
}
},
beforeDeatory(){
window.handleClick = null
}
}
export default vm;
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
margin:0;
height: 100%;
width: 100%;
min-height: 800px;
}
.tooltip{
border-radius: 4px;
box-shadow: 2px 4px 6px 6px rgba(0, 0, 0, 0.2);
background: #fff;
color:#999aaa;
padding: 20px;
font-size: 16px;
}
.title-box{
display: flex;
align-items: center;
justify-content: space-between;
}
.title-right{
pointer-events: all;
}
.title-left{
font-weight: 600;
}
.title-right{
color: blue;
}
.content-line{
line-height: 24px;
}
最后的最后，各位键盘留情，作为前端的小渣渣，给点活路，原创作品不容易，请多多支持