echarts的关系图，怎么单独高亮显示选中的今天在练习的时候发现使用echarts关系图时，发现设置emphasis时，分发点并没有和预想中的一样淡化掉

echarts的关系图，怎么单独高亮显示选中的
今天在练习的时候发现使用echarts关系图时，发现设置emphasis时，分发点并没有和预想中的一样淡化掉

img

在查看官方的文档和百度后，并没有解决这个问题，不知道造成这个问题的原因是什么，有什么解决方法吗

如果你想单独高亮显示选中的日期，可以通过设置 emphasis 来实现。但是，根据你的描述，可能是因为你没有正确设置 emphasis 导致分支点没有被淡化。

在 echarts 中，通过设置 emphasis 可以让某个元素在鼠标交互时呈现出不同的样式。对于关系图中的节点来说，可以设置 emphasis.focus 属性来实现单独高亮显示某个节点。同时，为了让其他节点和边在高亮节点后仍然保持可见，可以通过设置 emphasis.blur 属性来淡化其他节点和边。

以下是一个简单的代码示例：

// 假设数据已经准备好了
const data = {
  nodes: [
    { id: 1, name: '节点1' },
    { id: 2, name: '节点2' },
    { id: 3, name: '节点3' },
    // more nodes ...
  ],
  links: [
    { source: 1, target: 2 },
    { source: 2, target: 3 },
    // more links ...
  ]
};

// 初始化 echarts 实例
const chart = echarts.init(document.getElementById('chart'));

// 设置配置项
const option = {
  series: [{
    type: 'graph',
    layout: 'force',
    data: data.nodes,
    links: data.links,
    emphasis: {
      focus: 'self', // 高亮自身节点
      blur: {
        opacity: 0.1 // 其他节点和边的透明度
      }
    },
    itemStyle: {
      borderColor: '#aaa',
      borderWidth: 1,
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.3)'
    },
    label: {
      show: true,
      position: 'inside'
    },
    force: {
      repulsion: 100
    }
  }],
  tooltip: {
    formatter: ({ data }) => data.name // 显示节点名称
  }
};

// 渲染图表
chart.setOption(option);

// 在需要高亮某个节点时，只需调用 setOption 方法更新 emphasis 属性即可
const today = '2023-05-10'; // 假设今天是 2023-05-10
const nodeIndex = data.nodes.findIndex(node => node.date === today);
if (nodeIndex !== -1) {
  chart.setOption({
    series: [{
      emphasis: {
        focus: nodeIndex
      }
    }]
  });
}

如果分支点并没有被淡化，可能是因为 emphasis.blur 的属性值没有设置正确，可以尝试调整其属性值来达到预期效果。

该回答引用ChatGPT
可以通过设置 emphasis 的 itemStyle 里的 opacity 属性来让未选中的节点及边变淡。以下是实现的示例代码：

javascript
option = {
  series: [
    {
      type: 'graph',
      layout: 'force',
      data: [...],
      links: [...],
      emphasis: {
        focus: 'adjacency',
        itemStyle: {
          opacity: 0.2 // 设置未选中的节点及边的透明度
        }
      },
      lineStyle: {
        opacity: 0.5 // 设置边的透明度
      }
      // 其他配置项
    }
  ]
};


同时，当某个节点或者边被选中时，可以通过设置高亮样式（highlight）来让其突出显示。以下是实现的示例代码：

javascript
// 选中某个节点时
myChart.on('click', function(params) {
  if (params.dataType === 'node') {
    myChart.setOption({
      series: [
        {
          id: 'relationGraph',
          label: {
            emphasis: {
              show: true
            }
          },
          emphasis: {
            focus: params.data.id, // 将 focus 设置为当前选中节点的 id
            itemStyle: {
              opacity: 1 // 将未选中的节点的透明度改为1，即不透明
            },
            lineStyle: {
              opacity: 1 // 将未选中的边的透明度改为1，即不透明
            }
          }
        }
      ]
    });
  }
});

// 选中某条边时
myChart.on('click', function(params) {
  if (params.dataType === 'edge') {
    myChart.setOption({
      series: [
        {
          id: 'relationGraph',
          emphasis: {
            focusEdge: params.data.id, // 将 focusEdge 设置为当前选中边的 id
            itemStyle: {
              opacity: 1 // 将未选中的节点及边的透明度改为1，即不透明
            },
            lineStyle: {
              opacity: 1
            }
          }
        }
      ]
    });
  }
});


需要注意的是，上述代码中的 myChart 指的是 echarts 实例化后的对象，需要先进行实例化，才能使用它的相关 API。

引用chatGPT作答，如果您想单独高亮显示关系图中选中的节点，您可以通过设置 emphasis 风格来实现。例如，您可以将选中的节点的颜色设置为红色，而将其他节点的颜色设置为灰色，以便突出显示选中的节点。

以下是一个示例代码，可以让选中的节点高亮显示：

// 首先定义关系图的数据和配置项
var data = {
  nodes: [
    { name: '节点1' },
    { name: '节点2' },
    { name: '节点3' },
    { name: '节点4' },
    { name: '节点5' }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 0, target: 3 },
    { source: 1, target: 4 }
  ]
};

var option = {
  series: {
    type: 'graph',
    layout: 'force',
    data: data.nodes,
    links: data.links,
    emphasis: {
      focus: 'adjacency',
      lineStyle: {
        opacity: 0.5
      }
    },
    roam: true,
    label: {
      show: true
    },
    force: {
      repulsion: 100
    }
  }
};

// 接下来定义选中节点时的事件处理函数
var chart = echarts.init(document.getElementById('myChart'));
chart.on('click', function(params) {
  if (params.dataType === 'node') {
    var dataIndex = params.dataIndex;
    chart.dispatchAction({
      type: 'focusNodeAdjacency',
      dataIndex: dataIndex
    });
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: dataIndex
    });
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: dataIndex === 0 ? 1 : 0
    });
  }
});

// 最后调用setOption方法将数据和配置项渲染到图表中
chart.setOption(option);

在这个示例代码中，我们首先定义了一个关系图的数据和配置项，然后定义了一个点击事件处理函数。当用户点击某个节点时，我们会将该节点的邻接节点高亮显示，并将该节点突出显示。

需要注意的是，emphasis 风格只是为了让选中的节点在视觉上更加突出，它并不会改变关系图的实际数据和布局。如果您需要对关系图的数据进行修改，可以使用 chart.setOption 方法来更新数据和配置项。

另外，如果您发现设置 emphasis 风格后节点的颜色没有变化，可能是因为您的配置项中没有指定节点的样式。您可以尝试在配置项中添加以下代码来指定节点的颜色和样式：

itemStyle: {
  borderColor: '#fff',
  borderWidth: 1,
  shadowBlur: 10,
  shadowColor: 'rgba(0, 0, 0, 0.3)',
  color: '#1f78b4'
}
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7504813
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：使用多个 echarts 图表后，页面卡住、白屏？
  • 除此之外, 这篇博客: 2.使用echarts图表时会遇到屏幕宽度变化,，而echarts的图表宽度不变中的 使用echarts图表时会遇到屏幕宽度变化,，而echarts的图表宽度不变 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 	var myChart= echarts.init(document.getElementById('twChart'));
	myChart.setOption(option);
    //在初始图表时加以下方法
    //方案一:只有一个图表时可加
	setTimeout(function (){
	    window.onresize = function () {
	    	myChart.resize();
	    }
	},200)
	
	//方案二:当有多个图表就需要用到这个
	 setTimeout(function (){
       window.addEventListener("resize", function () {
                 myChart.resize();
            })
       },200)