<li id='6ntps'></li>

<dd id='6ntps'><tbody id='6ntps'><td id='6ntps'><optgroup id='6ntps'><strong id='6ntps'></strong></optgroup><address id='6ntps'><ul id='6ntps'></ul></address><big id='6ntps'></big></td><table id='6ntps'></table></tbody><pre id='6ntps'></pre></dd><span id='6ntps'><b id='6ntps'></b></span>

<dfn id='6ntps'><optgroup id='6ntps'></optgroup></dfn><tfoot id='6ntps'><bdo id='6ntps'><div id='6ntps'></div><i id='6ntps'><dt id='6ntps'></dt></i></bdo></tfoot>

<ul id='6ntps'></ul>

<fieldset id='6ntps'></fieldset>

• 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度。

需要注意的是，濾鏡屬性在不同的瀏覽器中的支持程度可能存在差異，特別是一些較老的瀏覽器版本。在使用濾鏡屬性時，請進行兼容性測試以確保在目標瀏覽器中正常顯示。