[echarts] 图表工具栏 toolbox
option={
// 工具栏配置
toolbox:{
id:'1', // 组件ID
show:true, // 是否显示工具栏
orient:'horizontal', // 工具栏 icon 的布局朝向
itemSize:15, // 工具栏 icon 的大小
itemGap:10, // 工具栏 icon 每项之间的间隔
showTitle:true, // 是否在鼠标悬浮 icon 时，显示每一个工具的标题
zlevel:1, // 组件所有图形的 zlevel 值， 画布 Canvas 分层，图层优先级
z:1, // 组件所有图形的 z 值，图形前后绘制顺序
left:'10%', // 工具栏组件距离容器左侧的距离
right:'10%', // 工具栏组件距离容器右侧的距离
top:'10%', // 工具栏组件距离容器顶部的距离
bottom:'10%', // 工具栏组件距离容器底部的距离
width:"20%", // 工具栏组件宽度
height:'10%', // 工具栏组件高度
// 工具栏的 tooltip 设置
tooltip:{
show:true, // 是否展示提示组件
// formatter:'{a}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
formatter:function(param){
return ''+param.title+'内容'+''; // 自定义提示框显示内容
},
// 提示框字体样式
textStyle:{
fontSize:18,
},
},
// 统一配置工具栏中 icon 的样式 头
iconStyle:{
color:'red', // 图形颜色
borderWidth:5, // 图形描边宽度
borderColor:'red', // 图形描边颜色
borderType:'solid', // 图形描边线类型
borderDashOffset:10, // 描边线类型为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端的形状
borderJoin:'bevel', // 指定两个线段连接处的形状
borderMiterLimit:10, // 当 borderJoin 为 miter 时，斜接面比例
shadowBlur:5, // 图形阴影长度
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:20, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.8, // 图形透明度
},
// 统一配置工具栏中 icon 的样式 尾
// 统一配置鼠标 hover 工具 icon 时，强调样式 头
emphasis:{
// 强调时，icon 和对应标签样式
iconStyle:{
color:'red', // 图形的颜色
borderColor:'#000', // 图形的描边颜色
borderWidth:5, // 图形的描边宽度
borderType:'solid', // 图形描边线的类型
borderDashOffset:5, // 图形描边为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端的形状
borderJoin:'bevel', // 设置两个线段相连部分的形状
borderMiterLimit:10, // 当 borderJoin 为 miter 时,斜接面比例
shadowBlur:10, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.7, // 图形透明度
textPosition:'bottom', // 文字的位置
textFill:'#fff', // 文字颜色
textAlign:'left', // 文字对齐方式
textBackgroundColor:'red', // 文本区域填充颜色
textBorderRadius:'', // 文本区域圆角大小
textPadding:10, // 文本区域内边距
},
},
// 统一配置鼠标 hover 工具 icon 时，强调样式 尾
// 配置每一个工具项 头
feature:{
// 保持 Ehcarts 为图片工具， 头
saveAsImage:{
show:true, // 是否显示工具
title:'保持图片', // 工具标签
icon:'image://url', // 工具 icon
type:'png', // 自定义保持图片的后缀
name:'filename', // 自定义保持图片的名称，默认获取 tite 标题的 text 内容作为文件名称
backgroundColor:'auto', // 保持图片的背景颜色，默认白色
connectedBackgroundColor:'red', // 如果图表使用了 echarts.connect 对多个图表进行联动，则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色。
excludeComponents:['toolbox'], // 保持图片时，图片中忽略的组件列表
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 保持 Ehcarts 为图片， 尾
// 配置项还原 头
restore:{
show:true, // 是否显示工具
title:'还原', // 鼠标悬浮时显示标签
icon:'image://url', // 工具 icon
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 配置项还原 尾
// 数据视图，将图表简单以表格形式展示 头
dataView:{
show:true, // 是否显示工具
title:'数据视图', // 工具标签
icon:"image://url", // 工具 icon
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 数据视图，将图表简单以表格形式展示 尾
// 数据区域缩放 头
dataZoom:{
show:true, // 是否显示工具
title:['缩放','还原'], // 缩放和还原的标题
filterMode:'filter', // 超出范围的数据缩放展示
xAxisIndex:[0,1], // 指定哪些 xAxis 被控制
yAxisIndex:[0,1], // 指定哪些 yAxis 被控制
icon:{
zoom:'image://url', // 缩放 icon
back:'image://url', // 还原 icon
},
// 刷选框样式 头
brushStyle:{
color:'red', // 图形颜色
borderColor:'red', // 图形描边颜色
borderWidth:5, // 图形描边宽度
borderType:'solid', // 图形描边线类型
borderDashOffset:5, // 图形描边线为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端形状
borderJoin:'bevel', // 两个线段相连部分的形状
borderMiterLimit:10, // borderJoin 为 miter 时,斜接面比例
shadowBlur:20, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.5, // 图形透明度
},
// 刷选框样式 尾
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 数据区域缩放 尾
// 切换图形类型 头
magicType:{
show:true, // 是否显示工具
// 单独配置每一个图形的标题
title:{
line:'折线图', // 折线图标题
bar:'柱状图', // 柱状图标题
stack:'堆叠', // 堆叠图标题
tiled:'平铺', // 平铺图标题
},
// 单独配置每一个图形的 icon
icon:{
line:'image://url', // 折线图的 icon
bar:'image://url', // 柱状图的 icon
stack:'image://url', // 堆叠图的 icon
tiled:'image://url', // 平铺图的 icon
},
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
// 单独配置每一个系列的显示数据
option:{
line:{
// 这里面的配置和 series 中每个系列中的配置一样
},
},
// 指定在切换图形类别时，哪些数据图形变化
seriesIndex:{
line:[0,1,2], // 切换成折线图时，数据一、二、三对应改变
bar:[0,2], // 切换成柱状图时，数据一、三对应改变
// ···
},
},
// 切换图形类型 尾
// 选框组件控制按钮 头
brush:{
type:['rect','polygon'], // 开启的哪些选框组件，例如，矩形选框、任意形状选框等
// 配置选框的 icon
icon:{
rect:'image://url', // 矩形选框的 icon
polygon:'image://url', // 任意形状选框的 icon
lineX:'image://url', // 横向选框的 icon
lineY:'image://url', // 纵向选框的 icon
keep:'image://url', // 开启单项和多选的 icon
clear:'image://url', // 清空所有选框的 icon
},
// 配置选框的标题
title:{
rect:'矩形选框',
polygon:'圈选',
lineX:'横向选择',
lineY:'纵向选择',
keep:'多选',
clear:'清除选择',
}
},
// 选框组件控制按钮 尾
// 自定义工具按钮,名称必须 my 开始， 头
myTool:{
show:true, // 是否显示
title:"自定义按钮", // 工具标题
icon:'image://url', // 工具 icon
onclick:function(){}, // 自定义点击方法
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
}
// 自定义工具按钮,名称必须 my 开始， 尾
},
// 配置每一个工具项 尾
}
}
数据视图![[echarts] 图表工具栏 toolbox_第1张图片](http://img.e-com-net.com/image/info8/bf84a654eee84fb3952cf50815f31a87.jpg)
数据区域缩放
![[echarts] 图表工具栏 toolbox_第2张图片](http://img.e-com-net.com/image/info8/7d2dc62e085649c995e3acfd272c2378.jpg)
动态切图
![[echarts] 图表工具栏 toolbox_第3张图片](http://img.e-com-net.com/image/info8/bd00a1fabcba48a19f88a5ffebe2ebf2.jpg)
刷选框
![[echarts] 图表工具栏 toolbox_第4张图片](http://img.e-com-net.com/image/info8/632904c4b7a544f4a311b1105d409b59.jpg)
参考：
Echarts 配置系列之：图表工具栏 Toolbox