解决ECharts 因X轴数据过多导致重叠显示不全的问题

最新推荐文章于 2024-08-13 15:11:28 发布

耗子他大哥

最新推荐文章于 2024-08-13 15:11:28 发布

阅读量3.7w

点赞数 19

CC 4.0 BY-SA版权

分类专栏：前端--ECharts 文章标签： echarts x轴显示不全倾斜旋转滚动条

本文链接：https://blog.youkuaiyun.com/Zheng_xiao_xin/article/details/80882113

X轴加滚动条
　　通过配置合适的起始位置和结束位置可以做到数据过多不重叠，数据太少也不至于很丑，定位合适的位置后还可以通过手动拉伸滚动条的长度动态的显示不同条目数，对于动态的条目数滚动条要比倾斜数据灵活太多尤其是根据时间段动态显示数据，仅此表示个人观点，强烈推荐。


option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    dataZoom:{
      realtime:true, //拖动滚动条时是否动态的更新图表数据
      height: