echarts 关系图高亮展示

你眼中的柔情

于 2022-07-18 17:52:37 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签： echarts javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/return_js/article/details/125856730

ECharts 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 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 方法即可。如下图：
在这里插入图片描述