[Bug] realtime sort of bar chart will sort randomly for data that exceeds [min,max].

[liuweijiaCHN]

Version

5.4.3

Link to Minimal Reproduction

https://cdn.staticfile.org/echarts/5.4.3/echarts.js

Steps to Reproduce

                var chartDom = document.getElementById('tmgraph');
                chartDom.style.display="block";
                chartDom.style.width='100%';
                //chartDom.style.height='2500px';
                var m_file=document.getElementById('mfile').innerHTML;
                var m_x=document.getElementById('mx').innerHTML;
                var m_y=document.getElementById('my').innerHTML;
                var m_cnt=document.getElementById('cnt').innerHTML;
                len=Math.floor((m_cnt/90)*2500);
                chartDom.style.height=len+'px';
                function shuffle(arr) {
                  return arr.sort(() => Math.random() - 0.5);
                }
                var l_colors=['#ffb6c1','#ffc0cb','#dc143c','#fff0f5','#db7093','#ff69b4','#ff1493','#c7158
5','#da70d6','#d8bfd8','#dda0dd','#ee82ee','#ff00ff','#ff00ff','#8b008b','#800080','#ba55d3','#9400d3','#99
32cc','#4b0082','#8a2be2','#9370db','#7b68ee','#6a5acd','#483d8b','#e6e6fa','#f8f8ff','#0000ff','#0000cd','
#191970','#00008b','#000080','#4169e1','#6495ed','#b0c4de','#778899','#708090','#1e90ff','#f0f8ff','#4682b4
','#87cefa','#87ceeb','#00bfff','#add8e6','#b0e0e6','#5f9ea0','#f0ffff','#e1ffff','#afeeee','#00ffff','#00f
fff','#00ced1','#2f4f4f','#008b8b','#008080','#48d1cc','#20b2aa','#40e0d0','#7fffaa','#00fa9a','#f5fffa','#
00ff7f','#3cb371','#2e8b57','#f0fff0','#90ee90','#98fb98','#8fbc8f','#32cd32','#00ff00','#228b22','#008000'
,'#006400','#7fff00','#7cfc00','#adff2f','#556b2f','#6b8e23','#fafad2','#fffff0','#ffffe0','#ffff00','#8080
00','#bdb76b','#fffacd','#eee8aa','#f0e68c','#ffd700','#fff8dc','#daa520','#fffaf0','#fdf5e6','#f5deb3','#f
fe4b5','#ffa500','#ffefd5','#ffebcd','#ffdead','#faebd7','#d2b48c','#deb887','#ffe4c4','#ff8c00','#faf0e6',
'#cd853f','#ffdab9','#f4a460','#d2691e','#8b4513','#fff5ee','#a0522d','#ffa07a','#ff7f50','#ff4500','#e9967
a','#ff6347','#ffe4e1','#fa8072','#fffafa','#f08080','#bc8f8f','#cd5c5c','#ff0000','#a52a2a','#b22222','#8b
0000','#800000','#f5f5f5','#dcdcdc','#d3d3d3','#c0c0c0','#a9a9a9','#808080','#696969','#000000'];
                l_colors=shuffle(l_colors);
                var myChart = echarts.init(chartDom);
                var option;
                const updateFrequency = 6000;
                const dimension = 0;
                myChart.showLoading();
                $.when($.get('my_urls',function( d ){
                        } )).done(function (data) {
                        myChart.hideLoading();
                        const flags = '';
                        const years = [];
                        var colorm=new Map();
                        var c_idx=Math.floor(Math.random() * 10)%l_colors.length;
                        for (let i = 0; i < data.length; ++i) {
                                if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
                                        years.push(data[i][4]);
                                }
                                if(colorm.has(data[i][3])==false){
                                        colorm[data[i][3]]=l_colors[c_idx];
                                        c_idx=(c_idx+1)%l_colors.length;
                                }
                        }
                        function getFlag(countryName) {
                                return '';
                        }
                        let startIndex = 1;
                        let startYear = years[startIndex];
                        option = {
                                grid: {
                                        top: 10,
                                        bottom: 30,
                                        left: 150,
                                        right: 80
                                },
                                xAxis: {
                                        max:function (value){
                                                if(value.max>m_x){
                                                        return m_x;
                                                }
                                                return value.max;
                                        },
                                        min:function (value) {
                                                if(value.min< m_y){
                                                        return m_y;
                                                }
                                            return value.min;
                                        },
                                        axisLabel: {
                                                formatter: function (n) {
                                                return n+'%';
                                                }
                                        }
                                },
                                dataset: {
                                        source: data.slice(1).filter(function (d) {
                                                return d[4] === startYear;
                                        })
                                },
                                yAxis: {
                                        type: 'category',
                                        inverse: true,
                                        //max: function (value) {
                                        //    return value.max;
                                        //      },
                                        axisLabel: {
                                                show: true,
                                                fontSize: 10,
                                                formatter: function (value) {
                                                        return value;
                                                },
                                                rich: {
                                                        flag: {
                                                                fontSize: 25
                                                        }
                                                }
                                        },
                                        animationDuration: 300,
                                        animationDurationUpdate: 300
                                },
                                series: [
                                {
                                        realtimeSort: true,
                                        seriesLayoutBy: 'column',
                                        type: 'bar',
                                        itemStyle: {
                                                color: function (param) {
                                                return colorm[param.value[3]] || '#5470c6';
                                                //return '#5470c6';
                                                }
                                        },
                                        encode: {
                                                x: dimension,
                                                y: 3
                                        },
                                        label: {
                                                show: true,
                                                precision: 1,
                                                position: 'insideLeft',
                                                valueAnimation: true,
                                                fontFamily: 'monospace',
                                                formatter:function(val){
                                                 return '7天:'+val.data[2].toFixed(2)+'%,15天:'+val.data[1]
.toFixed(2)+'%,30天:'+val.data[0].toFixed(2)+'%';
                                                }
                                        }
                                }
                                ],
                                // Disable init animation.
                                animationDuration: 0,
                                animationDurationUpdate: updateFrequency,
                                animationEasing: 'linear',
                                animationEasingUpdate: 'linear',
                                graphic: {
                                        elements: [
                                        {
                                                type: 'text',
                                                right: 160,
                                                top: 100,
                                                style: {
                                                        text: startYear,
                                                        font: 'bolder 80px monospace',
                                                        fill: 'rgba(100, 100, 100, 0.25)'
                                                },
                                                z: 100
                                        }
                                ]
                        }
                };
                // console.log(option);
                myChart.setOption(option);
                for (let i = startIndex; i < years.length - 1; ++i) {
                        (function (i) {
                                setTimeout(function () {
                                        updateYear(years[i + 1]);
                                }, (i - startIndex) * updateFrequency);
                        })(i);
                }
                function updateYear(year) {
                        let source = data.slice(1).filter(function (d) {
                                return d[4] === year;
                        });
                        option.series[0].data = source;
                        option.graphic.elements[0].style.text = year;
                        myChart.setOption(option);
                }
        });
        option && myChart.setOption(option);
        });
        }

