Echarts中线状图的X轴坐标标签倾斜样式
2024-09-02 09:47:00
在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的
比如下面的例子中 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
最新文章
- Java数组的复制Arrays.copyOf()、System.arraycopy()、nums.clone()
- IntelliJ IDEA14 配置 SVN
- Python copy and deepcopy
- Ubuntu创建launcher
- solr 竞价排行
- NPOI--操作Excel之利器(二)
- 使用Dropbox提高个人数据管理效率
- C# winform线程的使用 制作提醒休息小程序(长时间计算机工作者必备)
- 【Nutch2.2.1基础教程之6】Nutch2.2.1抓取流程
- eclipse 配置android sdk和maven
- 透过浏览器看HTTP缓存[转载]
- 关于boostrap的modal隐藏问题(前端框架)
- 使用Git Bash从Git上下载代码到本地以及上传代码到码云Git
- mysql8 出现1521错误解决方法
- PHP 无限极分类下拉列表实现
- 坑之mysql 字符串与数字操作
- CentOS7 使用ifconfig命令 ENS33没有IP地址的解决办法
- php发送邮件(TP5)
- 合服导致 globalserver 起不来的问题
- 【BZOJ1922】大陆争霸(最短路)