eCharts xAxis ошибка при масштабировании с datazoom

Question

Я изо всех сил пытаюсь найти способ исправить эту ошибку. Я показываю диаграмму с 2 Yaxis и datazoom. Работает нормально большую часть времени:

Если я откажусь от выбора линии (Скажи цену), то один из Яксис станет скрытым. Все в порядке. Но если я снова увеличу масштаб, я столкнусь с ошибкой, когда Xaxis переместится в центр диаграмм.

Я безуспешно пробовал все варианты на xAxis и Yaxis. Любой совет?

Вот мой массив опций, который я передаю библиотеке echart

let stacked_scores_options = {

             color: ['#000', '#ff7f50', '#87cefa', '#ba55d3', '#32cd32', '#6495ed', '#ff69b4'],

            // Setup grid
            grid: {
                x: 55,
                x2: 42,
                y: 30,
                y2: 95
            },

            title : {
                textStyle: {
                    fontFamily: "Roboto",
                    fontSize: "17",
                    fontWeight: "400"
                },
                padding: [0,0,5,10]
            },
            tooltip : {
                trigger: 'axis',
                formatter: tooltipSentScore,
            },
            legend: {
                 data:['Price', 'Sentscore', 'News', 'Social', 'Buzz', 'Fundamental', 'Technical'],
                selected: {
                    // 'Price': true,
                    'Sentscore': true,
                    'News': false,
                    'Social': false,
                    'Buzz': false,
                    'Fundamental': false,
                    'Technical': false,
                },
            },
            dataZoom : {
                show : true,
                y: 410,
                realtime: true,
                start : 0,
                end : 100
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    position: 'bottom',
                    axisTick: {
                        inside: true,
                        alignWithLabel: true,
                    },
                    data : [],
                    scale: true,
                    axisLabel: {
                        showMaxLabel: true,
                        showMinLabel: true,
                        formatter: function (value, index) {
                            var res = value.split(" ");
                            return res.join('\n');
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    splitNumber: 'auto',
                    boundaryGap: [0.01, 0.01]
                },
                {
                    type : 'value',
                    scale:true,
                    splitLine: { show: false },
                    splitNumber: 'auto',
                    boundaryGap: [0.01, 0.01],

                    axisLabel : {
                        formatter: '${value}'
                    },
                    name: 'USD Prices',
                    nameLocation: 'middle',
                    nameGap: 50
                }
            ],
            series : [
                 {
                     name:'Price',
                     type:'line',
                     symbol: 'none',
                     yAxisIndex: 1,
                     data: []
                },
                {
                    name:'Sentscore',
                    type:'line',
                    symbol: 'none',
                    data: []
                },
                {
                    name:'News',
                    type:'line',
                    symbol: 'none',
                    data: []
                },
                {
                    name:'Social',
                    type:'line',
                    symbol: 'none',
                    data: []
                },
                {
                    name:'Buzz',
                    type:'line',
                    symbol: 'none',
                    data: []
                },
                {
                    name:'Fundamental',
                    type:'line',
                    symbol: 'none',
                    data: []
                },
                {
                    name:'Technical',
                    type:'line',
                    symbol: 'none',
                    data: []
                }
            ]
        };

Answer 1

Я нашел решение. Для людей, имеющих ту же проблему, вы хотите добавить axisLine: {onZero: false} к вашему xaxis следующим образом:

            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    axisLine: {onZero: false}, //Fix the bug
                    axisTick: {
                        inside: true,
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        showMaxLabel: true,
                        showMinLabel: true,
                        formatter: function (value) {
                            var res = value.split(" ");
                            return res.join('\n');
                        }
                    },
                    data : []
                }
            ],