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 开始， 尾 },// 配置每一个工具项 尾 }
}
数据视图
数据区域缩放
动态切图
刷选框
参考：
Echarts 配置系列之：图表工具栏 Toolbox
-自定义帖子管理实现)
)
