echart 折線圖 ---- 座標軸、網格、折線配置

代碼如下：

var orderNumChart;
function loaOrderNumChart() {
    var option = {
        grid: {
            left: '3%',
            right: '3%',
            bottom: '15%',
            top: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,//0刻度開始
            axisTick: {
                show: false//隱藏x座標軸刻度
            },
            //x軸字體樣式
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#42436A',
                    fontSize:'12',

                }
            },
            //x軸顏色
            axisLine: {
                lineStyle: {
                    color: "#e4e4e4",
                }
            },
            data: ['5月', '6月', '7月', '8月', '9月', '10月']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false//隱藏y座標軸
            },
            //y軸字體樣式
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#9495ab',
                    fontSize:'12'
                }
            },
            //網格樣式
            splitLine: {
                show: true,
                lineStyle:{
                    color: '#e4e4e4',
                    width: 1,
                    type: 'solid'
                }
            },
            axisTick: {
                show: false//隱藏y座標軸刻度
            },
        },
        //axisPointer: {  //座標軸指示器，座標軸觸發有效，
            //type: 'line', //默認爲line，line直線，cross十字準星，shadow陰影
            //lineStyle: {
                //color: 'rgba(101,163,255,0.4)'
            //}
        //},
        //指示器
        tooltip: {
            trigger: 'axis',
            formatter: "{b}時 : {c}條告警",
            axisPointer:{
                lineStyle: {
                    color: '#125160'
                }
            }
        },
        series: [{
            data: [2, 4, 5, 8, 6, 2],
            type: 'line',
            symbolSize: 6,//拐點大小
            color:'#5F94FF',//拐點顏色
            //smooth:true,//拐點平滑
            //折線樣式
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2,
                        color: '#5F94FF'
                    }
                }
            },
            //折線下填充漸變顏色
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: 'rgba(1,189,213,.6)'
                        }, {
                            offset: 0.7, color: 'rgba(1,189,213,.2)'
                        }, {
                            offset: 1, color: 'rgba(1,189,213,.05)'
                        }]
                    ),
                }
            },
        }]
    };
    orderNumChart = echarts.init(document.getElementById('order-num-chart'));
    orderNumChart.setOption(option);
}
loaOrderNumChart();

效果圖：

折線下填充漸變顏色：