Current Behavior

 option = {     
                xAxis: {
                    max:function (value){
                        if(value.max>0.5){
                            return m_x;
                        }
                        return value.max;
                    }
               }

while x value >0.5， heigth of bar is 0.5，and it use 0.5 to sort ，and sort result is wrong. it should use true value of x

Expected Behavior

echarts.js：44469 
44469           var orderMapping_1 = function (idx) {
44470             var el = data.getItemGraphicEl(idx);
44471             if(option.use_true_value==1){                       //  add some code here
44472                    var v = data._store._chunks[0][idx];        //  add some code here
44473                   return v;                                                   // add some code here
44474              }                                                                    // add some code here
44475             var shape = el && el.shape;
44476             return shape && // The result should be consistent with the initial sort by data value.
44477             // Do not support the case that both positive and negative exist.
44478             Math.abs(baseAxis.isHorizontal() ? shape.height : shape.width) // If data is NaN, shape      .xxx may be NaN, so use || 0 here in case
44479             || 0;

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

series.realtimeSort 加一个属性，use_true_value:1 ，使用原始真值来排序。

[echarts-bot]

@liuweijiaCHN It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] The dynamic sorting graph of bar will sort the data randomly when the value exceeds max or min

[AnalogAnt]

Hey I would like to work on this issue. Please guide me through

[liuweijiaCHN]

thank you very much.
I will follow this issue and see your reply frequently.

How can I use https://cdn_host/5.4.3/echart.js and modify its function by using 'extend'/override or 'modify its source js file'.
because cdn file is downloaded very fast. so I can solve the problem quickly and downloading of web page is also quickly

var chartDom = document.getElementById('tmgraph');

echarts.extendChartView() ????? // extend echarts. BarView.prototype._enableRealtimeSort , modify the orderMapping_1 function ??

var myChart = echarts.init(chartDom); // then init it