echarts5.0 - 2. 在图表点击事件后，如何使图形保持高亮状态？

Question

图表点击事件调用dispatchAction使图形高亮后，怎么保持鼠标移动后，图形依旧保持高亮

鼠标移动后，图形依旧保持高亮

Answer 1

可以在点击事件里面重新设置echarts相关配置，然后重新初始化。
还可以根据官方提供的方法来解决。

Answer 2

看你的高亮是如何设置的，之前有个类似的问题
https://segmentfault.com/q/1010000043396245?utm_source=sf-similar-question

Answer 3

要保持鼠标移动后图形依旧保持高亮，您需要使用 JavaScript 来处理鼠标移动事件并更新图形的样式。

以下是一个示例代码，演示了如何使用 D3.js 库来处理图表点击事件并保持鼠标移动后图形高亮的状态：

// 假设您已经有一个绘制图形的函数 drawGraph// 在您的 HTML 文件中，添加以下 JavaScript 代码：// 获取要高亮的图形元素const highlightElement = document.querySelector('#highlight');// 定义鼠标移动事件处理程序function onMouseMove(event) {  // 获取鼠标当前位置的坐标  const x = event.clientX;  const y = event.clientY;  // 将鼠标位置映射到图形坐标系中  const xScale = d3.scaleLinear()    .domain([0, window.innerWidth]) // 输入范围为窗口宽度，输出范围为图形宽度    .range([0, 500]); // 输出范围为图形宽度，可根据实际情况调整  const yScale = d3.scaleLinear()    .domain([0, window.innerHeight]) // 输入范围为窗口高度，输出范围为图形高度    .range([500, 0]); // 输出范围为图形高度，可根据实际情况调整  // 计算映射后的坐标值  const mappedX = xScale(x);  const mappedY = yScale(y);  // 根据映射后的坐标值更新图形元素的样式，使其保持高亮状态  highlightElement.style.fill = 'yellow'; // 可根据实际情况调整图形元素的样式，如填充颜色、边框等}// 绑定鼠标移动事件处理程序到图形元素上highlightElement.addEventListener('mousemove', onMouseMove);

在上面的示例代码中，我们首先通过 document.querySelector 获取要高亮的图形元素，并定义了一个名为 onMouseMove 的函数来处理鼠标移动事件。在事件处理程序中，我们首先获取鼠标当前位置的坐标，然后使用 D3.js 的比例尺函数将鼠标位置映射到图形坐标系中。接下来，我们根据映射后的坐标值更新图形元素的样式，使其保持高亮状态。最后，我们使用 addEventListener 方法将事件处理程序绑定到图形元素上。