我的EChart中的标记线没有显示，为什么不显示？

Question

知道为什么这些标记线没有显示吗？

我有几张图表，其余的图表上的标记线都可以，但这个不行。

我确信我犯了一些愚蠢的错误，但我就是找不到它。我对 ECharts 还比较陌生。

series: [{
    data: [
        9.192469262,
        9.214918872,
        ...
        9.2296280396,
        9.2258655988
    ],
    type: "line",
    symbol: "circle",
    lineStyle: {
        color: "#ced4da",
        width: 1.25
    },
    markLine: {
        data: [{ xAxis: 9480 }, { xAxis: 9520 }, { xAxis: 9549 }],
        silent: true,
        lineStyle: { color: "343a40", weight: 2, type: "solid" },
        label: { "show": false }
    }
}]

我得到了什么：

我期望得到什么：

谢谢！

Answer 1

如果您的

xAxis

属于类别类型，则值将转换为字符串， 因此，要显示 markLines，您必须将

xAxis

值指定为字符串； 另外，显然，您必须将这些值放在 x 轴上（它们只是字符串， 无法进行插值）。在下面的例子中只有两个 显示了三条标记线，因为第三条标记线在标记线中没有

xAxis

值 x 轴的值：

const myChart = echarts.init(document.querySelector('#chart'));
const options = {
    series: [{
        data: [
            9.192469262,
            9.214918872,
            9.2296280396,
            9.2258655988
        ],
        type: "line",
        symbol: "circle",
        lineStyle: {
            color: "#ced4da",
            width: 1.25
        },
        markLine: {
            data: [{ xAxis: '9480' }, { xAxis: '9520' }, { xAxis: '9549' }],
            silent: true,
            lineStyle: { color: "343a40", weight: 2, type: "solid" },
            label: { "show": false }
        }
    }],
    xAxis:{
        type: "category",
        boundaryGap: false,
        data: [9450, 9480, 9520, 9550]
    },
    yAxis:{
        type: "value",
        min: 9,
    }
};
myChart.setOption(options);

<div id="chart" style="width: 400px;height: 400px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

或者，您可以将 x 轴作为值轴，在这种情况下，为 markLines 设置的

xAxis

值可能是数字（字符串也可以，它们被解析为数字），您设置它们的方式，它们是插值，所以 x 轴不需要具有这些精确值。然而，在这种情况下，x 数据的值不应放置在

xAxis

配置中，而应放置在

series

中（最小示例）：

const myChart = echarts.init(document.querySelector('#chart'));
const options = {
    series: [{
        data: [
            [9450, 9.192469262],
            [9500, 9.214918872],
            [9550, 9.2296280396],
            [9600, 9.2258655988]
        ],
        type: "line",
        symbol: "circle",
        lineStyle: {
            color: "#ced4da",
            width: 1.25
        },
        markLine: {
            data: [{ xAxis: 9480 }, { xAxis: 9520 }, { xAxis: 9549 }],
            silent: true,
            lineStyle: { color: "343a40", weight: 2, type: "solid" },
            label: { "show": false }
        }
    }],
    xAxis:{
        type: "value",
        min: 'dataMin',
        max: 'dataMax',
    },
    yAxis:{
        type: "value",
        min: 9,
    }
};
myChart.setOption(options);

<div id="chart" style="width: 400px;height: 400px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>