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 = `

汇报状态

查看详情

描述： ${params.data.name}

编码： 是否已汇报的状态描述

类型： 是否已汇报的状态描述

长度： 是否已汇报的状态描述

`

return htmlStr;

},

⚠️注意一下，这里一不小心就很容易报错：handleClick is not defined，因为这个方法是要找window上的，所以我们一定要确保window上有这个方法

提示框中的点击事件可以获取到vue实例

我都想好了，说不定在handleClick事件里面要获取到vue实例的对象呢，那怎么可以获取到vue实例呢？嘻嘻😁本仙女有办法，我们可以在挂载的时候写上这么一句

window.handleClick = this.handleClick;

然后在销毁的时候

window.handleClick = null;

完美解决，至少我是这样认为的

自定义图列的点击事件，让原图列点击事件无路可走

因为我要的目的是点击事件之后重新渲染页面