-
Echarts自定义icon
Echarts中自定义icon分两类：img类型（png、jpg等）、svg类型
- img类型采取'image://'方式引入
- 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属性：
- none：默认值，不应用任何滤镜效果。
- blur()：给元素添加高斯模糊效果。可以指定一个模糊半径，值越大则模糊程度越高。
- brightness()：调整元素的亮度。可以指定一个因子值，如 brightness(0.5) 会将元素变暗，而 brightness(2) 会将元素变亮。
- contrast()：调整元素的对比度。可以指定一个因子值，如 contrast(0.5) 会降低对比度，而 contrast(2) 会增加对比度。
- grayscale()：将元素转为灰度图像。可以指定一个灰度比例值，如 grayscale(1) 表示完全转为灰度，而 grayscale(0.5) 表示转为50%灰度。
- invert()：反转元素的颜色。可以指定一个反转比例值，如 invert(1) 表示完全反转颜色，而 invert(0.5) 表示部分反转颜色。
- opacity()：调整元素的不透明度。可以指定一个透明度值，如 opacity(0.5) 表示50%不透明度。
- saturate()：调整元素的饱和度。可以指定一个饱和度比例值，如 saturate(2) 会增加饱和度，而 saturate(0.5) 会降低饱和度。
- sepia()：将元素转为深褐色调。可以指定一个深褐色调比例值，如 sepia(1) 表示完全转为深褐色调，而 sepia(0.5) 表示部分转为深褐色调。
- hue-rotate()：调整元素的色相旋转。可以指定一个角度值（单位为度），如 hue-rotate(180deg) 会将所有颜色旋转180度。
需要注意的是，滤镜属性在不同的浏览器中的支持程度可能存在差异，特别是一些较老的浏览器版本。在使用滤镜属性时，请进行兼容性测试以确保在目标浏览器中正常显示。
