echarts系列——echarts各项配置说明，配置项setOption（）echarts各个配置项简要说明总结
最近在使⽤ echarts 时是各种踩坑，然后做个简单的总结，以便⽇后使⽤，分享出来供参考，之前做的时候也是⼀脸懵逼，上⽹搜了好多，也⽐较杂乱，所以就简单的总结⼀下，官⽹也有详细介绍。
theme = {
// 全图默认背景
// backgroundColor: 'rgba(0,0,0,0)',
// 默认⾊板
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'
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,
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'
}
},
axisTick: { // 坐标轴⼩标记
show: false, // 属性show控制显⽰与否，默认不显⽰
inside : false, // 控制⼩标记是否在grid⾥
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#333',
width: 1
}
}
},
textstyleaxisLabel: { // 坐标轴⽂本标签，详见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'
}
}
},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论