如何调整Reveal BI图表/图例的字体大小？

直接给容器<div #revealView>设置font-size无效，是因为Reveal BI内部图例组件有自己的样式优先级，不会继承父容器的字体设置。试试下面两种可行的方法：

方法1：自定义CSS覆盖样式 #

Reveal BI的图例文本元素自带特定类名，你可以通过全局CSS直接修改：

/* 全局样式文件中添加 */
.rv-legend-text {
    font-size: 20px !important;
}

如果你的项目用了样式隔离（比如Vue的scoped、React CSS Modules），需要用深度选择器：

• Vue：:deep(.rv-legend-text) { font-size: 20px !important; }
• React：将这段样式放到全局CSS文件中，而非组件的模块化CSS

方法2：通过Reveal BI API配置 #

如果是通过代码初始化或修改仪表盘，可以直接在可视化配置中指定图例字体大小：

// 初始化可视化时配置图例
const visualization = new $.ig.RevealVisualization({
    // 其他核心配置...
    legend: {
        visible: true,
        textStyle: {
            fontSize: "20px"
        }
    }
});

// 或者在可视化创建完成后修改
revealView.onVisualizationCreated = (args) => {
    const viz = args.visualization;
    if (viz.legend) {
        viz.legend.textStyle.fontSize = 20;
        viz.refresh();
    }
};

内容的提问来源于stack exchange，提问作者Josh