1

Is there a way to dispatch an action to show highlight for a Mark Line?

In this example, I can dispatch an action to show a tooltip or show highlight for a data point but can't find a way to do the same for mark line.

  • Setup Echarts options
var myChart = echarts.init(document.getElementById('main'));

option = {
    title: {
        text: 'How to highlight a 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: 'How to highlight a Mark Line?', xAxis: '2017-10-16'}],
            }
        }
    ]
};

myChart.setOption(option);
  • Dispatch actions
setTimeout(() => {
    myChart.dispatchAction({
    type: 'showTip',

    // Find  by index or id or name.
    // Can be an array to find multiple components.
    seriesIndex: 0,
    dataIndex: 2
    });
  
  myChart.dispatchAction({
    type: 'highlight',

    // Find  by index or id or name.
    // Can be an array to find multiple components.
    seriesIndex: 0,
    dataIndex: 4
    });
}, 200);

Fiddle

lepoing
  • 46
  • 5

0 Answers0