在利用echarts图形展示数据的时辰 ， x坐标轴的文字 ， 有时辰因为太多了 ， 显示不完整 ， 有时辰可能又比力少 ， 需要全数显示 。 那么 ， 到底该若何设置echarts图形的横坐标距离呢？其实 ， 重点就在于interval的值
需要这些哦
echarts
方式/
1打开echarts官方实例页面 ， 点击第一个折线图 ， 进行演示
文章插图
2进入页面后 ， 可以看到数据比力少 ， 所以横坐标文字全数都显示出来了
文章插图
3点窜左侧的option内容 ， 在xAxis的data数组中再添加两行内容 ， 同时 ， 在series中添加对应数目的值
文章插图
4运行后 ， 可以看到x横坐标已经按照图形大小 ， 主动距离显示了文字 。 若是没有特别要求 ， 这个就可以知足当内容少时 ， 全数显示横坐标文字 ， 当内容多时 ， 主动距离显示文字
文章插图
5【echarts图形的x横坐标文字如何设置间隔显示】在option的xAxis区域添加axisLabel:{interval:0} ， 这个语句的意思是 ， 设置横坐标的文字全数显示 ， 不距离
文章插图
6再次运行就可以看到横坐标的内容全数显示了 ， 可是因为空间不敷 ， 内容都挤到一路去了
文章插图
7将距离值点窜为5 ， axisLabel:{interval:5} ， 再次运行 ， 就可以看到x横坐标内容已经按照要求距离显示了
文章插图
以上内容就是echarts图形的x横坐标文字如何设置间隔显示的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 南路茶有哪些功能？，安徽茶文化
- 为猫咪拍照的六个小妙招
- 猫咪所创造的惊人世界纪录
- 枣茶的功效，大麦茶有什么功效
- 苦荞为什么富含保健功效？
- 香橼茶功效，斗茶歌
- 盆栽无花果图片：让您对无花果有更多的认识
- 橡皮树修剪：整形修剪原理图文
- 一年栽无花果主要剪修方法及配图
- 盆栽无花果怎么修剪？盆栽无花果修剪方法图解