之前写了一篇文章讲怎么在关系图里应用markLine作为底图，并且可能随着关系图的挪动而挪动
前文链接
最近来了新需要，如下
1.点击某个节点，只留下与之相干的节点，再次点击，复原原样
2.鼠标挪动节点下来与之相干的线条高亮
3.把底图的标识文字居中
4.增加一个下拉框筛选要展现的节点。
其实总结下来，第一个需要以及第二个需要和最初一个需要一部分是共通的，也就是其实都是对ehcarts所展现的数据的操作，不同的中央在于:第一个和第二个需要只须要思考数据就行，最初一个需要须要思考底图也就是markLine的挪动以及某个区域内的节点数据没有了当前整体的挪动，也就是每一次点击树状下拉框，都要从新计算每个节点和markLine底图的地位。
本文章并非手把手教会怎么做出图中的成果，只是解说做这个我的项目中遇到的问题和具体的解决思路。
首先解决第一个需要，也就是点击某个节点，只展现这个节点相干的数据
解决思路：首先必定是拿到点击事件，而后点击节点的时候，拿到这个节点相干的数据，依据与之相干的某个筛选条件，把无关的数据筛选进去，赋值给echarts,数据就展示进去了。
第二点是再次点击的时候，复原到点击之前的数据。
解决思路：数据隔离，本地保留一份展现数据的拷贝，而后点击的时候，应用lodash的cloneDeep办法拷贝本地的拷贝数据，点击的时候给点击的项计数+1，同时把本地数据的拷贝中的对应项的计数+1。当某个节点的计数为2的时候，清空所有计数。
也就是点击的时候，把点击节点的计数+1，依据这个节点的某个条件筛选出无关的其余节点。
再次点击的时候，如果有节点的计数为2，就把本地未经筛选的数据赋值回来，并且清空所有计数。
上代码解说
//html 代码<div id="room-bar-chart" echarts [options]="echartOptions" (chartMouseOver)="mouseOver($event,'over')" (chartMouseOut)="mouseOver($event,'out')" (chartInit)="InitChart($event)" (chartClick)="chartClick($event)" (chartContextMenu)="chartDbClick($event,menu)" style="height: 650px;"></div>//要看的其实就是chartClick事件//tschartClick($event: any){ if($event.dataType==="edge") return //点到线的时候就不做操作 let series = _.cloneDeep(this.echartOptions.series[0]);//备份以后echarts图的series let name = $event.name//拿到点击节点的名字 let relative: any[] = []//保留筛选出不论是source还是target与点击项无关的数据 edgeList.forEach((item,index,array)=>{//edgeList就是节点关系的数据 if(item.source===name||item.target===name){//如果指标节点或者起始节点是点击节点的name relative.push(item)//将其退出到关系数组中保留 } }) let seriesData:Array<any> = series.data//拿到现有echarts图的数据 let dataArray = []//保留 展现的数据里与relative无关的数据 for (let w = 0; w < seriesData.length; w++) {//循环本体的数据 let item = seriesData[w]; let index = w; if (item.name == name) {//找到本体上点击的数据 item.count++ this.echartOptions.series[0].data[index].count++//数据改变到原始数据上 } else {//如果不是，把本体上其余节点的计数清0 this.echartOptions.series[0].data[index].count = 0//数据改变到原始数据上 } if (this.echartOptions.series[0].data[index].count >= 2) {//如果同一个数据点击了两次 this.echartOptions.series[0].data.forEach((element: { count: number; }) => {//把所有数据的count计数清空 element.count = 0 }); this.setEchartsOption({ series: series })//重绘所有数据 重绘办法在上一篇文章里有。 return } for (let x = 0; x < relative.length; x++) { let data = relative[x]; if (item.name == data.source || item.name == data.target) { dataArray.push(item) } } } series.data = _.uniq(dataArray)//去重 this.setEchartsOption({series:series}) }这样点击某个节点的时候就可能实现第一次点击保留相干节点，第二次点击复原原样。
第二个需要，鼠标挪动下来的时候，高亮与之相干的线
解决思路：大体同第一个需要，捕捉鼠标挪动到某个节点之上的事件，筛选出与节点相干的线的数据，而后扭转线条的色彩就行，鼠标移出的时候，在把色彩改回原来的样子。
上代码解说
//html 代码<div id="room-bar-chart" echarts [options]="echartOptions" (chartMouseOver)="mouseOver($event,'over')" (chartMouseOut)="mouseOver($event,'out')" (chartInit)="InitChart($event)" (chartClick)="chartClick($event)" (chartContextMenu)="chartDbClick($event,menu)" style="height: 650px;"></div>//关注mouseOver事件//ts /** 鼠标挪动到节点上高亮与之相干的线 */ mouseOver($event: any, type: string) { if ($event.dataType === "node") {//node 代表是节点，如果是线的话不进行操作 //数据的变动是否须要同步到原始数据上是须要考量的，这里应用深拷贝复制一份，和间接应用原始数据成果雷同。 let series = this.echartsInstance.getOption().series[0] let name = $event.name if (type === "over") {//因为移入移出我都用同一个办法，所以须要用参数判断是移入还是移出 // console.log("series",series) series.links.forEach((item: { source: any; target: any; lineStyle: { curveness: any; color?: string; width?: number; opacity?: number; }; }) => { if (item.source === name || item.target === name) {//如果无关 item.lineStyle = { color: "#39adfa", width: 1.5, opacity: 1, curveness: item.lineStyle ? item.lineStyle.curveness : 0 } } }) // console.log('鼠标移入series',series) } else { //如果单纯的数据赋值，比方不要上面的series.links的循环，外层的linkStyle款式是无奈利用 //到内层的links.lineStyle上的，所以须要把内层的links.lineSyle上的款式都加上才行 // series = this.echartsInstance.getOption().series[0] series.links.forEach((item: { source: any; target: any; lineStyle: { curveness: any; color?: string; opacity?: number; width?: number; }; }) => { if (item.source === name || item.target === name) { item.lineStyle = { color: "#aaa", curveness: item.lineStyle ? item.lineStyle.curveness : 0, opacity: 0.7, width: 0.8, } } }) } this.setEchartsOption({ series: series }) } else if ($event.dataType === "edge") { } }第三个需要，把markLine的文字居中
解决思路：一开始的想法就是对着官网的文档， 想尽办法想要通过挪动markLine的label，后果官网文档里的markLine的label属性十分麻烦，position为start或者end的时候x轴方向无奈挪动，而为insideStartTop这类线条上属性，字体会旋转90°，且不反对rotate属性扭转字体旋转角度，十分的头疼,如下图