自定义ECharts图例触发emphasis时折线标签消失问题求助

问题描述 #

用自定义按钮实现ECharts图例的显示/隐藏及hover高亮功能，基本功能正常，但存在异常：

• 复现步骤：点击line1、line2按钮隐藏两条折线，再按任意顺序点击显示，此时某条折线的标签会无法显示
• 移除series中的emphasis选项后问题消失，但需要该选项实现hover按钮时高亮对应折线的效果

问题原因 #

legendToggleSelect切换显示状态的动作，与highlight/downplay的高亮状态存在冲突。当折线被隐藏后，其高亮状态未被正确重置，重新显示时，emphasis.focus: 'self'的设置会干扰标签的渲染逻辑，导致标签无法正常显示。

解决方案 #

在切换折线显示状态时，先重置对应系列的高亮状态，避免状态残留；同时在触发高亮动作前，判断系列是否处于显示状态，仅对显示的系列执行高亮操作。

修改后的完整代码 #

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <div id="buttons">
      <button id="line1">line1</button>
      <button id="line2">line2</button>
  </div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</body>
</html>

<style>
* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 80vh;
  overflow: hidden;
  
}
#buttons {
  padding: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
</style>

<script>
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  legend: {
    show: false
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'line1',
      emphasis: {
        focus: 'self'
      },
      label: {
        show: true
      },
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: 'line2',
      emphasis: {
        focus: 'self'
      },
      label: {
        show: true
      },
      data: [80, 150, 180, 250, 180, 160, 180],
      type: 'line'
    },
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

const dispatch = (line) => {
  const seriesIndex = line === 'line1' ? 0 : 1;
  // 切换前先取消对应系列的高亮状态
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: seriesIndex,
  });
  myChart.dispatchAction({
    type: 'legendToggleSelect',
    name: line,
  });
};

const mouseOver = (index) => {
  // 仅对显示状态的系列执行高亮
  const seriesOption = myChart.getOption().series[index];
  if (seriesOption.show !== false) {
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: index,
    });
  }
};

const mouseOut = (index) => {
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: index,
  });
};

['line1', 'line2'].forEach((line, index) => {
  const item = document.getElementById(line);
  item.addEventListener('click', () => dispatch(line));
  item.addEventListener('mouseover', () => mouseOver(index));
  item.addEventListener('mouseout', () => mouseOut(index));
});
</script>

说明 #

1. 在dispatch函数中，切换显示状态前先调用downplay重置高亮状态，避免隐藏时残留高亮标记
2. 在mouseOver函数中，先判断系列是否处于显示状态，只对显示的系列触发高亮，避免对隐藏系列的状态进行无效修改

内容的提问来源于stack exchange，提问作者noneedname