echarts通过ajax动态加载数据x轴显示不全问题

最新推荐文章于 2023-02-22 15:07:38 发布

原创最新推荐文章于 2023-02-22 15:07:38 发布 · 871 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

实习经历专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Echarts在通过Ajax动态加载数据时遇到的X轴数据显示不全的问题，分析了原因是图表初始化宽度不足。提供了解决方法，包括调整容器宽度和启用x轴数据Zoom功能，详细代码示例可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

X轴数据显示不全问题

原本应该显示的x轴数据

在这里插入图片描述

实际上图表中展示的x轴数据

在这里插入图片描述

原因

是图表初始化的宽度的问题

解决方法

1、将容器初始化的宽度拓宽

这里宽度设置为1400px，成功显示了所有数据

<div  id="linetable"  style="width:1400px;height:400px;">

</div>

在这里插入图片描述
2、增加x轴的滚动条

具体可以参考echarts官网文档关于dataZoom的教程：dataZoom

如果对容器宽度有限制的话，可以使用滚动条的形式，只需要在options中增加下面的代码

dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }],

在这里插入图片描述

完整代码


function showLinedata(appNameList) {

        //初始化echarts实例
        var myCharts = echarts.init(document.getElementById("linetable"));

        var data = ["asdad","sdadafas", 'asfregf' , "asdwegtth", "ffrhgr",'asdasdasd' , "fdefasff" , "rgsdfs"] ;
		//appNameList是通过ajax获取的数据 ， 将appNameList与data合并，作为x轴
        for (var i = 0; i <appNameList.length ; i++) {
            data.push(appNameList[i])
        }
        //设置图表的配置项和数据
        var options = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisTick :10 ,
                data: data
            },
            //配置x轴的滚动条，可以将所有x轴数据都显示出来
            dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }],
            axisLabel:{
                interval:0
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320,213,445,57,68,9897,7667],
                type: 'line'
            }]
        };

        //使用配置创建图表
        myCharts.setOption(options);