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

Question

我正在努力寻找解决此错误的方法。我正在显示一个带有 2 个 Y 轴和一个数据缩放的图表。大部分时间都可以正常工作：

如果我取消选择一条线（Say Price），则其中一个 Y 轴将被隐藏。没关系。但是，如果我再次放大，我将面临 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: []
                }
            ]
        };

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