摘要：
让我根据这些天的需要总结一些常用文档。1.axisLabel:｛axis text，show:true在xAxis或yAxis根下，textStyle:｛color:“#333”，//更改坐标轴文本颜色fontSize:12//更改坐标轴文字大小｝｝2.grid:｛图标到周围区域的距离，包括顶部、左侧、右侧和引导，可以是100%left:“1%”right:“1%’，底部：“1%”，顶部：“1%‘，containLabel:true｝3 NameTextStyle：｛//轴标题，在xAxis或yAxis根下，color:“#333”，fontSize:12｝4，axisTick:｛//Axis刻度，在xA xis或y轴根下，show:false｝5，axisLine:｛//Axis，在xX xis或Y轴根下的lineStyle:｛1，color=“#e5e5”，type:“solid”｝6，splitLine:｛//Axis网格，在xAxis或yAxis根下，show:true，lineStyle:｛//grid style color:[“#e5e5e5”]｝7项样式：｛折线图，在序列下，normal:｛lineStyle：｛//曲线样式color:“#4986F7”｝，label:｛show:true，position:“top”，//值显示在上面，textStyle：｛color:'#333'，fontSize:12｝｝｝｝8，工具提示：｛//鼠标悬停提示位置：[“50%”，“50%”]，//悬停位置格式：函数｛returnparams.name+“”+params.seriesName+“：”+parames.value；｝｝以上是常用的API。
搞数据展示，很多朋友都会用到免费的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:{
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: {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: { 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>