Javascript eCharts xAxis在使用datazoom进行缩放时出现错误

Javascript eCharts xAxis在使用datazoom进行缩放时出现错误,javascript,charts,echarts,Javascript,Charts,Echarts,我正在努力找到一种方法来修复这个bug。我正在显示一个带有2个Yaxis和一个datazoom的图表。在大多数情况下工作正常: 如果我取消选择一条线(比如价格),那么其中一条Yaxis将被隐藏。那很好。但是如果我再放大一次,我将面临一个错误,X轴将位于图表的中心 我一直在尝试xAxis和Yaxis上的每一个选项,但运气都不好。有什么建议吗 这是我传递给echart库的选项数组 let stacked_scores_options = { color: ['#000

我正在努力找到一种方法来修复这个bug。我正在显示一个带有2个Yaxis和一个datazoom的图表。在大多数情况下工作正常:

如果我取消选择一条线(比如价格),那么其中一条Yaxis将被隐藏。那很好。但是如果我再放大一次,我将面临一个错误,X轴将位于图表的中心

我一直在尝试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: []
                }
            ]
        };

我找到了解决办法。对于有相同问题的人,您希望向xaxis添加
axisLine:{onZero:false}
,如下所示:

            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 : []
                }
            ],