echarts图形的x横坐标文字如何设置间隔显示
在利用echarts图形展示数据的时辰，x坐标轴的文字，有时辰因为太多了，显示不完整，有时辰可能又比力少，需要全数显示。那么，到底该若何设置echarts图形的横坐标距离呢？其实，重点就在于interval的值
东西/原料
- echarts
方式/步调
- 1
打开echarts官方实例页面，点击第一个折线图，进行演示
- 2
进入页面后，可以看到数据比力少，所以横坐标文字全数都显示出来了
- 3
点窜左侧的option内容，在xAxis的data数组中再添加两行内容，同时，在series中添加对应数目的值
- 4
运行后，可以看到x横坐标已经按照图形巨细，主动距离显示了文字。若是没有特别要求，这个就可以知足当内容少时，全数显示横坐标文字，当内容多时，主动距离显示文字
- 5
在option的xAxis区域添加axisLabel:{interval:0}，这个语句的意思是，设置横坐标的文字全数显示，不距离
- 6
再次运行就可以看到横坐标的内容全数显示了，可是因为空间不敷，内容都挤到一路去了
- 7
将距离值点窜为5，axisLabel:{interval:5}，再次运行，就可以看到x横坐标内容已经按照要求距离显示了
- 发表于 2019-03-28 22:01
- 阅读 ( 4479 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章