坐标轴
下边的选项涉及
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轴
}]
- Series 中使用
yAxis与每个y轴关联 - 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,有另外的教程,标示区域就是标示的内容为一段范围
