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

Question

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

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

Answer 1

如果你想单独高亮显示选中的日期，可以通过设置 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 的属性值没有设置正确，可以尝试调整其属性值来达到预期效果。