七、Echart图表 之 toolbox工具栏组件配置项大全 |
您所在的位置：网站首页 › 如何使用图表工具框显示 › 七、Echart图表 之 toolbox工具栏组件配置项大全 |
七、Echart图表 之 toolbox工具栏组件配置项大全
|
🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ ✨ 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，参考下面的文章/ }👉推荐相关文章：Echart图表 之 基本使用及配置项 👉推荐相关文章：Echart图表 之 title配置项大全 👉推荐相关文章：Echart图表 之 颜色color配置项大全 👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全 👉推荐相关文章：Echart图表 之 legend图例组件配置项大全 👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全 |
【本文地址】
今日新闻 |
推荐新闻 |