04坐标轴

坐标轴

下边的选项涉及xAxis或者yAxis,但有的层层嵌套

坐标轴组成

• axis Title
• axis Labels
• axis Tick,坐标刻度
• axis gridLines
• multiple axis，多坐标

坐标轴标题axis Title

title 是一个对象，包含了以下选项

• align
• margin
• offset
• rotation
• style
• text
• x
• y

坐标轴刻度标签axis Labels

labels 是一个对象，包含了以下选项

• enabled，是否启用Labels,默认启用
• formatter,Labels的格式化函数。比如，根据刻度数显示不同的label
• step，Labels显示间隔数
• staggerLines,水平轴显示行数。比如，水平轴内容过多，显示两行

formatter: function () {
    // this
    if(this.value <=100) { 
        return "第一等级("+this.value+")";
      }else if(this.value >100 && this.value <=200) { 
        return "第二等级("+this.value+")"; 
      }else { 
        return "第三等级("+this.value+")";
      }
}

坐标轴刻度axis Tick

以下的属性直接属于xAxis或者yAxis,x坐标默认是高5px,宽1px的细线。y轴默认没有刻度

• tickLength
• tickWidth
• tickColor
• tickInterval，控制刻度间隔，它比labels.step更常用
• tickmarkPlacement，刻度对齐方式

坐标轴网格线axis gridLines

以下的属性直接属于xAxis或者yAxis

• gridLineWidth
• gridLineColor
• gridLineDashStyle,网格样式，solid,dot,dash

多轴

与数据有关

yAxis: [{
    // 省略代码
},{
    // 省略代码
    opposite: true // 该属性设置y轴在右侧
}],
series: [{
    type: 'line',
    yAxis: 0 // 使用第一个 y轴
},{
     type: 'spline',
     yAxis: 1 // 使用第二个 y轴
}]

1. Series 中使用yAxis与每个y轴关联
2. Series 中使用type设置的是图表的类型，yAxis中type设置的是y轴的类型

• linear
• logarithmic，比如：1，2，4，8
• datetime，时间轴

yAxis: {
    type: 'linear',
}
// x轴分类
xAxis: {
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}

其它属性

以下的属性直接属于xAxis或者yAxis

• inverted,图表上x轴和y轴位置互换
• reversed,轴反转，比如，y轴最小值换到了上面
• opposite,轴倒置，比如，x轴换到上边，y轴换到右边
• allowDecimals，数轴是否显示小数
• min、max，控制数轴的最小值和最大值
• plotLines，有另外的教程，标示线就是用来标记坐标轴上特殊值的一条直线
• plotBands,有另外的教程,标示区域就是标示的内容为一段范围