ECharts

Question

正在尝试在堆叠条形图上呈现一条分割线。

代码如下：

options = {
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Graph 1', 'Graph 2']
    },
    grid: {
        left: '7%',
        right: '5%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [40, 41, 42, 43, 44],
            axisLabel: {
                interval: 1
            },
            splitLine: {
                show: true,
                interval: function (param) {
                    //return param === 1;            //what I'm trying to get it to do
                    return param > 0 && param < 2;   //this doesn't work
                    //return param > 0;              //this works, but adds a split line to everything above 1 as well, not what I want. vice versa (param < 2) also works, but again not what I want
                },
                lineStyle: {
                    type: 'dashed',
                    width: 2,
                    color: '#767676'
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: 'Y',
            nameLocation: 'middle',
            nameTextStyle: {
                padding: [0, 0, 8, 0],
                color: '#767676',
                fontSize: 14
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        }
    ],
    series: [
        {
            name: 'Graph 1',
            type: 'bar',
            barWidth: 20,
            stack: 'Graph',
            itemStyle: {
                color: '#db0011'
            },
            data: [8000, 10000, 12000, 16000, 20000]
        },
        {
            name: 'Graph 2',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'Graph',
            itemStyle: {
                color: '#00a69d'
            },
            data: [4000, 5000, 6000, 8000, 10000]
        }
    ]
};

根据上面的代码，

param > 0 有效，但会为超过 1 的所有内容（1 和 2）添加一条分割线
同样，param < 2 将为 2 之前的所有内容（0 和 1）添加一条分割线
param > 0 和 param < 2 不起作用（没有出现分割线）
设置一个固定数字也会导致图表末尾出现一条分割线，尽管间隔不正确（例如，如果我的项目从 40 到 80，我将间隔设置为 7，则分割线将出现在 47、54、61、68、75 之前以及 40 和 80)

如何让单个分割线出现？

我也看过，但是我对如何修改它以使用堆叠条形图了解不够。

我希望它看起来像：

Answer 1

我最终解决这个问题的方法是：

var option = {
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Graph 1', 'Graph 2']
    },
    grid: {
        left: '7%',
        right: '5%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [40, '', 41, '', 42, '', 43, '', 44],
            axisLabel: {
                interval: 1
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: 'Y',
            nameLocation: 'middle',
            nameTextStyle: {
                padding: [0, 0, 8, 0],
                color: '#767676',
                fontSize: 14
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        }
    ],
    series: [
        {
            name: 'Graph 1',
            type: 'bar',
            barWidth: 20,
            stack: 'Graph',
            data: [8000, 0, 10000, 0, 12000, 0, 16000, 0, 20000],
            markLine: {
                silent: true,
                symbol: 'none',
                label: {
                    show: false
                },
                data: [
                    {
                        name: "Test",
                        xAxis: 2.5,
                        lineStyle: {
                            color: '#767676',
                            width: 2,
                            type: 'dashed'
                        }
                    },
                ]
            }
        },
        {
            name: 'Graph 2',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'Graph',
            data: [4000, 0, 5000, 0, 6000, 0, 8000, 0, 10000]
        }
    ]
};

注意几点：

为您的标签（x 轴）添加一堆空字符串条目。从上面可以看出，数据是 [40, '', 41, '', 42, '', 43, '', 44] 而不是 [40, 41, 42, 43, 44].
相对于您在上面的 x 轴数据中插入空字符串标签的位置，在图表系列中添加零（例如 4000、0、5000、0、6000、0、8000、0、10000）。对您拥有的每个图表执行此操作。
在任意一张图中，插入我在图 1 中添加的上述 markLine 语法。您需要调整 xAxis 的值，直到得到中间点。

演示：https://jsfiddle.net/k9hgj5zb/1/

致谢 link：

ECharts - 获取单个 splitLine 以在堆叠条形图中呈现

ECharts - Getting a single splitLine to render in a stacked bar chart