Echarts中线状图的X轴坐标标签倾斜样式

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

http://www.cnblogs.com/phpgcs

比如下面的例子中 X轴是常用的日期格式 20140508 这样子

而经过简单的配置，可以达到一个理想的效果，如下

其中相关的需要配置的option参数为：

?





1

2

3

4

formatDate:function(datestring){

    if(datestring.length!=8) return;

    return
datestring.substring(2,4)+‘/‘+datestring.substring(4,6)+‘/‘+datestring.substring(6,8);

},

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

时间： 2024-10-07 10:25:37

Echarts中线状图的X轴坐标标签倾斜样式的相关文章

Echarts中太阳图（Sunburst）的实例

目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ { name: '会员属性', itemStyle: { color: '#777' }, children: [ { name: '会员等级', itemStyle: { color: '#5191d4' }, children: [ { itemStyle: { color: '#777' }, children: [ { name: 'V0'

echarts中 legend 自定义方法和单独定义每个图例的样式和宽高

单独定义echarts中每个图例的样式,自定义图例的点击方法 //用不同样式的图例用数组写对应图例的样式                legend:[{                    top: "15%",                    right: "24%",                    textStyle: {                        color: "#3BAEFE",          

?ECharts中BasicLine图+将mysql数据库中的方式通过echarts可视化

ECharts官网示例: 1 option = { 2 xAxis: { 3 type: 'category', 4 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 5 }, 6 yAxis: { 7 type: 'value' 8 }, 9 series: [{ 10 data: [820, 932, 901, 934, 1290, 1330, 1320], 11 type: 'line' 12 }] 13 }; View Cod

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

1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: 1 //HTML部分 2 <div class="contents" [innerHTML]="contents"></div> 3 4 //TS部分 5 contents = '<p>商品信息栏位<br><span style="color:red;">商品信息介绍</span&g

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

起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的突破点就是echarts的配置了. echarts配置项网址:http://echarts.baidu.com/option.html 最后果然被我找到了 一.先说x||y轴的文案处理: 如图,x轴的配置也就都在这里了 而关于x轴文案的设置,就是这个axisLabel属性了 而跟内容有关的也就是这个forma

echarts中视觉映射器（visualMap）与时间轴（timeline）混用的实现方法

1.简述 echarts中的 timeline 组件,提供了在多个 ECharts option 间进行切换.播放等操作的功能. 与其他组件些不同,它需要操作『多个option』. 所以除了基准的baseOption外,我们还需要设置一个原子option和多个原子option的复合option. 2. baseOption实现方式如下(以石家庄市地图为例): var mapDataByAreaTest = [ //各区域初始值 {name: '长安区', value: 12}, {name: '

Android中如何将子View的坐标转换为父View的坐标

最近打算照着Android的Launcher2源码写一个精简的带有拖动功能的Launcher.在分析DragLayer类的时候发现了一个有趣方法——getDescendantCoordRelativeToSelf.通过一下两篇文章的介绍和自己的实验,总算是弄清楚了该方法的原理. http://blog.csdn.net/hahajluzxb/article/details/8165258 http://www.cnblogs.com/platte/p/3534279.html 下面主要分析一下代

UML中的图

UML的结构分为三部分,基本构造块.公共机制.UML的规则,其中公共机制和UML的规则是为基本构造块服务的,描述了怎样将这几种图有规则的排列到一起.基本构造块又分为事物.关系.图,将事物用关系连接起来就是我们今天所说的UML中的图. 一.导图宏观把控 二.图解 1 .用例图(Use case diagrams):用来描述用户的需求.从用户的角度描述系统的功能并指出各个功能的执行者,强调谁在使用系统,系统为执行者完成哪些功能.(是谁?在干什么?)机房收费系统中一般用户可以查询学生上机记录和自己的登

在百度echarts中添加标识线markLine

在百度echarts中添加标识线,打开以下网址复制代码到输入框,绘制一条直线. http://echarts.baidu.com/echarts2/doc/example/line3.html option = { title : { text: '某楼盘销售情况', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['意向','预购','成交'] }, toolbox: { show : true, featur