介绍：

toolbox（工具箱）是一组图表操作按钮，用于在Echarts图表中添加与数据交互相关的组件。自带功能主要包括：

①数据视图：用于查看和编辑图表的原始数据。

②数据区域缩放：用于通过选择区域来放大图表的数据范围。

③动态切换图标类型：用于在多种图表类型之间进行切换。

④保存为图片：保存当前 Echart 图表为图片

⑤选框组件：提供数据选框类型。

⑥ 自定义工具： 工具名以 my 开头 ，并自定义点击方法。

⑦重置：清空所有工具选择。

第 ⑤ 个，选框组件，这个是配合视觉映射 visualMap 和 下一个文章需要介绍的 brush 区域选择一起使用，效果更佳，通过在图形中进行区域选择，将对应的数据在 visualMap 凸显出来或者在 brush 中 向用户展示被选中数据

文章最后提供参考代码！！

使用注意事项：

1.切换的图形类别暂时仅支持：折线图 line、柱状图 bar 、堆叠 stack，平铺单独配置无效，叠堆单独配置会自动带上平铺。

2.brush 在 toolbox 中单独配置是无效的，至少还需要在全局 中配置 brush才有效。另外 tooltip 要生效，也需要在全局 配置 tooltip 才行。全局及 option 中。

3.feature 工具栏配置项中的 magicType 动态类型切换的 option 配置参考 series 中对应类型中的配置

4.feature 自定义方法中，必须要写如 onclick 方法，不然定义的 icon 会报错。至少要写入 onclick 和 icon 才能显示和点击。

5.在定义图标时，只有通过 'path://' 将图标设置为任意的矢量路径，才能设置颜色和图形描边。

6.工具的 icon 最好不要用网上的图片，用自己本地的图片都可以：

//本地引入图片
import PH from '@assets/images/ph.png'

 icon:`image://${PH}`,             // 自定义工具 icon

一、图表工具栏 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 '<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',             // 工具 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 开始， 尾                                        
        },
        // 配置每一个工具项  尾                                     
    }
}

二、各工具示例图

数据视图

数据区域缩放

动态切图

刷选框

三、动态图配置代码 

使用：

代码：代码中有简单的自定义方法，可以简单参考一下。

option = {
  title: {
    text: 'Stacked Line'
  },
  // 开启刷选
  brush:{},
  // 开启提示框 
  tooltip: {},

  toolbox: {
    right:'10%',
    // 自定义工具提示框
    tooltip:{
      show:true,
      trigger:'axis',
      formatter:function(param){
         return "<div>"+param.title+'按钮'+"</div>";
      },
    },
    // 隐藏工具标题
    showTitle:false,
    feature: {
        // 自定义按钮
        myTool1:{
          title:'查看',
          iconStyle:{
            opacity:0.5,
            borderWidth:1,
            borderColor:'red',
          },
          emphasis:{
            iconStyle:{
              borderWidth:1,
              borderColor:'#fff'
            },
          },
          onclick:function(){
            // 自定义方法
          },
          icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
        },
        
      // 保持图片
      saveAsImage: {
        type:'png',
        name:'Echarts图片',
        excludeComponents:['toolbox'],
        title:'保持为图片 ',
      },
      
      // 重置
      restore:{},
      // 
      dataView:{},
      dataZoom:{},
      magicType:{
        type:['line','bar','stack','tiled'],
      
      },
      
      // 定义选框样式
      brush:{
        type:['rect','polygon'],
      },
     
    }
  },

  legend: {
    show:false,
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

最近更新有点慢，工作有点忙····