echarts属性的设置（完整⼤全）echarts属性的设置（完整⼤全）
图表标题
title:{
x:'left',// ⽔平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y:'top',// 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null          // ⽔平对齐⽅式，默认根据x设置⾃动调整
backgroundColor:'rgba(0,0,0,0)',
borderColor:'#ccc',// 标题边框颜⾊
borderWidth:0,// 标题边框线宽，单位px，默认为0（⽆边框）
padding:5,// 标题内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap:10,// 主副标题纵向间隔，单位px，默认为10，
textStyle:{
fontSize:18,
fontWeight:'bolder',
color:'#333'// 主标题⽂字颜⾊
},
subtextStyle:{
color:'#aaa'// 副标题⽂字颜⾊
}
},
图例
legend:{
orient:'horizontal',// 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
x:'center',// ⽔平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y:'top',// 垂直安放位置，默认为全图顶端，可选为：
/
/ 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor:'rgba(0,0,0,0)',
borderColor:'#ccc',// 图例边框颜⾊
borderWidth:0,// 图例边框线宽，单位px，默认为0（⽆边框）
padding:5,// 图例内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap:10,// 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemWidth:20,// 图例图形宽度
itemHeight:14,// 图例图形⾼度
textStyle:{
color:'#333'// 图例⽂字颜⾊
}
},
值域
dataRange:{
orient:'vertical',// 布局⽅式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x:'left',// ⽔平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y:'bottom',// 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor:'rgba(0,0,0,0)',
borderColor:'#ccc',// 值域边框颜⾊
borderWidth:0,// 值域边框线宽，单位px，默认为0（⽆边框）
padding:5,// 值域内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap:10,// 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemWidth:20,// 值域图形宽度，线性渐变⽔平布局宽度为该值 * 10        itemHeight:14,// 值域图形⾼度，线性渐变垂直布局⾼度为该值 * 10        splitNumber:5,// 分割段数，默认为5，为0时为线性渐变
color:['#1e90ff','#f0ffff'],//颜⾊
//text:['⾼','低'],        // ⽂本，默认为数值⽂本
textStyle:{
color:'#333'// 值域⽂字颜⾊
}
},
toolbox:{
orient:'horizontal',// 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
rotate属性x:'right',// ⽔平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
/
/ ¦ {number}（x坐标，单位px）
y:'top',// 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color :['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor:'rgba(0,0,0,0)',// ⼯具箱背景颜⾊
borderColor:'#ccc',// ⼯具箱边框颜⾊
borderWidth:0,// ⼯具箱边框线宽，单位px，默认为0（⽆边框）        padding:5,// ⼯具箱内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap:10,// 各个item之间的间隔，单位px，默认为10，
// 横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemSize:16,// ⼯具箱图形宽度
featureImageIcon :{},// ⾃定义图⽚icon
featureTitle :{
mark :'辅助线开关',
markUndo :'删除辅助线',
markClear :'清空辅助线',
dataZoom :'区域缩放',
dataZoomReset :'区域缩放后退',
dataView :'数据视图',
lineChart :'折线图切换',
barChart :'柱形图切换',
restore :'还原',
saveAsImage :'保存为图⽚'
}
},
提⽰框
tooltip:{
trigger:'item',// 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'        showDelay:20,// 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms
hideDelay:100,// 隐藏延迟，单位ms
transitionDuration :0.4,// 动画变换时间，单位s
backgroundColor:'rgba(0,0,0,0.7)',// 提⽰背景颜⾊，默认为透明度为0.7的⿊⾊        borderColor:'#333',// 提⽰边框颜⾊
borderRadius:4,// 提⽰边框圆⾓，单位px，默认为4
borderWidth:0,// 提⽰边框线宽，单位px，默认为0（⽆边框）
padding:5,// 提⽰内边距，单位px，默认各⽅向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer :{// 坐标轴指⽰器，坐标轴触发有效
type :'line',// 默认为直线，可选为：'line' | 'shadow'
lineStyle :{// 直线指⽰器样式设置
color:'#48b',
width:2,
type:'solid'
},
shadowStyle :{// 阴影指⽰器样式设置
width:'auto',// 阴影⼤⼩
color:'rgba(150,150,150,0.3)'// 阴影颜⾊
}
},
textStyle:{
color:'#fff'
}
},
区域缩放控制器
dataZoom:{
orient:'horizontal',// 布局⽅式，默认为⽔平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number},            // ⽔平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number},      // 指定⾼度，纵向布局时默认为根据grid参数适配
backgroundColor:'rgba(0,0,0,0)',// 背景颜⾊
dataBackgroundColor:'#eee',// 数据背景颜⾊
fillerColor:'rgba(144,197,237,0.2)',// 填充颜⾊
handleColor:'rgba(70,130,180,0.8)'// ⼿柄颜⾊
},
⽹格
grid:{
x:80,
y:60,
x2:80,
y2:60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor:'rgba(0,0,0,0)',
borderWidth:1,
borderColor:'#ccc'
},
类⽬轴
categoryAxis:{
position:'bottom',// 位置
nameLocation:'end',// 坐标轴名字位置，⽀持'start' | 'end'
boundaryGap:true,// 类⽬起始和结束两端空⽩策略
axisLine:{// 坐标轴线
show:true,// 默认显⽰，属性show控制显⽰与否
lineStyle:{// 属性lineStyle控制线条样式
color:'#48b',
width:2,
type:'solid'
}
},
axisTick:{// 坐标轴⼩标记
show:true,// 属性show控制显⽰与否，默认不显⽰
interval:'auto',
// onGap: null,
inside :false,// 控制⼩标记是否在grid⾥
length :5,// 属性length控制线长
lineStyle:{// 属性lineStyle控制线条样式
color:'#333',
width:1
}
},
axisLabel:{// 坐标轴⽂本标签，详见axis.axisLabel
show:true,
interval:'auto',
rotate:0,
margin:8,
// formatter: null,
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE                color:'#333'
}
},
splitLine:{// 分隔线
show:true,// 默认显⽰，属性show控制显⽰与否
// onGap: null,
lineStyle:{// 属性lineStyle（详见lineStyle）控制线条样式
color:['#ccc'],
width:1,
type:'solid'
}
},
splitArea:{// 分隔区域
show:false,// 默认不显⽰，属性show控制显⽰与否
// onGap: null,
areaStyle:{// 属性areaStyle（详见areaStyle）控制区域样式
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'] }
}
},
数值型坐标轴默认参数
valueAxis:{
position:'left',// 位置
nameLocation:'end',// 坐标轴名字位置，⽀持'start' | 'end'
nameTextStyle:{},// 坐标轴⽂字样式，默认取全局样式
boundaryGap:[0,0],// 数值起始和结束两端空⽩策略
splitNumber:5,// 分割段数，默认为5
axisLine:{// 坐标轴线
show:true,// 默认显⽰，属性show控制显⽰与否
lineStyle:{// 属性lineStyle控制线条样式
color:'#48b',
width:2,
type:'solid'
type:'solid'
}
},
axisTick:{// 坐标轴⼩标记
show:false,// 属性show控制显⽰与否，默认不显⽰
inside :false,// 控制⼩标记是否在grid⾥
length :5,// 属性length控制线长
lineStyle:{// 属性lineStyle控制线条样式
color:'#333',
width:1
}
},
axisLabel:{// 坐标轴⽂本标签，详见axis.axisLabel
show:true,
rotate:0,
margin:8,
// formatter: null,
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE                color:'#333'
}
},
splitLine:{// 分隔线
show:true,// 默认显⽰，属性show控制显⽰与否
lineStyle:{// 属性lineStyle（详见lineStyle）控制线条样式
color:['#ccc'],
width:1,
type:'solid'
}
},
splitArea:{// 分隔区域
show:false,// 默认不显⽰，属性show控制显⽰与否
areaStyle:{// 属性areaStyle（详见areaStyle）控制区域样式
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'] }
}
},
polar :{
center :['50%','50%'],// 默认全局居中
radius :'75%',
startAngle :90,
splitNumber :5,
name :{
show:true,
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE                color:'#333'
}
},
axisLine:{// 坐标轴线
show:true,// 默认显⽰，属性show控制显⽰与否
lineStyle:{// 属性lineStyle控制线条样式
color:'#ccc',
width:1,
type:'solid'
}
},
axisLabel:{// 坐标轴⽂本标签，详见axis.axisLabel
show:false,
textStyle:{// 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE                color:'#333'
}
},
splitArea :{
show :true,
areaStyle :{
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。