之前写了一篇文章讲怎么在关系图里应用 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 事件
//ts
chartClick($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 属性扭转字体旋转角度，十分的头疼, 如下图