在 ECharts 中,可以通过 Toolbox 配置来设置工具栏组件的图标样式。以下是一个简单的示例代码,演示如何配置 ECharts Toolbox 中的按钮图标样式:
option = {
    toolbox: {
        iconStyle: {
            borderColor: 'red',   // 图标边框颜色
            borderWidth: 2,       // 图标边框宽度
            color: 'green',       // 图标颜色
            shadowBlur: 10,       // 图标阴影模糊大小
            shadowColor: 'rgba(0, 0, 0, 0.5)'  // 图标阴影颜色
        },
        feature: {
            saveAsImage: {
                show: true,
                title: '保存为图片'
            },
            dataZoom: {
                show: true,
                title: {
                    zoom: '区域缩放',
                    back: '区域缩放还原'
                }
            },
            // 其他工具按钮配置...
        }
    },
    // 其他配置...
};

// 初始化图表
var myChart = echarts.init(document.getElementById('yourChartId'));
myChart.setOption(option);

在上述代码中,我们使用了 iconStyle 属性来配置工具栏组件中所有按钮的图标样式。你可以根据需要调整边框颜色、宽度、图标颜色、阴影模糊大小和阴影颜色等参数。

请注意,这里的配置是应用于所有工具栏按钮的图标样式。如果你希望为某个特定按钮配置独特的图标样式,可以在对应的按钮配置中使用 iconStyle 属性:
// 在 feature 中单独为某个按钮配置图标样式
feature: {
    myCustomTool: {
        show: true,
        title: '自定义工具',
        icon: 'path/to/custom/icon.png',
        iconStyle: {
            color: 'blue',
            // 其他样式配置...
        },
        onclick: function () {
            // 点击事件处理...
        }
    },
    // 其他工具按钮配置...
}

通过在特定按钮的配置中使用 iconStyle,你可以为该按钮设置独特的图标样式。


转载请注明出处:http://www.zyzy.cn/article/detail/5330/ECharts