【记录-echarts问题总结】

@年年

已于 2023-01-12 17:09:30 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

于 2023-01-12 15:50:05 首次发布

本文链接：https://blog.csdn.net/daisy_juhua/article/details/128660734

版权

前端专栏收录该内容

13 篇文章

订阅专栏

文章主要讨论了echarts图表显示为空的可能原因，包括引用文件顺序错误和缺少引用文件，并提供了解决方案。此外，还详细介绍了如何调整横坐标文字距离、防止上方坐标随滚动条滚动以及设置legend位置的方法，但发现设置legend位置有时无效。

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

一、echarts获取了数据但图表为空不显示的问题（以前可以查突然不显示了）

报错提示：echarts为被定义-Uncaught ReferenceError: echarts is not defined。

原因总结：1、可能是引用文件和自定义的图表.js文件位置放反，echarts的引用文件必须放置在前面

2、有可能是确少引用文件-我最后引用了echarts.min.js后就解决了

图片显示

二、调整横坐标到文字的距离

  axisLabel: {//坐标轴刻度标签的相关设置。
             // x轴文字倾斜  
             interval: 0,
             rotate: 15,//倾斜度 -90 至 90 默认为0
             margin: 15//横坐标到文字的距离
}

三、上方坐标不随滚动条滚动

图片展示：

调整部分：在xAxisIndex处须得将所有x轴选上

 dataZoom: {
            bottom: 10,//下滑块距离x轴底部的距离
            height: 10,//下滑块手柄的高度调节
            type: 'slider',//类型,滑动块插件
            show: true,//是否显示下滑块
            xAxisIndex: [0][1],//选择的x轴
            start: 0,//初始数据显示多少
            end: 20//初始数据最多显示多少
        },

四、设置legend图表位置无反应

第一次添加align: 'right',

  legend: {
            data: ['白班', '夜班'],
            align: 'right',
        },

修改结果

第二次添加x: 'right',

legend: {
            data: ['白班', '夜班'],
            x: 'right',
        },

修改结果-成功