Линейный и Столбчатый диаграммы в ECharts

Question

Я пытаюсь создать комбинированный график с помощью EChart.Я новичок в библиотеке EChart.Мне нужно создать диаграмму следующим образом График нужно построить
Линейный график должен начинаться с начала.Значения XAxis - месяцы.Таким образом, значение графика должно быть значением в начале месяца.Значения гистограммы находятся в течение месяца.Пример: если линейный график представляет количество сотрудников на начало месяца, то две серии гистограмм отображают новые кадры и существуют в этом месяце.

Я пытался создать этот график в виде комбинированного графика, нозначения yAxis имеют огромный разрыв с использованием нескольких yAxis не работает для меня.А также, когда я установил «borderGap: false», чтобы линейный график начинался с начала, тогда гистограмма уходит из сетки с левой стороны.

Затем я попытался создать диаграмму, используя два отдельныхлинии и гистограмма.Я мог бы подойти ближе, но опять-таки borderGap доставляет мне трудности.

Тот, который я создал

Если я смогу получить гистограммы внутри сетки, чем это было быбудет хорошо.Или еще есть какой-нибудь другой способ создания графика с использованием ECharts?

Ниже приведены мои варианты для двух графиков.

lineOptions : {
                grid:{
                   top:20,
                   bottom:5,
                    right:0
                },
                xAxis: {
                    type: 'category',
                    data: ['Jul-17','Aug-17','Sep-17','Oct-17','Nov-17','Dec-17','Jan-18','Feb-18','Mar-18','Apr-18','May-18','Jun-18'],
                    splitArea: {show:false},
                    splitLine: {show:false},
                    boundaryGap:false,
                    show:false
                },
                yAxis: {
                    type: 'value',
                    min: 18000,
                    max: 20100,
                    interval: 1000,
                    splitArea: {show:false},
                    splitLine: {show:false},
                    axisLabel: {
                        formatter: function (value) {
                            return value/1000 + "K";
                        }
                    },
                    axisLine : {
                        show: false
                    },
                    axisTick : {
                        show: false
                    }
                },
                series: [{
                    data: [18023, 18100, 18150, 18175, 18200, 18300,18700,18750,18775,18825,19575],
                    type: 'line',
                    itemStyle : {
                        normal: {
                            color: 'blue'
                        }
                    },

                    markLine : {
                        symbol: 'none',itemStyle: {
                            normal: {
                                color: 'gray',
                                hoverAnimation: false
                            }
                        },
                        lineStyle:{
                            type:'solid'
                        },
                        data : [
                            [
                                {xAxis:'May-18',yAxis:18000},{xAxis:'May-18',yAxis:19575}
                            ],
                            [
                                {xAxis:'Apr-18',yAxis:18000},{xAxis:'Apr-18',yAxis:18825}
                                ],
                                [{xAxis:'Mar-18',yAxis:18000},{xAxis:'Mar-18',yAxis:18775}],
                                [{xAxis:'Feb-18',yAxis:18000},{xAxis:'Feb-18',yAxis:18750}],
                                [{xAxis:'Jan-18',yAxis:18000},{xAxis:'Jan-18',yAxis:18700}],
                                [{xAxis:'Dec-17',yAxis:18000},{xAxis:'Dec-17',yAxis:18300}],
                                [{xAxis:'Nov-17',yAxis:18000},{xAxis:'Nov-17',yAxis:18200}],
                                [{xAxis:'Oct-17',yAxis:18000},{xAxis:'Oct-17',yAxis:18175}],
                                [{xAxis:'Sep-17',yAxis:18000},{xAxis:'Sep-17',yAxis:18150}],
                                [{xAxis:'Aug-17',yAxis:18000},{xAxis:'Aug-17',yAxis:18100}],
                                [{xAxis:'Jul-17',yAxis:18000},{xAxis:'Jul-17',yAxis:18023}]
                        ]
                    }
                }]

            };

barOptions : {
                grid:{
                    top:5,
                    bottom:20,
                    right:0
                },
                xAxis: {
                    type: 'category',
                    data: ['Jul-17','Aug-17','Sep-17','Oct-17','Nov-17','Dec-17','Jan-18','Feb-18','Mar-18','Apr-18','May-18','Jun-18'],
                    splitArea: {show:false},
                    splitLine: {show:true},
                    boundaryGap:false
                },
                yAxis: {
                    type: 'value',
                    interval: 200,
                    splitArea: {show: false},
                    splitLine: {show: false},
                    axisLine : {
                        show: false
                    },
                    axisTick : {
                        show: false
                    }
                },
                series: [
                    {
                        type:'bar',
                        data:[600, 400, 375, 375, 360, 800, 500, 400, 450, 500, 700, 900]
                    },
                    {
                        type:'bar',
                        data:[375, 340, 300, 380, 375, 400, 380, 500, 510, 400, 380, 520]
                    }
                ]

            }

Пожалуйста, помогите мне создать этот график.