[Bug] 动态更新x轴数据排序错乱

[1163849662]

Version

5.33

Link to Minimal Reproduction

No response

Steps to Reproduce

<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));

  myChart. setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    showContent: false,
                    axisPointer: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0)',
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,

                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'right',
                        splitNumber: 4,
                        axisTick: {
                            inside: true,
                        },
                        axisLabel: {
                            inside: true,
                            showMinLabel: false,
                        },
                        splitLine: {
                            show: false,
                        }
                    }
                ],
                series: [
                    {
                        data: [],
                        type: 'line',
                        symbol: 'circle',
                        showSymbol: false,
                        symbolSize: 10,
                        itemStyle: {
                            color: 'blue',
                            borderColor: 'yellow',
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 10
                        },
                        label: {
                            show: true,
                            position: 'right',
                            distance: 10,
                            padding: 10,
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: 'rgba(0, 0, 0, .6)',
                            formatter: function (params) {
                                return [`价格 ：{a|￥${params.data[0]}}`, `总量 ：{a|${Math.round(params.data[1])}}`].join('\n')
                            },
                            rich: {
                                a: {
                                    color: '#fff',
                                    fontSize: '12',
                                    fontWeight: 'bold',
                                    lineHeight: '20',
                                },
                            }
                        },
                        lineStyle: {
                            color: '#008c00',
                        },
                        areaStyle: {
                            color: 'green',
                            opacity: .2,
                        },
                    },
                    {
                        //data11[0].reverse()
                        data: [],
                        type: 'line',
                        symbol: 'circle',
                        showSymbol: false,
                        symbolSize: 10,
                        itemStyle: {
                            color: 'blue',
                            borderColor: 'yellow',
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 10
                        },
                        label: {
                            show: true,
                            position: 'left',
                            distance: 10,
                            padding: 10,
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: 'rgba(0, 0, 0, .6)',
                            formatter: function (params) {
                                return [`价格 ：{a|￥${params.data[0]}}`, `总量 ：{a|${Math.round(params.data[1])}}`].join('\n')
                            },
                            rich: {
                                a: {
                                    color: '#fff',
                                    fontSize: '12',
                                    fontWeight: 'bold',
                                    lineHeight: '20',
                                },
                            }
                        },
                        lineStyle: {
                            color: '#ee3523',
                        },
                        areaStyle: {
                            color: 'red',
                            opacity: .2,
                        },
                    },
                ]
            });


//准备好统一的 callback 函数
const update_mychart = function (res) { //res是json格式的response对象

    // 隐藏加载动画
    myChart.hideLoading();

    // 填入数据
    myChart.setOption({
        series: [

                    {
                        //data11[0].reverse()
                        data: res.data[0].reverse(),

                    },
                ]
    });

};

// 首次显示加载动画
myChart.showLoading();


// 建立socket连接，等待服务器“推送”数据，用回调函数更新图表
$(document).ready(function() {
    const namespace = '/test';
    const socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

    socket.on('server_response', function(res) {
        update_mychart(res);
    });

});

</script>

Current Behavior

x轴顺序错 误

Expected Behavior

如果更正

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response