ECharts toolbox修改图标

前几天测试人员测试项目的时候提出要把echarts toolbox的图标修改为自定义图标（有背景颜色的那种）。由于我是个echarts初学者，所以对着echarts的配置项文件研究了好半天。

废话不多说，来看看具体实现吧！

初始效果

初始代码是我从echarts官网上下载的一个实例，toolbox初始配置项如下：

toolbox: {
            show: true,
            feature: {
                dataView: {
                    readOnly: false,
                },
                magicType: {
                    type: ['line', 'bar'],
                },
                restore: {},
                saveAsImage: {}
            }
        }

为了实现最终的效果，我首先想到的是能不能修改背景颜色，于是我就加上了backgroundColor这个配置项，然而...现实总是残酷的。

backgroundColor:'#006bb7'

这是个什么鬼，赶紧撤回撤回撤回！！！
发现不能设置图标背景颜色的我眼泪流下来555...
振作精神的我再次打开了配置项文件，看到了这个配置项

saveImage配置项
于是我灵机一现不能给图标背景颜色干脆把图标改成有背景颜色的图标好了，我真是个小机灵鬼儿，修改图标为自定义图片如下：

 toolbox: {
            show: true,
            feature: {
                dataView: {
                    readOnly: false,
                    icon:"image://image/dataView.png"
                },
                magicType: {
                    type: ['line', 'bar'],
                    icon:{
                        line :"image://image/line.png",
                        bar :"image://image/bar.png"
                    }
                },
                restore: {
                    icon:'image://image/restore.png'
                },
                saveAsImage: {
                    icon:'image://image/download.png'
                }
            },
        }

实现效果如下，效果跟最终效果差不多了，就是看起来图标还有点小，还有鼠标悬停的时候文字颜色跟图标背景颜色不一样

修改图标图片效果

于是我又研究了一下配置项文件，发现修改图标大小以及悬停文字的办法，代码如下：

      toolbox: {
            show: true,
            feature: {
                dataView: {
                    readOnly: false,
                    icon:"image://image/dataView.png"
                },
                magicType: {
                    type: ['line', 'bar'],
                    icon:{
                        line :"image://image/line.png",
                        bar :"image://image/bar.png"
                    }
                },
                restore: {
                    icon:'image://image/restore.png'
                },
                saveAsImage: {
                    icon:'image://image/download.png'
                }
            },
            itemSize:18,//工具栏 icon 的大小
            emphasis:{//触发时
                iconStyle:{
                    borderColor:"#006bb7"//图形的描边颜色
                }
            }
        }

最终效果：

最终效果

这是我的第一篇简书文章，本人菜鸟一只，请多包涵！