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

j8yoct9x  于 4个月前  发布在  Echarts
关注(0)|答案(2)|浏览(110)

Version

5.33

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

50pmv0ei

50pmv0ei1#

@1163849662 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] Dynamically updates the x-axis data misordered

wrrgggsh

wrrgggsh2#

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

相关问题