🍓 作者主页：💖仙女不下凡💖
🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！
🍓 欢迎点赞👍 收藏? 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！
? toolbox工具栏组件，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。如下图：
- feature：各工具配置项。
- feature.saveAsImage：保存为图片，内置工具。
- feature.restore：配置项还原，内置工具。
- feature.dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。内置工具。
- feature.dataZoom：数据区域缩放。目前只支持直角坐标系的缩放，内置工具。
- feature.magicType：动态类型切换，内置工具。
- feature.brush：选框组件的控制按钮，内置工具。
- feature.myTool：添加自定义图标与方法，如果想添加多个用
feature.myTool1、feature.myTool2表示，比较常用。 - iconStyle：公用的icon样式设置，由于 icon 的文本信息只在icon hover时候才显示，所以文字相关的配置项请在emphasis下设置。
- emphasis：强调 hover 时触发样式，所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , textPosition , textFill , textAlign , textBackgroundColor , textBorderRadius , textPadding }。
💕 其中也会含有很多属性，具体使用请参考一下内容
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，参考下面的文章/
}
👉推荐相关文章：Echart图表 之 基本使用及配置项
👉推荐相关文章：Echart图表 之 title配置项大全
👉推荐相关文章：Echart图表 之 颜色color配置项大全
👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全
👉推荐相关文章：Echart图表 之 legend图例组件配置项大全
👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全
