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。下面贴完整的代码：

<div class="efftect_bottom_echart" id="funnelEchart"></div>
<script>
　　$(document).ready(function(){
　　　　var funnelMainEcharts = 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>