echarts 关系图高亮展示

最新推荐文章于 2024-04-01 18:05:28 发布

原创最新推荐文章于 2024-04-01 18:05:28 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端 #vue

ECharts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用ECharts实现图表中节点的高亮和通过搜索功能定位数据。通过点击事件选中数据，利用`focusNodeAdjacency`方法，并演示了如何在搜索功能中根据名称快速聚焦到对应节点。

关系图中高亮部分如何选中？

 let myChart = this.$echarts.init(document.getElementById('GXchart'))
      myChart.on('click', function (param) {
        console.log("param.dataIndex=====", param);
        myChart.dispatchAction({
          type: 'focusNodeAdjacency',
          dataIndex: param.dataIndex
        });
      })
      myChart.on('contextmenu', function (params) {
        console.log(params);
        myChart.dispatchAction({
          type: 'unfocusNodeAdjacency',
          seriesIndex: params.seriesIndex,
        })
      });
      myChart.setOption(option)

这边是加个点击事件，可以选中高亮数据，以及右键取消。

那么搜索的时候就可以这样搞：

FN(){
 let myChart = this.$echarts.init(document.getElementById('GXchart'))
      let nodes = myChart.getOption().series[0].data;
      const arrIndex = nodes.findIndex((v)=>v.name==this.search.name);
        myChart.dispatchAction({
          type: 'focusNodeAdjacency',
          dataIndex: arrIndex
        });
  }

ps:获取到图中数据 nodes ，然后根据搜索内容找到下标，调用 dispatchAction 方法即可。如下图：
在这里插入图片描述