Echarts中线状图的X轴坐标标签倾斜样式
2014-05-08 14:02
330 查看
在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的
http://www.cnblogs.com/phpgcs
比如下面的例子中 X轴是常用的日期格式 20140508 这样子
而经过简单的配置,可以达到一个理想的效果,如下
其中相关的需要配置的option参数为:
其中
axisLabel rotate: 60度角是倾斜的控制所在
grid: y2:100 可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
list.push(App.formatDate(x));是处理 20140508 -> 140508
http://www.cnblogs.com/phpgcs
比如下面的例子中 X轴是常用的日期格式 20140508 这样子
而经过简单的配置,可以达到一个理想的效果,如下
其中相关的需要配置的option参数为:
formatDate:function(datestring){ if(datestring.length!=8) return; return datestring.substring(2,4)+'/'+datestring.substring(4,6)+'/'+datestring.substring(6,8); },
xAxis : [ { axisLabel: { rotate: 60, }, data : function(){ var list = []; for (var x in data) { if (x != '') list.push(App.formatDate(x)); } return list; }() } ], grid: { x: 40, x2: 20, y2: 100, },
其中
axisLabel rotate: 60度角是倾斜的控制所在
grid: y2:100 可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
list.push(App.formatDate(x));是处理 20140508 -> 140508
相关文章推荐
- echarts折线图柱状图的坐标轴的颜色及样式的设置
- echarts折线图柱状图的坐标轴的颜色及样式的设置
- ECharts坐标轴文本标签全部显示
- ECharts 坐标轴标签、tooltip文本格式化
- Echarts横坐标倾斜,顶部显示数字
- ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示
- echarts直角图形的x轴坐标的标签添加click事件
- 为什么我的echarts字体样式这么丑?Echarts 柱状图、饼图 等标签、字体、样式调整
- Echarts横坐标倾斜,顶部显示数字
- highcharts 坐标轴标签样式调整
- 标签样式[请使用空格或逗号分隔不同标签]
- echarts-设置折线样式和X轴和Y轴的分割线样式
- 当前a标签保持样式,其余恢复
- Bootstrap基础2——基本标签,样式使用
- ECharts概念学习系列之ECharts官网教程之个性化图表的样式(图文详解)
- html中optgroup 标签用法,分组、只读的且呈树状样式显示
- highcharts坐标轴标签格式化回调函数formatter:function中引用series中的数据
- Yii2 定制表单输入字段的标签和样式
- echarts x轴坐标文字显示不全
- 细说A标签的样式