在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的

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中线状图的X轴坐标标签倾斜样式的更多相关文章

  1. Echarts中太阳图(Sunburst)的实例

    Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...

  2. Echarts学习记录——如何给x轴文字标签添加事件

    Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...

  3. 使用echarts展示线状图信息的时候数据部分数据因为x轴的数据显示不全而隐藏的问题

    在使用echarts来展示数据时,因为数据很多的原因导致x轴显示不全,然后有些数据也隐藏在图表中,所以这个时候我们要在 series 中设置一个属性,让所有的数据都能够展示出来,这里我们需要添加的属性 ...

  4. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  5. echarts中折线图切换为数据视图(表格布局)表头无法对齐解决方法

                dataView: {               show: true,               readOnly: true,               option ...

  6. Angular中innerHTML标签的样式不起作用详解

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...

  7. echarts x轴坐标文字显示不全

    在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻 ...

  8. 第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示"..."

    起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的 ...

  9. echarts中饼状图数据太多进行翻页

    echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...

随机推荐

  1. Mac 快捷键整理(不定期更新)

    刚用Mac, 感到有点困难,记录几个快捷键: 1) 在全屏间切换: ctrl + command + F 2)向后删: Fn + delete

  2. php 基于cookie的sessIon机制

    session_start()是session机制的开始,它有一定概率开启垃圾回收,因为session是存放在文件中,PHP自身的垃圾回收是无效的,SESSION的回收是要删文件的,这个概率是根据ph ...

  3. 菜单下拉效果demo记录

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. winfrom 底层类 验证码

    效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzgxNjcwOQ==/font/5a6L5L2T/fontsize/400/fill/I ...

  5. NoSQL数据库介绍(2)

    2 NoSQL潮流      在这一章中,将一起讨论NoSQL潮流的动机和主要驱动力.以及NoSQL主张的批评和反馈.本章将通过不同的尝试得出结论来分类和描写叙述NoSQL数据库.当中一个分类法将在随 ...

  6. Java之内部类(1) - 为什么需要内部类

    为什么需要内部类 一般来说,内部类继承自某个类或实现某个接口,内部类的代码操作创建它的外围类的对象.所以可以认为内部类提供了某种进入其外围类的窗口. 内部类必须要回答的一个问题是:如果只是需要一个对接 ...

  7. easyui datebox 扩展清空按钮

    /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...

  8. FIS3项目构建

    概述 FIS3采取了类似CSS语法一样的配置风格,易于理解与上手.FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自 ...

  9. 【Shiro】Apache Shiro架构之身份认证(Authentication)

    Shiro系列文章: [Shiro]Apache Shiro架构之权限认证(Authorization) [Shiro]Apache Shiro架构之集成web [Shiro]Apache Shiro ...

  10. win8安装Visual C++ 2015 build tools闪退解决办法

    win8安装Visual C++ 2015 build tools闪退解决办法 安装Visual Studio 2015闪退问题也同样应用此解决办法. 1.控制面板——添加删除程序——启动关闭wind ...