ECharts：是否可以对两个系列的两条曲线产生单个悬停效果？

Question

我在 ECharts 上用 2 个 series 对象设置了两条曲线。一个是 dashed line，另一个是这一行的延续，但已填充。目前，当我将鼠标悬停在一条曲线上时，它只会使它变粗，而忽略另一条曲线而没有任何效果。

是否可以以某种方式将这两条曲线分组，以便如果将一条曲线悬停在另一条曲线上，另一条曲线也具有悬停效果？

我试过将 groupId 设置为与 series 相同的值，但没有成功。

Answer 1

是的，您需要分别 catch events mouseover & mouseout and dispatchAction highlight 和 downplay。

instance.on('mouseover', e => {
  instance.dispatchAction({
    type: 'highlight',
    seriesName: ['line1', 'line2']
  })
});

instance.on('mouseout', e => {
  instance.dispatchAction({
    type: 'downplay',
    seriesName: ['line1', 'line2']
  })
});

我做了一个小例子来演示它是如何工作的，希望这对你有帮助。

var node = document.querySelector('#main');
var instance = echarts.init(node);

var option = {
  xAxis: [{
    type: 'category',
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  }],
  yAxis: {},
  series: [{
    name: 'line1',
    type: 'line',
    triggerLineEvent: true,
    data: [10, 20, 60, 100, null, null, null],
    emphasis: {
      lineStyle: {
        type: 'dashed'
      }
    }
  }, {
    name: 'line2',
    type: 'line',
    triggerLineEvent: true,
    data: [null, null, null, 100, 50, 20],
    lineStyle: {
      type: 'dashed'
    },
    emphasis: {
      lineStyle: {
        type: 'solid'
      }
    }
  }],
}

instance.setOption(option);

instance.on('mouseover', e => {
  instance.dispatchAction({
    type: 'highlight',
    seriesName: ['line1', 'line2']
  })
});

instance.on('mouseout', e => {
  instance.dispatchAction({
    type: 'downplay',
    seriesName: ['line1', 'line2']
  })
});

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="main" style="width:800; height:400px;"></div>

ECharts：是否可以对两个系列的两条曲线产生单个悬停效果？

ECharts: is it possible to have a single hover effect on two curves from two series?

echarts