echarts如何图例hover时高亮折线并显示所有点？

Question

现在有的配置：
默认情况下，数据的symbol不显示：

     symbol: 'circle',
     showSymbol: false,
     symbolSize: 10,

鼠标在图表上，显示当前数据的symbol：

   tooltip: {
   trigger: 'axis',
   axisPointer: {
     type: 'line',
     z: 0,
   }

效果如下图：

我想要实现的功能：
当图例hover时，显示当前折线的所有数据的symbol，想要实现的效果如下图：

请问该如何实现呢？

Answer 1

感谢上面的老哥，不过没有实验成功，legend好像没有mouseover事件，但是给了我启发。

因为图例hover时会触发曲线的highlight事件，移出又会触发downplay事件，因此我通过监听这俩事件实现了我要的功能。
以vue3代码举例：
首先用一个变量保存当前要高亮所有点的series的name:
const showSymbol = ref()
然后，在series的配置里，用showSymbol变量与name做比对：

symbol: 'circle',
showSymbol: showSymbol.value === '阅读人数',
symbolSize: 10,

最后，让echarts实例监听highlight与downplay事件：

  chart.on('highlight', function (params) {
    if (params.seriesName) {
      showSymbol.value = params.seriesName
    } else {
      showSymbol.value = null
    }
  })
  chart.on('downplay', function (params) {
    showSymbol.value = null
  })

Answer 2

这个没有对应配置，但可以通过事件监听和 dispatchAction 解决，我提供两种思路：

以下 chart 指代 echarts.init() 接收的对象

1.事件监听

echarts 官方提供了 echarts 实例对象监听函数 echartsInstance.on

// 数据项
chart.setOption({
  series: [ {
      data: [
          {name: 'xx', value: 121},
          {name: 'yy', value: 33}
      ]
  }]
});
chart.on('mouseover', {seriesIndex: 0, name: 'xx'}, function () {
    // chart.dispatchAction
});

2.dispatchAction

• 它会让选中的样式变为 select 属性的样式（具体参考下方文档）

chart.dispatchAction({
    type: 'select', // 还有其他的选择，具体参考文档（放下面了）

    // 用 index 或 id 或 name 来指定系列。
    // 可以使用数组指定多个系列。
    seriesIndex?: number | number[], // ?: 表示该属性是可选的
    seriesId?: string | string[],
    seriesName?: string | string[],

    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
    dataIndex?: number | number[],
    // 可选，数据项名称，在有 dataIndex 的时候忽略
    name?: string | string[],
})

官方文档
select
action
dispatcherAction
鼠标事件