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，它是一個對象，通過配置其不同屬性的值達到不同的效果，常用的屬性如下：
show:默認值true，是否展示刻度

xAxis: {
    type: 'category',
                    
    //x軸刻度
    axisTick:{
        show:false, //隱藏X軸刻度
    },
    data: []
},

4.刻度值 axisLabel

設置刻度值配置項是axisLabel，它是一個對象，通過配置其不同屬性的值達到不同的效果，常用的屬性如下：
color:文本顏色

5.坐標軸線 axisLine

設置坐標軸線配置項是axisLine，它是一個對象，通過配置其不同屬性的值達到不同的效果，常用的屬性如下：
show:是否坐標軸線

6.網格線 splitLine

設置刻度值配置項是splitLine，它是一個對象，通過配置其不同屬性的值達到不同的效果，常用的屬性如下：
show:是否顯示網格線，水平方向默認展示，豎直方向默認隱藏
lineStyle：值為對象，線條所有的屬性都封裝在他里面
lineStyle.color：線條顏色，可以是單個顏色（表示所有的線條都使用這個顏色），也可以是一個數組（為不同線條設置不同的顏色）
lineStyle.width：線條寬度,值為數字

注意：水平方向的網絡線在yAxis中設置，豎直方向的網格線在xAxis中設置

7.雙Y軸

yAxis的值通常是一個對象，如果要配個雙Y軸，可以將其配置成一個數組，每個數組元素就代表一個Y軸,在series中通過yAxisIndex字段指定使用哪個Y軸

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',//斜體
    },
},

11.強制設置坐標軸分割間隔

splitNumber：坐標軸的最小分割段數，默認5
interval：強制設置坐標軸分割間隔

默認情況下，Y軸的間隔是自動計算的，規律如下：
最小有5個段數，也就是4個區間，但是要保證最大值為整十數。且每個區間的值必須好計算（整十數或者整五），還要保證分區數量不能太多，例如：
data中最大值是35，則坐標軸最大值為40。此時4個區間，每個區間是10
data中如果最大值是45，則坐標軸最大值為50。此時為了保證每個區間的數值好計算，分為5個車間，每個區間是10
data中如果最大值是28，則坐標軸最大值為30。此時為了保證每個區間的數值好計算，分為6個車間，每個區間是5
data中如果最大值是85，則坐標軸最大值為100。此時為了保證每個區間的數值好計算，分為5個車間，每個區間是20

一般情況下，讓插件自動設置坐標軸分割間隔已經坐骨滿足需求，但是在一些圖表中，例如雙Y軸，往往每個Y軸的值域不同，導致他們的分割線不能同步，例如

yAxis: [{
    name: '銷量',
    nameTextStyle: {
        fontStyle: 'italic'
    },
},
{
    name: '完成率',
}],
series: [{
    type: 'line',
    yAxisIndex: 0,
    data: [20, 15, 10, 75, 85, 20]
},
{
    type: 'line',
    yAxisIndex: 1,
    data: [0.1, 0.2, 0.5, 0.4, 0.6, 0.35]
}]

思路：要保證網格線同步，就必須保證網格線的數量必須一致。而要固定網格線的數量。就必須知道Y軸的最大值，然后強制設置坐標軸分割間隔。暫時沒有完美的辦法，因為最大值最好時讓插件自己設置，但是這樣的話無法得知最大值的具體數值。這里有個建議：
動態計算2個Y軸的最大值，依次為其設置固定的數值范圍，然后設定interval為max的20%

yAxis: [{
    name: '銷量',
    max:800,
    interval：800/5
},
{
    name: '完成率',
    max:70,
    interval：800/5
}]