echarts基本應用-更改坐標軸文字樣式、軸名稱、軸刻度、軸線、軸網格、曲線(折線圖)、柱體上面顯示值(柱狀圖)，鼠標懸浮提示

搞數據展示，很多朋友都會用到免費的echarts，echarts官網也有很詳細、很nice的文檔。
下面我根據我這幾天的需求匯總一下經常用到的一些文檔

1、axisLabel:{軸文字，在xAxis或者yAxis根下
　　　　show: true,
　　　　textStyle:{
　　　　　　color: '#333',  //更改坐標軸文字顏色
　　　　　　fontSize : 12      //更改坐標軸文字大小
　　　　}
   }
2、grid:{圖標距離周邊的距離，有top、left、right、boottom，可用百分百
　　left:'1%'
　　right:'1%',
　　bottom:'1%',
　　top:'1%',
　　containLabel: true
 }
3、nameTextStyle:{//軸標題，在xAxis或yAxis根下
　　color:'#333',
　　fontSize:12
 }
4、axisTick:{//軸刻度，在xAxis或yAxis根下
　　show:false
}
5、axisLine:{//軸線，在xAxis或yAxis根下
　　lineStyle:{
　　　　width:1,
　　　　color:'#e5e5e5',
　　　　type:'solid'
　　}
 }
6、splitLine:{//軸網格,在xAxis或yAxis根下
　　show:true,
　　lineStyle:{//網格樣式
　　　　color:['#e5e5e5']
  }
}
7、itemStyle:{折線圖，在series下
　　 normal:{
　　　　lineStyle:{//曲線樣式
　　　　　　color:'#4986F7'
　　　　},
　　　label:{
　　　　 show:true,
　　　　 position:'top',//值顯示在上面,inside在里面
　　　　 textStyle:{
　　　　　　color:'#333',
　　　　　　fontSize:12
　　　　 }
　　　}
   }
}
8、tooltip:{//鼠標懸浮提示
　　position:['50%','50%'],//懸浮位置
　　formatter:function(params){
　　　　return params.name + '<br>' + params.seriesName + ': ' + params.value;
　　}
}

上面是經常用到的api。下面貼完整的代碼：

<divclass="efftect_bottom_echart"id="funnelEchart"></div>
<script>　　
$(document).ready(function(){
　　varfunnelMainEcharts=echarts.init(document.getElementById('funnelEchart'));　　　　
    funnelMainOption={
    　　tooltip: {
        　  trigger: 'axis',//也可以用formatter　　　　　　　　
            axisPointer: {//坐標軸指示器，坐標軸觸發有效　　　　　　　　　　
                type: 'shadow'//默認為直線，可選為：'line'|'shadow'
            }    　　　　　　　　
        }　　　　,
        grid: {
            left: '1%',
            right: '10%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: xArray,
            axisLabel: {
                //x軸文字show: true,
                textStyle: {
                    color: '#333',
                    //更改坐標軸文字顏色fontSize: 12//更改坐標軸文字大小
                }
            },
            axisTick: {
                //x軸刻度show: false
            },
            axisLine: {
                //x軸線lineStyle: {
                    width: 1,
                    color: '#E5E5E5',
                    type: 'solid'
                }
            },
            nameTextStyle: {
                //x軸名稱color: '#333',
                fontSize: 12
            }
        },
        yAxis: {
            type: 'value',
            name: '新增人數',
            splitNumber: 5,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    //更改坐標軸文字顏色fontSize: 12//更改坐標軸文字大小
                }
            },
            axisTick: {
                "show": false
            },
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: '#E5E5E5',
                    type: 'solid'
                }
            },
            nameTextStyle: {
                color: '#333',
                fontSize: 12
            },
            splitLine: {
                //x軸網格show: true,
                lineStyle: {
                    color: ['#E5E5E5']
                }
            }
        },
        series: [{
            data: yArray,
            type: 'line',
            name: '新增人數',
            //curName+'(新增人數)',
            itemStyle: {
                //曲線樣式 normal: {
                     lineStyle: {
                         color: '#4986F7' 
                    }
                } 
            }
        }]
    };
    funnelMainEcharts.setOption(funnelMainOption,true);　　
}) 
</script>