ECharts - Получение единой линии split для визуализации в гистограмме с накоплением

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) </li>
• param> 0 и param <2 не работает (линия разделения не отображается) </li>
• установка фиксированного числа приводит к тому, что разделительная линия также появляется в конце графика, несмотря на то, что находится не справа Интервал (например, если мои предметы пошли от 40 до 80, и я установил интервал 7, то разделенная линия появится до 47, 54, 61, 68, 75 и 40 и 80)

Как сделать так, чтобы появилась одна линия разделения?

Я также видел Echarts, как добавить пунктирную вертикальную линию между указанными c барами на гистограмме? , однако я У меня недостаточно знаний о том, как изменить это для работы с гистограммой с накоплением.

Как я хочу, чтобы это выглядело так:

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]
        }
    ]
};

Несколько замечаний:

1. Добавьте несколько пустых строковых записей для ваших меток (ось X). ). Как можно видеть выше, данные [40, 41, 42, 43, 44] вместо [40, 41, 42, 43, 44].
2. В любой из графиков вставьте приведенный выше синтаксис markLine, который я добавил в график 1. Вам нужно будет корректировать значение xAxis, пока не получите среднюю точку.

Демонстрация: https://jsfiddle.net/k9hgj5zb/1/

Кредиты по этой ссылке: Нарисуйте горизонтальную целевую линию, используя EChart. JS