• Echarts自定义icon

Echarts中自定义icon分两类：img类型（png、jpg等）、svg类型

1. img类型采取'image://'方式引入
2. svg类型采取'path://'方式引入

当icon需要添加hover效果时，采用echarts原生属性修改：

toolbox: {
    emphasis: {
        iconStyle: {
            color: hover颜色
        }
    }
}

其中涉及Echarts底层emphasis方法的原理，如下：

// 在ToolboxModel.js文件中，解析配置项并设置emphasis样式
merge(toolboxOption, defaultOption);
const featureOption = toolboxOption.feature || {};
const modelFeatureOption = defaultOption.feature || {};

// 遍历featureOption对象，即用户传入的配置项
each(featureOption, function (opt, name) {
    const originalFeatureOpt = modelFeatureOption[name];

    // 判断配置项中是否存在emphasis字段
    if (originalFeatureOpt && !force) {
        originalFeatureOpt.iconStyle = merge(
            clone(originalFeatureOpt.iconStyle),
            opt.iconStyle
        );
    }
});

// 在渲染过程中应用emphasis样式
each(modelFeatureOption, function (opt, name) {
    const iconStyle = opt.iconStyle;
    const emphasisIconStyle = iconStyle && iconStyle.emphasis;
    // 判断是否有emphasis样式，若有则应用
    if (emphasisIconStyle && opt.getIconStyle) {
        const style = opt.getIconStyle(true);
        style && style.emphasis && defaults(style.emphasis, emphasisIconStyle);
    }
});

• 普通icon图标

由于项目中导入的icon图标默认是已经配置<path>中fill属性，所以通过CSS直接修改fill属性的颜色是失效的。

可以利用CSS的filter属性修改图标的滤镜效果：

filter: brightness(0) saturate(100%) invert(100%) sepia(0) hue-rotate(0deg);

改变图标的亮度、饱和度、反转颜色等，从而达到修改图标颜色的效果。

以下是常用的filter属性：

1. none：默认值，不应用任何滤镜效果。
2. blur()：给元素添加高斯模糊效果。可以指定一个模糊半径，值越大则模糊程度越高。
3. brightness()：调整元素的亮度。可以指定一个因子值，如 brightness(0.5) 会将元素变暗，而 brightness(2) 会将元素变亮。
4. contrast()：调整元素的对比度。可以指定一个因子值，如 contrast(0.5) 会降低对比度，而 contrast(2) 会增加对比度。
5. grayscale()：将元素转为灰度图像。可以指定一个灰度比例值，如 grayscale(1) 表示完全转为灰度，而 grayscale(0.5) 表示转为50%灰度。
6. invert()：反转元素的颜色。可以指定一个反转比例值，如 invert(1) 表示完全反转颜色，而 invert(0.5) 表示部分反转颜色。
7. opacity()：调整元素的不透明度。可以指定一个透明度值，如 opacity(0.5) 表示50%不透明度。
8. saturate()：调整元素的饱和度。可以指定一个饱和度比例值，如 saturate(2) 会增加饱和度，而 saturate(0.5) 会降低饱和度。
9. sepia()：将元素转为深褐色调。可以指定一个深褐色调比例值，如 sepia(1) 表示完全转为深褐色调，而 sepia(0.5) 表示部分转为深褐色调。
10. hue-rotate()：调整元素的色相旋转。可以指定一个角度值（单位为度），如 hue-rotate(180deg) 会将所有颜色旋转180度。

需要注意的是，滤镜属性在不同的浏览器中的支持程度可能存在差异，特别是一些较老的浏览器版本。在使用滤镜属性时，请进行兼容性测试以确保在目标浏览器中正常显示。