七、Echart图表 之 toolbox工具栏组件配置项大全

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章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提示框组件配置项大全