echarts属性设置，字体颜⾊、隐藏属性、坐标轴、⽹格线隐藏坐标轴：
axisLine:{ //y轴
show:false
},
隐藏⽹格线：
splitLine: { //⽹格线
show: false
}, 
隐藏刻度线：
axisTick:{ //y轴刻度线
show:false
},
y轴字体颜⾊：
axisLabel : {
textStyle: {
color: '#fff'
}
}
}
// 默认⾊板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
// 图表标题
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'
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',      // 位置
htmlbordernameLocation: 'end',  // 坐标轴名字位置，⽀持'start' | 'end'
nameTextStyle: {},    // 坐标轴⽂字样式，默认取全局样式
boundaryGap: [0, 0],  // 数值起始和结束两端空⽩策略
splitNumber: 5,        // 分割段数，默认为5
axisLine: {            // 坐标轴线
show: true,        // 默认显⽰，属性show控制显⽰与否
lineStyle: {      // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
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)']
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#ccc'
}
}
},
// 柱形图默认参数
bar: {
barMinHeight: 0,          // 最⼩⾼度改为0
// barWidth: null,        // 默认⾃适应
barGap: '30%',            // 柱间距离，默认为柱形宽度的30%，可设固定值
barCategoryGap : '20%',  // 类⽬间柱形距离，默认为类⽬间距的20%，可设固定值    itemStyle: {
normal: {
// color: '各异',
barBorderColor: '#fff',      // 柱条边线
barBorderRadius: 0,          // 柱条边线圆⾓，单位px，默认为0
barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
//          'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null      // 默认使⽤全局⽂本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: '各异',
barBorderColor: 'rgba(0,0,0,0)',  // 柱条边线
barBorderRadius: 0,                // 柱条边线圆⾓，单位px，默认为0
barBorderWidth: 1,                // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
//          'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null      // 默认使⽤全局⽂本样式，详见TEXTSTYLE
}
}
}
},
// 折线图默认参数
line: {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
//          'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null      // 默认使⽤全局⽂本样式，详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor : 'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各异,
label: {
show: false
/
/ position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
//          'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null      // 默认使⽤全局⽂本样式，详见TEXTSTYLE
}
}
},

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