Echartsoption常⽤属性配置⽂档
Echarts option常⽤属性配置
成功绘制⼀个Echarts图表⾄少包含三部分：x轴xAxis、y轴yAxis、系列列表series。
option ={
xAxis:{
type:'category',// x坐标轴类型
data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']// 类⽬数据
},
yAxis:{
type:'value'// y坐标轴类型
},
series:[{
data:[820,932,901,934,1290,1330,1320],// 数据内容数组
type:'line'// 图表类型线形图
}]
};
xAxis常⽤配置
xAxis：直⾓坐标系 grid 中的 x 轴，⼀般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防⽌同个位置多个 x 轴的重叠。
show 是否显⽰坐标轴
show:true / false，Boolean类型，是否显⽰ x 轴，true显⽰，false不显⽰。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
show:true// 显⽰坐标轴
}],
position 坐标轴位置
position:“top” / “bottom”， 字符串类型，默认 grid 中的第⼀个 x 轴在 grid 的下⽅（‘bottom’），第⼆个 x 轴视第⼀个 x 轴的位置放在另⼀侧。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
position:"bottom"// 坐标轴底部显⽰
}],
type 坐标轴类型
type:“类型”，字符串类型
类型可取值：
‘value’ 数值轴，适⽤于连续数据。
‘category’ 类⽬轴，适⽤于离散的类⽬数据。为该类型时类⽬数据可⾃动从 series.data 或 dataset.source 中取，或者可通过xAxis.data 设置类⽬数据。
‘time’ 时间轴，适⽤于连续的时序数据，与数值轴相⽐时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使⽤⽉，星期，⽇还是⼩时范围的刻度。
‘log’ 对数轴。适⽤于对数数据。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
name:"⽇期"// 坐标轴名称
}],
name 坐标轴名称
name:“x轴⾃定义名称” 。字符串类型，默认显⽰在右侧。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
show:true// 显⽰坐标轴
}],
nameTextStyle 坐标轴名称样式
nameTextStyle 是⼀个对象，⾥⾯包含多个属性，例如：
color：坐标轴名称的颜⾊。
fontSize：字体⼤⼩，number类型。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
nameTextStyle:{
color:"rgba(0, 255, 212, 1)",
fontSize:12
}
}],
axisLine 坐标轴轴线相关设置
axisLine 是⼀个对象，⾥⾯包含多个属性，例如：
show:true/false 是否显⽰坐标轴轴线。
lineStyle 轴线样式设置，是⼀个对象，⾥⾯包含多个属性，例如：
color：坐标轴轴线颜⾊。
width：坐标轴轴线的宽度，number类型。
type：坐标轴轴线类型。可选类型：‘solid’、‘dashed’、‘dotted’。
opacity：轴线透明度。number类型，取值范围0~1，0为不绘制轴线。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
axisLine:{// 坐标轴轴线设置
show:true,// 显⽰坐标轴轴线
lineStyle:{// 轴线样式设置
color:"rgba(238, 10, 10, 1)",// 轴线颜⾊
width:1,// 轴线宽度
type:"dashed",// 轴线类型-虚线
opacity:0.8// 轴线透明度0.8
}
}
}],
axisTick 坐标轴刻度相关设置
axisTick是⼀个对象，⾥⾯包含多个属性，例如：
show:true/false，是否显⽰刻度，boolean类型，true为显⽰，false为不显⽰。
inside:true/false，刻度是否朝内，默认朝外，boolean类型，true朝内，false朝外。
length：坐标轴刻度长度，number类型。
lineStyle：刻度样式设置，是⼀个对象，⾥⾯包含多个属性，例如：
color：刻度线的颜⾊。
width：刻度线的宽度，number类型。
type：刻度线的类型。可选类型：‘solid’、‘dashed’、‘dotted’。
opacity：刻度线透明度。number类型，取值范围0~1，0为不绘制刻度线。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
axisTick:{// 坐标轴刻度线设置
show:true,// 显⽰刻度线
inside:false,// 刻度线向外
length:5,// 刻度线长度
lineStyle:{// 刻度线样式设置
width:0,//  刻度线宽度
type:"dashed",//  刻度线类型-虚线
opacity:0.8//  刻度线透明度
}
}
}],
axisLabel 坐标轴刻度标签相关设置
axisLabel 是⼀个对象，⾥⾯包含多个属性，例如：
show:true/false，是否显⽰刻度标签，boolean类型，true显⽰，false不显⽰。
inside:true/false，刻度标签是否朝内，boolean类型，true朝内，false朝外。
rotate：标签旋转⾓度，number类型，刻度标签旋转的⾓度，在类⽬轴的类⽬标签显⽰不下的时候可以通过旋转防⽌标签之间重叠。
旋转的⾓度从 -90 度到 90 度。
margin：刻度标签与轴线之间的距离，number类型。
color：刻度标签⽂字颜⾊。
fontSize：⽂字字体⼤⼩，number类型。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
axisLabel:{// 刻度标签相关设置
show:true,// 显⽰刻度标签
inside:false,// 刻度标签向外
rotate:20,// 标签旋转⾓度
margin:15,// 标签与轴线间距离
color:"rgba(42, 255, 0, 1)",// 标签字体颜⾊
fontSize:16// 标签字体⼤⼩
}
}],
splitLine 坐标轴在 grid 区域中的分隔线
splitLine 是⼀个对象，⾥⾯包含多个属性，例如：
show:true/false，boolean类型，是否显⽰分隔线。默认数值轴显⽰，类⽬轴不显⽰。
lineStyle 分割线样式，是⼀个对象，⾥⾯包含多个属性，例如：
1. color：分隔线颜⾊，字符串或数组类型，可以设置成单个颜⾊。也可以设置成颜⾊数组，分隔线会按数组中颜⾊的顺序依次循环设置
颜⾊。
2. width：分隔线宽度，number类型。
3. type：分割线的类型。可选类型：‘solid’、‘dashed’、‘dotted’。
4. opacity：分割线透明度。number类型，取值范围0~1，0为不绘制分隔线。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
splitLine:{// 分割线设置
show:true,// 显⽰分割线
lineStyle:{// 分割线样式设置
color:"rgba(85, 255, 0, 1)",// 分割线颜⾊
width:2,// 分割线宽度
type:"dashed",// 分割线类型-虚线
opacity:0.5// 分割线透明度0.5
}
}
}],
data 类⽬数据
类⽬数据，在类⽬轴（type: ‘category’）中有效。
xAxis:[{
type:"category",// 坐标轴类型-类⽬轴
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据
}],
xAxis基础配置案例
option ={
color:["#3398DB"],
tooltip:{
trigger:"axis",
axisPointer:{
type:"shadow"
}
},
grid:{},
xAxis:[{
type:"category",// x坐标轴类型
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],// 类⽬数据    show:true,// 显⽰x轴
name:"⽇期",// x轴名称
nameTextStyle:{// 名称样式
color:"rgba(11, 28, 157, 1)",// 颜⾊
fontSize:12// 字体⼤⼩
},
axisLine:{// 轴线设置
show:true,// 显⽰轴线
lineStyle:{// 轴线样式设置
color:"rgba(255, 0, 0, 1)",// 轴线颜⾊
width:0,// 轴线宽度
type:"dashed"// 轴线类型-虚线
}
},
axisTick:{// 坐标轴刻度
show:true,// 显⽰轴刻度
inside:false,// 轴刻度向外
length:5,// 轴刻度长度
lineStyle:{// 轴刻度样式
width:1,// 轴刻度宽度
type:"dashed",// 轴刻度虚线
opacity:0.8// 透明度0.8
}
},
axisLabel:{// 轴标签设置
show:true,// 显⽰轴标签
inside:false,// 标签向外
rotate:20,// 标签旋转⾓度
margin:15,// 标签距离轴线距离
color:"rgba(42, 255, 0, 1)",// 轴标签字体颜⾊
fontSize:16// 轴标签字体⼤⼩
},
splitLine:{// 分割线设置
show:true,// 显⽰分割线
lineStyle:{// 分割线样式设置
rotate属性color:"rgba(85, 255, 0, 1)",// 分割线颜⾊
width:2,// 分割线宽度
type:"dashed",// 分割线类型-虚线
opacity:0.5// 分割线透明度
}
}
}],
yAxis:[{
type:"value"
}],
series:[{
name:"直接访问",
type:"bar",
barWidth:"60%",
data:[10,52,200,334,390,330,220]
}]
}