该内容整合自 博客原文 ，感谢原作者的编写~ 仅用于自己记录学习使用。
title的配置
对应位置：
title: {
show: true, // 是否显示标题组件,（true/false）
text: '', // 主标题文本，支持使用\n换行
textAlign:'auto', //整体水平对齐（包括text和subtext）
textVerticalAlign:'auto',//整体的垂直对齐（包括text和subtext）
padding:0, // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
left:'auto', // title组件离容器左侧距离，写法如'5'||'5%'
right:'auto', //'title组件离容器右侧距离
top:'auto', // title组件离容器上侧距离
bottom:'auto', // title组件离容器下侧距离
borderColor: '', // 标题边框颜色
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
color: '', //字体颜色
fontStyle: '', //字体风格
fontSize: 14, //字体大小
fontWeight: 400, //字体粗细
fontFamily: '', //文字字体
lineHeight: '' //字体行高
align:'center',//文字水平对齐方式（left/right）
verticalAlign:'middle',//文字垂直对齐方式（top/bottom）
},
subtext: '', // 副标题
subtextStyle: { // 副标题样式
color: '#ccc',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'sans-serif',
fontSize:18,
lineHeight:18,
}
}
X轴/Y轴的配置
xAxis: {
id: '',
show: true, //是否显示x轴
gridIndex: 0, //轴所在grid索引，默认位于第一个grid
alignTicks: false, //在多个轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效
position: 'top', //轴的位置（top/bottom）
offset: 0, //轴相对于默认位置的偏移，在相同的position上有多个轴时有用
type: 'category', //坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
name: '', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置，可选值start/middle[或者center]/end
nameTextStyle: {}, //一般样式也很少直接修改且内容过多待更新... ...
nameGap: 15, //坐标轴名称与轴线间距离
nameRotate: 10, //坐标轴名字旋转，角度值
inverse: false, //是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略，也可以使用布尔值，true居中
min: '', //刻度最小值
max: '', //刻度最大值
scale: false, //只在数值轴中type: 'value'有效, 设置min和max后无效。是否是脱离 0 值比例。设置成true后坐标刻度不会强制包含零刻度。在双数值轴的散点图中较有用
splitNumber: 5, //坐标轴的分割段数（预估值）
minInterval: 0, //自动计算坐标轴最小间隔，例：设置成1，刻度没有小数
maxInterval: '', //自动计算坐标轴最大间隔
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, //坐标轴刻度的长度
lineStyle: {
color: '#FFF', //刻度线的颜色
width: 10, //坐标轴刻度线宽
type: 'solid', //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisLabel: {
show: true, //是否显示刻度标签
interval: '0', //坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, //刻度标签是否朝内，默认朝外
rotate: 90, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
margin: 10, //刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 字体的风格（normal无样式；italic斜体；oblique倾斜字体）
fontWeight: 'normal', // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontSize: '20', //文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
color: ['#ccc'], //color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）
fontWeight: 'normal', //字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom）
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
}
}
}
legend的配置
对应位置：
legend: {
type: 'plain', //图例类型，plain/scroll
show: true, //是否显示x轴，布尔值
zlevel: 2, //控制图形的前后顺序
z: 2, //控制图形的前后顺序
left: '', //图例离容器左侧的距离，20/'20%'/'left'/'atuo'等
top: '',
right: '',
bottom: '',
width: 'auto', //宽度，默认自适应
height: 'auto', //高度，默认自适应
orient: 'horizontal', //布局朝向，horizontal/vertical
align: 'auto', //图例标记和文本的对齐，默认自动，auto/left/right
padding: 5, //内边距，默认各方向内边距为5px
itemGap: 10, //图例间隔。横向时为水平间隔，纵向时为纵向间隔
itemWidth: 25, //图形宽度
itemHeight: 14, //图形高度
itemStyle: {
color: '', /颜色，参考下面的文章/
borderColor: '', //描边颜色，支持格式同color，不支持回调函数
borderWidth: auto, //描边宽度，可以为数字默认单位为px
borderType: solid, //描边类型，值：solid默认/dashed/dotted/number/array
borderDashOffset: 0, //虚线偏移量，搭配borderType指定dashed、array实现灵活的虚线效果
borderCap: round //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
},
lineStyle: {
color: '', /颜色，参考下面的文章/
width: auto, //线宽
type: solid, //线的类型，solid默认/dashed/dotted/number/array
dashOffset: 0, //虚线的偏移量，type指定dashed、array实现灵活的虚线效果
cap: round, //指定线段末端的绘制方式，参考上面的'borderCap'
join: auto, //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
miterLimit: 10, //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
//阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowBlur: 10,
shadowColor: '', //阴影颜色，格式同color
shadowOffsetX: 0, //阴影水平方向上偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: auto //透明度，支持从 0 到 1 的数字，为 0 时不绘制该图形
},
symbolRotate: inherit, //旋转角度，类型为number|inherit。若为inherit，表示取系列symbolRotate
formatter: 'Legend {name}', //用来格式化图例文本，支持字符串模板和回调函数两种形式，name为图例名称
selectedMode: true, //图例选择模式，true/false/single/multiple
inactiveColor: '#ccc', //图例关闭时的颜色
inactiveBorderColor: '#ccc', //图例关闭时的描边颜色
inactiveBorderWidth: 'auto', //关闭时的描边粗细，属性值：auto取2/不存在描边取0/inherit始终取系列描边粗细
selected: {
'系列1': true, // 选中'系列1'
'系列2': false // 不选中'系列2'
},
textStyle: {
color: #333, //文字颜色
fontStyle: '', //字体风格
fontWeight: '', //字体粗细
fontFamily: '', //字体系列
fontSize: 12, //字体大小
lineHeight: 16, //行高
backgroundColor: '', //背景色，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框描边类型，属性值：solid/dashed/dotted/number/array
borderDashOffset: 0, //虚线偏移量，可搭配borderType指定dashed/array实现灵活的虚线效果
borderRadius: 0, //文字块圆角
padding: 0, //文字块内边距
shadowColor: 'transparent', //文字块背景阴影颜色
shadowBlur: 0, //文字块背景阴影长度
shadowOffsetX: 0, //文字块背景阴影 X 偏移
shadowOffsetY: 0, //文字块背景阴影 Y 偏移
width: 0, //文本显示宽度
height: 0, //文本显示高度
textBorderColor: '', //文字本身描边颜色
textBorderWidth: '', //文字本身描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0,//虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身阴影长度
textShadowOffsetX: 0, //文字本身阴影 X 偏移
textShadowOffsetY: 0, //文字本身阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时，该属性配置末尾显示文本
rich: {}, //自定义富文本样式
},
tooltip: { //配置项同tooltip。默认不显示
show: true
},
//图例项icon，用来修改默认的图形样式
icon: '', //属性值：circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
data: [{
name: '',
//图例项的icon
icon: 'circle',
itemStyle: { //图例项的图形样式
color: 'red',
borderColor: ''
borderWidth: auto,
borderType: '',
borderDashOffset: 0,
borderCap: inherit,
borderJoin: inherit,
borderMiterLimit: inherit,
shadowBlur: 0,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: inherit,
decal: inherit
},
lineStyle: {}, //同上面的itemStyle
symbolRotate: 'inherit', //图形旋转角度
textStyle: {} //图例项的文本样式
}],
backgroundColor: 'transparent', //图例背景色，默认透明
borderColor: '#ccc', //边框颜色
borderWidth: 1, //边框线宽
borderRadius: 0, //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
//图形阴影的模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowBlur: 10,
shadowColor: '', //阴影颜色。支持的格式同color
shadowOffsetX: 0,
shadowOffsetY: 0,
scrollDataIndex: 0, //type为'scroll'时有效，图例当前最左上显示项的dataIndex
pageButtonItemGap: 5, //type为'scroll'时有效，图例控制块中，按钮和页信息之间的间隔
pageButtonGap: '', //type为'scroll'时有效，图例控制块和图例项之间的间隔
pageButtonPosition: 'end', //type为'scroll'时有效，图例控制块的位置
pageFormatter: '{current}/{total}', //type为'scroll'时有效，图例控制块中，页信息的显示格式
pageIcons: { //type为'scroll'时有效，图例控制块的图标
horizontal: '',
vertical: ''
},
pageIconColor: '#2f4554', //type为'scroll'时有效，翻页按钮的颜色
pageIconInactiveColor: '#aaa', //type为'scroll'时有效，翻页按钮不激活时（即翻页到头时）的颜色
pageIconSize: 15, //type为'scroll'时有效，翻页按钮的大小
pageTextStyle: {}, //type为'scroll'时有效，图例页信息的文字样式，属性值参考textStyle写法
animation: true, //图例翻页是否使用动画
animationDurationUpdate: 800, //图例翻页时动画时长
emphasis: {
selectorLabel: {} //内容参考textStyle
},
selector: false, //图例组件中选择器按钮，默认不显示
selectorLabel: {}, //选择器按钮的文本标签样式，内容参考textStyle
selectorPosition: 'auto', //选择器位置
selectorItemGap: 7, //选择器按钮之间间隔
selectorButtonGap: 10 //选择器按钮与图例组件之间间隔
}
tooltip的配置
对应位置：
tooltip: {
show: true, //是否显示提示框组件
trigger: 'item', //触发类型，属性值：item数据项触发/axis坐标轴触发/none不触发
axisPointer: {
type: 'line', //指示器类型，属性值：line直线/shadow阴影/none/cross十字准星
axis: 'auto', //指示器坐标轴，属性值：x/y/radius/angle
snap: true, //坐标轴指示器是否自动吸附到点上。默认自动判断，布尔值
z: 0, //坐标轴指示器z值，控制图形的前后顺序，属性值：number
label: {
show: false, //是否显示文本标签
precision: 'auto', //文本标签中数值小数点精度。默认根据当前轴的值自动判断
formatter: {}, //文本标签文字格式化器
margin: 3, //label距离轴的距离
color: '#fff', /颜色，文章链接如下 Echart图表之颜色color配置项大全/
fontStyle: '',
fontWeight: '',
fontFamily: '',
fontSize: 12,
lineHeigh: 20,
width: 20,
height: 100,
textBorderColor: '', //文字本身描边颜色
textBorderWidth: , //文字本身描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0, //虚线偏移量，搭配textBorderType指定dashed/array实现虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身的阴影长度
textShadowOffsetX: 0, //文字本身的阴影 X 偏移
textShadowOffsetY: 0, //文字本身的阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或换行,配置width时有效,truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
padding: 0,
backgroundColor: 'auto', //背景颜色，默认是和axis.axisLine.lineStyle.color 相同
borderColor: '', //文本标签的边框颜色
borderWidth: 0, //文本标签的边框宽度
shadowBlur: 3, //图形阴影模糊大小，配合shadowColor,shadowOffsetX,shadowOffsetY设置阴影效果
shadowColor: #aaa, //阴影颜色，支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0 //阴影垂直方向上的偏移距离
},
lineStyle: {
color: #555, /颜色，文章链接如下 Echart图表之颜色color配置项大全/
width: 1, //线宽
type: solid, //线的类型，属性值：solid/dashed/dotted/number/array
dashOffset: 0, //虚线偏移量，搭配type指定dashed/array实现虚线效果
cap: 'butt', //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
join: 'bevel', //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
miterLimit: 10, //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
shadowBlur: 10, //阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: '', //阴影颜色，支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
shadowStyle: {
color: '#fff', /颜色，文章链接如下 Echart图表之颜色color配置项大全/
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
crossStyle: {
color: '#fff', /颜色，文章链接如下 Echart图表之颜色color配置项大全/
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
animation: true, //是否开启动画
animationThreshold: 2000, //是否开启动画的阈值
animationDuration: 1000, //初始动画的时长，支持回调函数
animationEasing: 'cubicOut', //初始动画的缓动效果
animationDelay: 0, //初始动画的延迟，支持回调函数
animationDurationUpdate: 200, //数据更新动画的时长，支持回调函数
animationEasingUpdate: exponentialOut, //数据更新动画的缓动效果
},
showContent: true, //是否显示提示框浮层，默认显示
alwaysShowContent: false, //是否永远显示提示框内容
triggerOn: 'mousemove|click', //提示框触发条件，mousemove/click/mousemove|click/none。none时可通过action.tooltip.showTip和action.tooltip.hideTip来手动触发和隐藏。也可通过axisPointer.handle来触发或隐藏
showDelay: 0, //浮层显示的延迟，默认0ms
hideDelay: 100, //浮层隐藏的延迟
enterable: false, //鼠标是否可进入提示框浮层中，默认为false
renderMode: 'html', //浮层的渲染模式，html默认/richText富文本形式
confine: false, //是否将 tooltip 框限制在图表的区域内
appendToBody: false, //是否将组件DOM节点添加为HTML的<body>子节点。只有当renderMode为html有意义
className: 'echarts-tooltip echarts-tooltip-dark', //指定tooltip的DOM节点CSS类，只在html模式下生效
transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是s
position: [], //提示框浮层的位置
formatter: ()=>{}, /提示框浮层内容格式器，用这个可以修改提示框默认内容/
valueFormatter: (value: number | string) => string, //数值显示部分的格式化回调函数
backgroundColor: '', //背景颜色，格式同color
borderColor: '', //提示框浮层边框颜色，格式同color
borderWidth: 0, //提示框浮层的边框宽
padding: 5,
textStyle: {
color: '#fff', /颜色，文章链接如下 Echart图表之颜色color配置项大全/
fontStyle: '',
fontWeight: '',
fontFamily: '',
fontSize: 14,
lineHeight : 20,
width: 220,
height: 20,
textBorderColor: '', //文字本身的描边颜色
textBorderWidth: '', //文字本身的描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0, //虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身阴影长度
textShadowOffsetX: 0, //文字本身阴影 X 偏移
textShadowOffsetY: 0, //文字本身阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时，该属性配置末尾显示文本
rich: {}, //自定义富文本样式
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', //额外附加到浮层的 css 样式
order: 'seriesAsc' //多系列提示框浮层排列顺序，seriesAsc默认/seriesDesc/valueAsc/valueDesc
}
toolbox的配置
对应位置：
toolbox: {
id: '', //组件ID，默认不指定。指定则可用于在option或者API中引用组件
show: true, //是否显示
orient: 'horizontal', //icon的布局朝向，属性值：horizontal默认/vertical
itemSize: 15, //icon大小
itemGap: 8, //icon每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
showTitle: true, //是否在鼠标hover的时候显示标题
feature: {
saveAsImage: {
type: 'png', //保存图片格式。若renderer类型在初始化图表时被设为canvas（默认），则支持png（默认）/jpg；若renderer类型在初始化图表时被设为svg，则只支持svg
name: '', //保存文件名称，默认使用title.text
backgroundColor: 'auto', //保存图片背景色
connectedBackgroundColor: '#fff', //若图表使用echarts.connect对多个图表进行联动，则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色
excludeComponents: ['toolbox'], //保存为图片时忽略的组件列表，默认忽略工具栏
show: true,
title: '',
icon: '', //自定义图标
//保存为图片icon样式设置。由于icon的文本信息只在hover时显示，所以文字相关配置项在emphasis下设置
iconStyle: {
color: none, /颜色，参考下面的文章/
borderColor: #666,
borderWidth: 1,
borderType: 'solid',
borderDashOffset: 0, //设置虚线偏移量，搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式，属性值：butt/round/square
borderJoin: 'bevel', //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略），属性值：bevel/round/miter
borderMiterLimit: 10, //设置斜接面限制比例，只有当borderJoin为miter时才有效
shadowBlur: '', //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: '', //阴影颜色。支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1 //图形透明度
},
emphasis: {
iconStyle: {
color: '', /图形颜色，参考下面的文章/
borderColor: none, //图形描边颜色。支持的颜色格式同color
borderWidth: 0, //描边线宽。为 0 时无描边
borderType: 'solid', //描边类型，属性值：solid默认/dashed/dotted/number/array
borderDashOffset: 0, //设置虚线偏移量，搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式，属性值：butt默认/round/square
borderJoin: 'bevel', //上面有解释
borderMiterLimit: 10,
shadowBlur: '',
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
textPosition: 'bottom', //文本位置，属性值：left/right/top/bottom
textFill: '#000', //文本颜色，若未设定，则依次取图标 emphasis 时的填充色、描边色，若都不存在，则为'#000'
textAlign: 'center', //文本对齐方式，属性值：left/center/right
textBackgroundColor: '', //文本区域填充色
textBorderRadius: 0, //文本区域圆角大小
textPadding: 0 //文本区域内边距
}
},
pixelRatio: 1 //保存图片分辨率比例。默认跟容器相同大小，若需保存更高分辨率图片，可以设置为大于 1 的值
},
restore: {
show: true,
title: '还原',
icon: 'image://url', //图标，'image://url'或'path://'或本地引入'image://'+require('./DCSP.png')
iconStyle: {}, //还原icon样式设置，同上feature.saveAsImage.iconStyle配置
emphasis: {} //强调hover触发，同上feature.saveAsImage.emphasis.iconStyle配置
},
dataView: {
show: true,
title: '数据视图',
icon: '', //用法同feature.restore.icon
iconStyle: {}, //数据视图icon样式设置，同上feature.saveAsImage.iconStyle配置
emphasis: {}, //强调hover触发，同上feature.saveAsImage.emphasis.iconStyle配置
readOnly: false, //是否不可编辑（只读）
optionToContent: function() {}, //自定义dataView展现函数。用以取代默认的textarea使用更丰富的数据编辑
contentToOption: (container:HTMLDomElement, option:Object) => Object, //在使用optionToContent情况下，如果支持数据编辑后的刷新，需要自行通过该函数实现组装option逻辑
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认['数据视图', '关闭', '刷新']
backgroundColor: '#fff', //数据视图浮层背景色
textareaColor: '#fff', //数据视图浮层文本输入区背景色
textareaBorderColor: '#333', //数据视图浮层文本输入区边框颜色
textColor: '#000', //文本颜色
buttonColor: '#c23531', //按钮颜色
buttonTextColor: '#fff' //按钮文本颜色
},
dataZoom: { /这个有两个icon图标，所以基本都必须分开配置/
show: true,
title: { //缩放和还原的标题文本
zoom: '区域缩放',
back: '区域缩放还原'
},
icon: { //同上feature.saveAsImage.icon配置
zoom: '',
back: ''
},
iconStyle: {}, //数据区域缩放icon样式设置，同上feature.saveAsImage.iconStyle配置
emphasis: {}, //强调hover触发，同上feature.saveAsImage.emphasis.iconStyle配置
filterMode: 'filter', //与 dataZoom.filterMode 含义和取值相同
xAxisIndex: '', //指定哪些xAxis被控制。若缺省则控制所有的x轴。若设置为false则不控制任何x轴。如若置成3则控制axisIndex为3的x轴。若设置为[0, 3]则控制axisIndex为0和3的x轴。
yAxisIndex: '', //参考xAxisIndex，控制y轴
brushStyle: {} //刷选框样式，同上feature.saveAsImage.iconStyle配置
},
magicType: {
show: true,
type: ['line', 'bar'], //启用的动态类型，包括line、bar、stack
title: {
line: '切换为折线图',
bar: '切换为柱状图',
stack: '切换为堆叠',
tiled: '切换为平铺',
},
icon: { //同上feature.saveAsImage.icon配置
line: '',
bar: '',
stack: ''
},
iconStyle: {}, //动态类型切换，同上feature.saveAsImage.iconStyle配置
emphasis: {}, //强调hover触发，同上feature.saveAsImage.emphasis.iconStyle配置
option: { //各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项
line: {},
bar: {},
stack: {}
},
seriesIndex: { //各个类型对应的系列的列表
line: [],
bar: []
}
},
brush: { //选框组件的控制按钮。也可以不在这里指定，而是在 brush.toolbox 中指定。
type:, //使用的按钮，属性值：rect/polygon/lineX/lineY/keep/clear
icon: { //同上feature.saveAsImage.icon配置
rect: '',
polygon: '',
lineX: '',
lineY: '',
keep: '',
clear: ''
},
title: {
rect: '矩形选择',
polygon: '圈选',
lineX: '横向选择',
lineY: '纵向选择',
keep: '保持选择',
clear: '清除选择'
}
},
myTool: { /这个比较常用，自定义icon与功能/
show: true,
title: '',
icon: '',
onclick: function() {} //根据需要添加触发条件与方法
}
},
iconStyle: {}, //公用的 icon 样式设置。同上feature.saveAsImage.iconStyle配置
emphasis: {}, //强调hover触发，同上feature.saveAsImage.emphasis.iconStyle配置
zlevel: 0, //所有图形zlevel值。zlevel用于 Canvas 分层
z: 2, //组件的所有图形的z值。控制图形的前后顺序
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
width: 'auto',
height: 'auto',
tooltip: {} /工具箱tooltip配置，配置项同tooltip，参考下面的文章/
}
该内容整合自 博客原文 ，再次感谢原作者的编写~ 仅供自己学习使用~
苦苦搜索之中，一眼瞥见了他的文章，才发现原来echarts有自己所需要效果的配置项，因此决定汇总起来。
