echarts折线图横轴标签间隔

Echarts折线图展示时，如果横轴是按分钟展示数据，并且要一次展示一小时数据，那么横轴上会有60个标签，这样会导致数据会重叠在一起，展示效果不理想，此时可以横轴标签的间隔，比如每5分钟展示一个横轴标签，设置方式：

在echarts的脚本中，找到横轴标签处：

xAxis : [

{

type : 'category',

boundaryGap : false,

data : ${categoryData},//['周一','周二','周三','周四','周五','周六','周日']

axisLabel:{

interval:4,

}

在里边增加：

axisLabel:{

interval:4,

}

表示每间隔4个点显示一个标签，展示效果如图：

echarts折线图横轴标签间隔相关推荐

1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
echarts折线图颜色-折线图颜色设置-线条设置
原图: 需要实现的效果: 开始修改 1.首先去掉x轴以及y轴刻度线及坐标线,留下刻度值需要设置xAxis和yAxis里的axisLine 以及axisTick xAxis xAxis: {//设置 ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false

echarts折线图横轴标签间隔

echarts折线图横轴标签间隔相关推荐

最新文章

热门文章