Question

我正在努力寻找解决此错误的方法。我正在显示带有2 Yaxis和datazoom的图表。大部分时间都能正常工作：

如果我取消选择一条线（说价），那么Yaxis之一将被隐藏。没关系。但是，如果我再次放大，则可能会遇到一个错误，即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

我找到了解决方案。对于遇到相同问题的人们，您想像这样向{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 : []
                }
            ],

使用datazoom缩放时，eCharts xAxis错误

1 个答案: