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
}]