[echarts] 图表工具栏 toolbox

option={// 工具栏配置toolbox:{id:'1',                       // 组件IDshow: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 '<div>'+param.title+'内容'+'</div>';      //  自定义提示框显示内容        },// 提示框字体样式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',             // 工具 icontype:'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',             // 缩放 iconback:'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:'平铺',             // 平铺图标题},// 单独配置每一个图形的 iconicon:{line:'image://url',         // 折线图的 icon       bar:'image://url',          // 柱状图的 iconstack:'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'],      // 开启的哪些选框组件，例如，矩形选框、任意形状选框等// 配置选框的 iconicon:{rect:'image://url',       // 矩形选框的 iconpolygon:'image://url',    // 任意形状选框的 iconlineX:'image://url',      // 横向选框的 iconlineY:'image://url',      // 纵向选框的 iconkeep:'image://url',       // 开启单项和多选的 iconclear:'image://url',      // 清空所有选框的 icon         },// 配置选框的标题title:{rect:'矩形选框',polygon:'圈选',lineX:'横向选择',lineY:'纵向选择',keep:'多选',clear:'清除选择',}           },// 选框组件控制按钮 尾// 自定义工具按钮,名称必须 my 开始， 头myTool:{show:true,                  // 是否显示title:"自定义按钮",          // 工具标题icon:'image://url',         // 工具 icononclick:function(){},       // 自定义点击方法iconStyle:{// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码                         },emphasis:{iconStyle:{// 强调时，icon 和对应标签样式//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码                    },               },                                              }  // 自定义工具按钮,名称必须 my 开始， 尾                                        },// 配置每一个工具项  尾                                     }
}