echarts X轴 时间轴 数量 不固定 时间错乱



option = {
  xAxis: {
    type: 'category',
  },
  tooltip: {
                        trigger: 'axis',
                    },
  yAxis: {
    type: 'value'
  },
  series:[
     {"name":"03","data":[["07-21 19:56","236.530"],["07-21 20:20","214.525"],["07-21 20:57","252.868"],["07-23 21:34","282.863"],["07-23 22:11","242.859"],["07-23 22:48","272.858"],["07-23 23:25","262.856"],["07-24 00:13","252.771"],["07-26 00:50","22.768"],],"type":"line","smooth":true,"showSymbol":false,"connectNulls":false},
    {"name":"02","data":[["07-22 19:56","234.530"],["07-22 20:20","234.525"],["07-22 20:57","242.868"],["07-22 21:34","242.863"],["07-22 22:11","242.859"],["07-22 22:48","242.858"],["07-22 23:25","242.856"],["07-23 00:02","242.854"],["07-23 00:38","242.855"],["07-23 01:15","242.855"],["07-23 01:51","242.855"],["07-23 02:28","242.856"],["07-23 03:41","242.857"],["07-23 04:18","242.857"],["07-23 04:54","242.858"],["07-23 05:30","242.860"],["07-23 08:36","242.864"],["07-23 09:15","242.865"],["07-23 09:54","242.865"],["07-23 17:15","242.829"],["07-23 17:55","242.823"],["07-23 18:34","242.816"],["07-23 19:13","242.810"],["07-23 19:51","242.805"],["07-23 20:29","242.800"],["07-23 21:07","242.794"],["07-23 21:44","242.788"],["07-23 22:59","242.779"],["07-23 23:36","242.775"],["07-25 00:13","242.771"],["07-25 00:50","242.768"],],"type":"line","smooth":true,"showSymbol":false,"connectNulls":false},
   
    ]
};

img

时间轴错乱，
每条线的时间不固定 时间的数量不固定， 目前 echarts 没有把时间轴顺序排列 而是先画02的线 后画03的线
有没有什么办法能让时间轴从大到小排列？

option = {
  xAxis: {
    type: 'category',
  },
  tooltip: {
                        trigger: 'axis',
                    },
  yAxis: {
    type: 'value'
  },
  series:[
     {"name":"03","data":[["07-21","236.530"],
     ["07-21","214.525"],["07-21","252.868"],["07-23","282.863"],["07-23","242.859"],["07-23","272.858"],["07-23","262.856"],["07-24","252.771"],["07-26","22.768"],],"type":"line","smooth":true,"showSymbol":false,"connectNulls":false},
    {"name":"02","data":[["07-22","234.530"],["07-22","234.525"],["07-22","242.868"],["07-22","242.863"],["07-22","242.859"],["07-22","242.858"],["07-22","242.856"],["07-23","242.854"],["07-23","242.855"],["07-23 ","242.855"],["07-23 ","242.855"],["07-23","242.856"],["07-23","242.857"],["07-23 ","242.857"],["07-23","242.858"],["07-23","242.823"],["07-23","242.816"],["07-23 ","242.810"],["07-23","242.805"],["07-23","242.800"],["07-23","242.794"],["07-23","242.788"],["07-23","242.779"],["07-23","242.775"],["07-25","242.771"],["07-25","242.768"],],"type":"line","smooth":true,"showSymbol":false,"connectNulls":false},
   
    ]
};

精确到日期 X轴依然错乱

要么就一个x轴，自己结合两个X轴。
如果两个完全不同时间，那就搞两个X轴，分开渲染。
你这么搞是echart自己结合的，都错乱了

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7458190
  • 你也可以参考下这篇文章：使用echarts绘制图表X轴数据现实不全，及X轴现实两行问题解决
  • 除此之外, 这篇博客: echarts 柱状图 x轴数据为0占位情况 多X轴展示中的 echarts 柱状图 x轴多维度显示不同数据源 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    在这里插入图片描述
    echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象，如上图，如果不让显示空的，每个维度有几天就显示几条，那怎么解决呢？

    想了两天终于想到了办法，那就是添加多个X轴的数据就可以，在这记录一下，如果哪位有更好的办法，请告知：
    效果图：
    在这里插入图片描述
    代码：

    <!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];

app.configParameters = {
    rotate: {
        min: -90,
        max: 90
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
        }
    },
    position: {
        options: echarts.util.reduce(posList, function (map, pos) {
            map[pos] = pos;
            return map;
        }, {})
    },
    distance: {
        min: 0,
        max: 100
    }
};

