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

Question

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

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

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

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

效果如下图：

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

请问该如何实现呢？

Answer 1

这个没有对应配置，但可以通过事件监听和 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
鼠标事件