如何通过编程方式为Apache Echarts中的Mark Line设置高亮？

结论：ECharts目前没有内置的dispatch action直接实现Mark Line高亮，但可以通过动态更新配置项的方式模拟该效果

你当前的代码可实现数据点高亮和tooltip显示，但Mark Line需要特殊处理，修改后的完整示例如下：

配置ECharts实例 #

var myChart = echarts.init(document.getElementById('main'));

// 预设Mark Line的正常与高亮样式
option = {
    title: {
        text: '如何高亮Mark Line？'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['2017-10-14','2017-10-15','2017-10-16','2017-10-17','2017-10-18','2017-10-19','2017-10-20']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type:'line',
            data:[0.83, 0.32, 0.75, 0.66, 0.77, 0.71, 0.79],
            itemStyle : { normal: {label : {show: true}}},
            markLine: {
                 data: [{name: '如何高亮这条Mark Line？', xAxis: '2017-10-16'}],
                 lineStyle: {
                     normal: { color: '#999', width: 2 }, // 正常样式
                     emphasis: { color: '#ff4500', width: 3 } // 高亮样式
                 }
            }
        }
    ]
};

myChart.setOption(option);

触发高亮动作 #

setTimeout(() => {
    // 显示数据点tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 2
    });
  
    // 高亮数据点
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 4
    });

    // 模拟Mark Line高亮：动态更新样式
    myChart.setOption({
        series: [
            {
                markLine: {
                    lineStyle: {
                        normal: { color: '#ff4500', width: 3 } // 应用高亮样式
                    }
                }
            }
        ]
    });

    // 可选：触发Mark Line的tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        markLineIndex: 0 // 指定要触发的Mark Line索引
    });
}, 200);

补充说明 #

如果需要取消Mark Line的高亮，只需再次调用setOption将lineStyle.normal改回初始的正常样式即可。这种方式本质是通过修改配置项切换样式，达到和高亮一致的视觉效果。

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