app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        var labelOption = {
            normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            }
        };
        myChart.setOption({
            series: [{
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }]
        });
    }
};


var labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
        name: {
            textBorderColor: '#fff'
        }
    }
};

option = {
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
         // 进行数据处理
        formatter: function (params) {
            var html = '';
            if (params.length != 0) {
                // 可以自己打印一下console.info(params[0]);
                var getName = params[0].name;
                html += getName + '<br/>';
                for (var i = 0; i < params.length; i++) {
                    // 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
                    if (params[i].value != null && params[i].value != 0
                        && params[i].value != '') {
                        html += params[i].marker;
                        html += params[i].seriesName + ': ' + params[i].value + '<br/>';
                    }
                }
            }
            return html;
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland', 'www']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            position: 'bottom',
            data: ['2012', '', '', '', '']
        },
        {
            type: 'category',
            axisTick: {show: false},
            position: 'bottom',
            data: ['', '2013', '', '', '']
        },
        {
            type: 'category',
            axisTick: {show: false},
            position: 'bottom',
            data: ['', '', '2014', '', '']
        },
        {
            type: 'category',
            axisTick: {show: false},
            position: 'bottom',
            data: ['', '', '', '2015', '']
        },
        {
            type: 'category',
            axisTick: {show: false},
            position: 'bottom',
            data: ['', '', '', '', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 0,data: [320]},
        {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 0,data: [220]},
        {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 0,data: [332]},
        {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 0,data: [98]},
        {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 1,data: ['',320]},
        {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',220]},
        {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',232]},
        {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',98]},
        {name: 'www',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',345]},
        {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 2,data: ['','',320]},
        {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',420]},
        {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',232]},
        {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',98]},
        {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 3,data: ['','','',320]},
        {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 3,data: ['','','',98]},
        {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 4,data: ['','','','',620]},
        {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',290]},
        {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',98]}   
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>
  • 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    问题标题是如何优化echarts中X轴时间轴数量不固定和错乱的问题？

    问题内容中提到，每条线上的时间点数量不一致，导致时间轴的顺序混乱。你想知道是否有办法按照时间从大到小排列时间轴，并且能够精确到日期级别的排序。

    解决方案如下：

    1. 在echarts中，使用type: 'time'来定义X轴为时间轴，并使用boundaryGap: false来确保日期能够精确到具体的时间点。 javascript xAxis: { type: 'time', boundaryGap: false, },

    2. 针对每条线上的时间点数量不一致的问题，可以使用data数组中的value属性来指定每个数据点的具体时间。将时间按照从大到小的顺序排列。 javascript series: [ { name: '线1', type: 'line', data: [ { value: ['2018-01-01', 100] }, { value: ['2018-01-03', 200] }, { value: ['2018-01-05', 300] }, ], }, { name: '线2', type: 'line', data: [ { value: ['2018-01-02', 150] }, { value: ['2018-01-04', 250] }, ], }, ],

    3. 为了确保时间轴按照从大到小的顺序排列，你可以在绘图之前对数据进行排序。可以使用Array.sort()方法并传入自定义的比较函数来实现按照时间从大到小排序。 javascript option.series.forEach(function (item) { item.data.sort(function (a, b) { return new Date(b.value[0]) - new Date(a.value[0]); }); });

    4. 另外，如果你想要精确到日期级别的排序，你可以在设置下X轴的axisLabel属性中设置formatter属性为yyyy-MM-dd来指定日期格式。 javascript xAxis: { type: 'time', boundaryGap: false, axisLabel: { formatter: function (value) { return echarts.format.formatTime('yyyy-MM-dd', value); }, }, },

    以上是解决问题的具体步骤和代码示例，希望能帮到你。如果你有任何其他问题，请随时问我。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

需要手动指定xAxis的值，否则echarts会自动取值

// 将所有时间排序赋值
data: ["07-21 19:56","07-21 20:20","07-21 20:57","07-22 19:56","07-22 20:20","07-22 20:57","07-22 21:34","07-22 22:11","07-22 22:48","07-22 23:25","07-23 00:02","07-23 00:38","07-23 01:15","07-23 01:51","07-23 02:28","07-23 03:41","07-23 04:18","07-23 04:54","07-23 05:30","07-23 08:36","07-23 09:15","07-23 09:54","07-23 17:15","07-23 17:55","07-23 18:34","07-23 19:13","07-23 19:51","07-23 20:29","07-23 21:07","07-23 21:34","07-23 21:44","07-23 22:11","07-23 22:48","07-23 22:59","07-23 23:25","07-23 23:36","07-24 00:13","07-25 00:13","07-25 00:50","07-26 00:50"]

img