echarts 折线图两条或两条以上x轴(含有不连续时间轴数据),series方式展示时间不能排序

disbfnqx  于 2022-10-26  发布在  Echarts
关注(0)|答案(4)|浏览(401)

Version

5.0.0

Steps to reproduce

echarts版本是5.0.0,我是用series方式显示时间轴的,但是series方式展示时间不能排序,时间小的反而在后面展示了(即,2020-10-9 00:00:00展示在2020-10-9 00:00:02的后面了),我想要让两个折线按照时间来排序如何做?即2020-10-9 00:00:00展示在2020-10-9 00:00:02的前面这种时间升序格式

var dataTemperature =
[
['2020-10-9 00:00:00', 11], ['2020-10-9 15:00:01', 29], ['2020-10-9 15:00:08', 6]
];
var dataTemperatureB =
[
['2020-10-9 00:00:02', 14], ['2020-10-9 15:00:04', 35], ['2020-10-9 15:00:12', 8]
];

        var myChart = echarts.init(document.getElementById('trendChart'));
        var option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            backgroundColor: '#ececf2',
            //title: {
            //    left: 'center',
            //    text: '大数据量面积图',
            //},
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['温度'],
                x: 'left'
            },
            xAxis: {
                // 根据x轴数据决定type类型
                type: 'time',
                boundaryGap: false
                // 注: x轴不指定data,自动会从series取
                //data: []
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '10%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name: 'A相电流',
                    type: 'line',
                    smooth: true,
                    //symbol: 'none',
                    //sampling: 'average',
                    //itemStyle: {
                    //    color: 'rgb(300,100,100)'
                    //},
                    data: dataTemperature,
                    connectNulls: false
                },
                {
                    name: 'B相电流',
                    type: 'line',
                    smooth: true,
                    //symbol: 'none',
                    //sampling: 'average',
                    //itemStyle: {
                    //    color: 'rgb(300,100,100)'
                    //},
                    data: dataTemperatureB,
                    connectNulls: false
                }
            ]
        };

        myChart.setOption(option);`

What is expected?

我想要让两个折线按照时间来排序如何做?即2020-10-9 00:00:00展示在2020-10-9 00:00:02的前面这种时间升序格式

What is actually happening?

series方式展示时间不能排序,时间小的反而在后面展示了(即,2020-10-9 00:00:00展示在2020-10-9 00:00:02的后面了),这是错误的

6yoyoihd

6yoyoihd1#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure thatyou have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list .

Have a nice day! 🍵

vmjh9lq9

vmjh9lq92#

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

TRANSLATED

TITLE

Line chart with two or more x-axes (including discontinuous time-axis data), display time in series mode cannot be sorted

BODY

Version

5.0.0

Steps to reproduce

The version of echarts is 5.0.0. I display the time axis in series mode, but the display time in series mode cannot be sorted. The time is small and displayed later (that is, 2020-10-9 00:00:00 is displayed in 2020- 10-9 00:00:02), how do I want the two polylines to be sorted by time? That is, 2020-10-9 00:00:00 is displayed in front of 2020-10-9 00:00:02 in this time ascending format

`var dataTemperature =
[
['2020-10-9 00:00:00', 11], ['2020-10-9 15:00:01', 29], ['2020-10-9 15:00:08', 6]
];
var dataTemperatureB =
[
['2020-10-9 00:00:02', 14], ['2020-10-9 15:00:04', 35], ['2020-10-9 15:00:12', 8]
];

var myChart = echarts.init(document.getElementById('trendChart'));
    var option = {
        tooltip: {
            trigger:'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        backgroundColor:'#ececf2',
        //title: {
        // left:'center',
        // text:'Large data area chart',
        //},
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex:'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['Temperature'],
            x:'left'
        },
        xAxis: {
            // Determine the type according to the x-axis data
            type:'time',
            boundaryGap: false
            // Note: If data is not specified on the x-axis, it will be automatically taken from the series
            //data: []
        },
        yAxis: {
            type:'value',
            boundaryGap: [0, '10%']
        },
        dataZoom: [{
            type:'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon:'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9- 0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z ',
            handleSize: '80%',
            handleStyle: {
                color:'#fff',
                shadowBlur: 3,
                shadowColor:'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name:'Phase A current',
                type:'line',
                smooth: true,
                //symbol:'none',
                //sampling:'average',
                //itemStyle: {
                // color:'rgb(300,100,100)'
                //},
                data: dataTemperature,
                connectNulls: false
            },
            {
                name:'Phase B current',
                type:'line',
                smooth: true,
                //symbol:'none',
                //sampling:'average',
                //itemStyle: {
                // color:'rgb(300,100,100)'
                //},
                data: dataTemperatureB,
                connectNulls: false
            }
        ]
    };

    myChart.setOption(option);`

What is expected?

How do I want to sort the two polylines according to time? That is, 2020-10-9 00:00:00 is displayed in front of 2020-10-9 00:00:02 in this time ascending format

What is actually happening?

The display time in series mode cannot be sorted, and the shorter time is displayed later (that is, 2020-10-9 00:00:00 is displayed after 2020-10-9 00:00:02), this is wrong

q0qdq0h2

q0qdq0h23#

怎么没人解决吗?

m2xkgtsf

m2xkgtsf4#

this problem exists in last version too !

相关问题