Echarts 坐标轴
1.坐标轴组件配置项总览
- 坐标轴分为x轴和y轴，操作这两个轴的字段分别为xAxis和yAxis
var option = {
xAxis:{
name:"月份",
axisTick:{},//刻度
axisLabel:{},//刻度值文本
axisLine:{},//坐标轴线
splitLine:{},//网格线 竖直方向
},
yAxis:{
name:"销量",
axisTick:{},//刻度
axisLabel:{},//刻度值文本
axisLine:{},//坐标轴线
splitLine:{},//网格线 水平方向
}
}
2.x轴数据
- x轴数据由xAxis.data进行配置（y轴数据在series中进行配置）,至于数据类型，默认category，一般的折线图，直方图直接设置为category即可
xAxis:{
data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8']
},
3.刻度 axisTick
- 设置刻度的配置项是axisTick，它是一个对象，通过配置其不同属性的值达到不同的效果
xAxis: {
type: 'category',
//x轴刻度
axisTick:{
show:false, //隐藏X轴刻度
},
data: []
},
4.刻度值文本 axisLabel
- 设置刻度值配置项是axisLabel，它是一个对象，通过配置其不同属性的值达到不同的效果，常用的属性如下：
color:文本颜色
rotate:文本旋转角度(number类型，从 -90 度到 90 度)
formatter:刻度标签的内容格式器,可用于给值添加单位，例如 '{value} kg'
5.坐标轴线 axisLine
- 设置坐标轴线配置项是axisLine，它是一个对象，通过配置其不同属性的值达到不同的效果
- x轴默认展示axisLine,y轴默认隐藏
yAxis:{
axisLine:{
show: true
},//坐标轴线
}
6.网格线 splitLine
- 设置刻度值配置项是splitLine，它是一个对象，通过配置其不同属性的值达到不同的效果
- 水平方向的网络线在yAxis中设置，竖直方向的网格线在xAxis中设置
- 常用的属性如下：
show:是否显示网格线，水平方向默认展示，竖直方向默认隐藏
lineStyle：值为对象，线条所有的属性都封装在他里面
lineStyle.color：线条颜色，可以是单个颜色（表示所有的线条都使用这个颜色），也可以是一个数组（为不同线条设置不同的颜色）
lineStyle.width：线条宽度,值为数字
7.双Y轴
- yAxis的值通常是一个对象，如果要配个双Y轴，可以将其配置成一个数组，每个数组元素就代表一个Y轴
- 一般来说，第一个轴在左边，第二个轴在右边
- series中的数据通过 yAxisIndex 选定Y轴
- 双Y轴有各自的网格线（水平方向），这些网格线很难重合，网格线的数量和距离都是自适应的，一般不建议修改，如果要强制合并网格线，可以设定max和interval
yAxis: [{
name: '销量',
max:800,
interval：800/5
},
{
name: '完成率',
max:70,
interval：800/5
}]
8.坐标轴的数值范围
使用下面的两个属性分别设置坐标轴和最小值和最大值：
min:最小值，默认0
max:最大值，默认是series中data里面最大的那个数值（要保证是整十）。
yAxis:{
max:100,
min:0
}
PS：一般情况下，要保证Y轴上的数值在最大值和最小值的范围内。如果超出了这个范围，则超出部分会隐藏，不予显示。
还可以通过缩放来隐藏某些区间的数据（通常这些区间无数据展示）
只在数值轴中（type: 'value'）有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。
yAxis:{
scale:true
}
9.设置留白 boundaryGap
在没有设置max的情况下，坐标轴最大值等于series中data里面最大的那个数值，如果想让坐标轴最大值稍大于data中的最大值，可以使用留白。
非类目轴（数值连续，折线，时间日期）boundaryGap：[0，0]，数值是百分比，第一个是最小值留白，第二个是最大值留白
yAxis: {
boundaryGap:[0,'50%']
},
10.坐标轴名称
name:坐标轴名称
nameLocation：名称位置
nameTextStyle：文本样式
nameGap：坐标轴名称与轴线之间的距离
nameRotate：坐标轴名称与轴线之间的距离
xAxis: {
name:'月份',
nameTextStyle:{
color:'red',//红字
},
data: ["2020-06", "2020-07", "2020-08", "2020-09", "2020-10", "2020-11"]
},
yAxis: {
name:'销量',
nameTextStyle:{
fontStyle:'italic',//斜体
},
},
