直角坐标系下有3种类型的坐标轴（axis）：类目型（category）、数值型（value）和时间型（time）。 （1）类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。 （2）数值型：需要指定数值区间，如果没有指定，将由系统自动计算从而确定计算数值范围，坐标轴内包含数值区间内的全部坐标。 （3）时间型：时间型坐标轴用法与数值型的非常相似，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同而自动切换需要显示的时间粒度，例如：时间跨度为一年，系统将自动显示以月为单位的时间粒度；时间跨度为几个小时，系统将自动显示以分钟为单位的时间粒度。
坐标轴组件的属性如表所示。其中，某些选项仅对特定的类型有效，请注意适用类型。
坐标轴组件属性示意图如图所示。
利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制双x轴和双y轴的折柱混搭图，并设置坐标轴的相关属性，如图所示。 由图可知，有上、下两条横轴，左、右两条纵轴，并且下边的横轴中有一个数据项标签较为突出，这是因为ECharts允许对个别标签进行个性化定义，数组项可设置为一个对象，并使用子属性textStyle设置个性化标签。
该实例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['蒸发量', '降水量', '最低气温', '最高气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true }, dataView: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
xAxis: [ //配置x轴坐标系
{ //指定第一条x轴上的类目数据及格式
type: 'category', position: 'bottom',
boundaryGap: true, show: true,
axisLine: { //设置第一条x轴上的轴线
lineStyle: {
color: 'green', type: 'solid', width: 2
}
},
axisTick: { //设置第一条x轴上的轴刻度标记
show: true, length: 10,
lineStyle: {
color: 'red', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条x轴上的轴文本标记
show: true, interval: 'auto',
rotate: 45, margin: 8,
formatter: '{value}月',
textStyle: {
color: 'blue', fontFamily: 'sans-serif',
fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'
}
},
splitLine: { //设置第一条x轴上的轴分隔线
show: true,
lineStyle: {
color: '#483d8b', type: 'dashed', width: 1
}
},
splitArea: { //设置第一条x轴上的轴分隔区域
show: true,
areaStyle: {
color: ['rgba(144,238,144,0.3)', 'rgba(135,200,250,0.3)']
}
},
data: [
'1', '2', '3', '4', '5',
{ //设置第一条x轴上的轴标签个性化
value: '6',
textStyle: {
color: 'red', fontSize: 30, fontStyle: 'normal',
fontWeight: 'bold'
}
},
'7', '8', '9', '10', '11', '12'
]
},
{ //设置指定第二条x轴上的类目数据
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ //配置y轴组件
{ //指定第一条y轴上的数值型数据及格式
type: 'value', position: 'left',
boundaryGap: [0, 0.1],
axisLine: { //设置第一条y轴上的轴线
show: true,
lineStyle: {
color: 'red', type: 'dashed', width: 2
}
},
axisTick: { //设置第一条y轴上的轴标记
show: true,
length: 10,
lineStyle: {
color: 'green', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条y轴上的标签
show: true, interval: 'auto', rotate: -45, margin: 18,
formatter: '{value} ml',
textStyle: {
color: '#1e90ff', fontFamily: 'verdana',
fontSize: 10, fontStyle: 'normal',
fontWeight: 'bold'
}
},
splitLine: { //设置第一条y轴上的分隔线
show: true,
lineStyle: {
color: '#483d8b', type: 'dotted', width: 2
}
},
splitArea: { //设置第一条y轴上的分隔区域
show: true,
areaStyle: {
color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']
}
}
},
{ //指定第二条y轴上的数值型数据及格式
type: 'value',
splitNumber: 10,
axisLabel: { //设置第二条y轴上的数轴标签
formatter: function (value) {
return value + ' °C'
}
},
splitLine: { //设置第二条y轴上的分隔线
show: false
}
}
],
series: [ //配置数据系列
{ //第一组数据：'蒸发量'
name: '蒸发量', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{ //第二组数据：'降水量'
name: '降水量', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{ //第三组数据：'最低气温'
name: '最低气温', type: 'line',
smooth: true, //设置曲线为平滑
yAxisIndex: 1, //指定这一组数据使用第二条y轴（右边的）
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{ //第四组数据：'最高气温'
name: '最高气温',
smooth: true, //设置曲线为平滑
type: 'line',
yAxisIndex: 1, //指定这一组数据使用在第二条y轴（右边的）
data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
