如何在 Apache Echarts 中以编程方式设置标记线突出显示？

Question

有没有办法调度一个动作来显示标记线的突出显示？

在此示例中，我可以调度一个操作来显示工具提示或显示数据点的突出显示，但找不到对标记线执行相同操作的方法。

• 设置 Echarts 选项

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);

• 派遣行动

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);

小提琴

Answer 1

我找到了一种方法来满足上面的需求，我们可以使用图表实例中的函数

setOption

来更新标记线的线型。

https://echarts.apache.org/en/api.html#echartsInstance.setOption

因为标记线是线系列选项的子属性，所以我们必须更新整个线系列选项才能使其起作用。我还创建了一个变量名称

seriesLineOption

以在

setOption

函数中重用它。

• 设置 Echarts 选项

const myChart = echarts.init(document.getElementById('main'));
const seriesLineOption = {
  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'}],
  }
};

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: [
        {...seriesLineOption}
    ]
};

myChart.setOption(option);

• 实现切换高亮功能

const btnHighlight = document.getElementById('btn-highlight');
let highlighted = false;
btnHighlight.addEventListener('click', event => {
    myChart.dispatchAction({
    type: highlighted ? 'hideTip' : 'showTip',

    // Find  by index or id or name.
    // Can be an array to find multiple components.
    seriesIndex: 0,
    dataIndex: 2
    });
  
  const curOption = myChart.getOption();
  const seriesOption = curOption.series[0].markLine.lineStyle = {
    width: 3
  };
  
  myChart.setOption({
     series: [
        {
            ...seriesLineOption,
            markLine: {
              ...seriesLineOption.markLine,
              lineStyle: {
                width: highlighted ? 1 : 3
              }
            }
        }
    ]
  });
  
  highlighted = !highlighted;
});

工作演示：Fiddle