彻底解决 echarts 折线图 markLine 不显示难题

2023-09-08 19:09:49

问题原因

在 echarts 的折线图里，如果折线数据不穿过对应的 markLine 或者是折线数据不靠近 markLine 的一定距离，则这条 markLine 不会显示。这是因为 markLine 的默认显示规则是，只有当折线数据穿过或靠近 markLine 时，这条 markLine 才会显示。

解决方案

为了解决 echarts 折线图 markLine 不显示的问题，我们可以通过以下两种方式进行设置：

1. 调整 markLine 的显示规则

我们可以通过设置 markLine 的 symbolSize 属性来调整 markLine 的显示规则。symbolSize 属性的值越大，markLine 显示的范围就越大。通过增大 symbolSize 的值，我们可以确保 markLine 能够显示在折线数据附近，从而解决 markLine 不显示的问题。

2. 调整折线数据的位置

我们可以通过调整折线数据的位置来确保折线数据穿过或靠近 markLine。我们可以通过设置折线数据点的值来调整折线数据的位置。通过增加或减少折线数据点的值，我们可以使折线数据穿过或靠近 markLine，从而解决 markLine 不显示的问题。

实例演示

下面是一个使用 echarts 绘制折线图的示例代码：

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

var option = {
    title: {
        text: 'echarts 折线图 markLine 不显示的解决方案'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['折线数据']
    },
    xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '折线数据',
        type: 'line',
        data: [10, 20, 30, 40, 50, 60]
    }, {
        name: 'markLine',
        type: 'markLine',
        data: [{
            type: 'average'
        }]
    }]
};

myChart.setOption(option);