在利用echarts图形展示数据的时辰 ， x坐标轴的文字 ， 有时辰因为太多了 ， 显示不完整 ， 有时辰可能又比力少 ， 需要全数显示 。 那么 ， 到底该若何设置echarts图形的横坐标距离呢？其实 ， 重点就在于interval的值
需要这些哦
echarts
方式/
1打开echarts官方实例页面 ， 点击第一个折线图 ， 进行演示
文章插图
2进入页面后 ， 可以看到数据比力少 ， 所以横坐标文字全数都显示出来了
文章插图
3点窜左侧的option内容 ， 在xAxis的data数组中再添加两行内容 ， 同时 ， 在series中添加对应数目的值
文章插图
4运行后 ， 可以看到x横坐标已经按照图形大小 ， 主动距离显示了文字 。 若是没有特别要求 ， 这个就可以知足当内容少时 ， 全数显示横坐标文字 ， 当内容多时 ， 主动距离显示文字
文章插图
5在option的xAxis区域添加axisLabel:{interval:0} ， 这个语句的意思是 ， 设置横坐标的文字全数显示 ， 不距离
文章插图
6再次运行就可以看到横坐标的内容全数显示了 ， 可是因为空间不敷 ， 内容都挤到一路去了
文章插图
7【echarts图形的x横坐标文字如何设置间隔显示】将距离值点窜为5 ， axisLabel:{interval:5} ， 再次运行 ， 就可以看到x横坐标内容已经按照要求距离显示了
文章插图
以上内容就是echarts图形的x横坐标文字如何设置间隔显示的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 众志成城同心战疫手抄报 众志成城同心战疫手抄报画法
- 孙悟空简笔画怎么画孙悟空简笔画画法
- 巴南区图书馆在哪里，楼层分布情况是什么样的
- 古装漫画人物简笔画
- 情人节爱心礼物盒简笔画
- 鼠年 小老鼠拜年简笔画
- 「流浪大师」爆红后的 72 小时
- 美图秀秀怎么制作九宫格
- 百度地图中如何自定义导航播报的内容
- 如何将图片制作gif动态图