元数分析云故事仪表板是一款功能强大的大屏展示工具，旨在帮助用户以可视化的方式展示数据和信息。它提供了多种令人印象深刻的功能，包括单独设置组件样式和统一设置全局组件样式，让用户能够根据自己的需求设计独特的组件样式。此外，用户还可以利用高级样式功能自定义 CSS，实现更精细和个性化的大屏样式效果。滑动部件功能让大屏呈现出动态和交互性，而自定义数据刷新事件和自动翻页功能确保数据及时更新，并自动切换页面。不仅如此，该仪表板还提供了灵活的大屏页面尺寸设置，可以全屏适应或固定屏幕大小，以满足各种展示需求。元数分析云故事仪表板让用户能够轻松创建出精美、互动且个性化的大屏展示，为观众带来视觉上的震撼和愉悦体验。
故事大屏设计
接着我们之前创建的 AdventureWorks Sales 语义模型，来设计一个销售指标大屏故事仪表板。首先确定所需指标，例如销售额、销售增长率、销售渠道分布等。了解用户想要了解的特定业务需求，例如按地区、时间范围或产品类别进行过滤等。
根据需求和关键指标，设计大屏页面的布局和组件。使用图表、数字指标、仪表盘等组件来呈现数据。考虑使用地图组件展示销售地区分布、趋势图显示销售增长率等。确保布局清晰简洁，使关键指标易于理解。
除了展示当前的销售指标，考虑在大屏页面中添加趋势图和比较数据。使用 AdventureWorks Sales 模型中的历史数据，绘制趋势图展示销售增长趋势，这有助于用户更好地理解销售业绩并做出相应的决策。
还要确保大屏页面上的数据能够实时刷新。
大屏尺寸
元数分析云故事仪表板提供了多种选项来满足不同的大屏展示需求。用户可以根据实际情况选择大屏页面的尺寸，以确保最佳的展示效果。仪表板支持全屏适应，使内容能够充分利用整个屏幕空间，也支持固定屏幕大小，以满足特定场景下的展示要求。
- 适应屏幕大小
- 固定仪表板大小
适应屏幕大小
在这种模式下，故事仪表板会根据屏幕的大小进行适应性调整，以确保仪表板内容按比例缩放长度和宽度，但像素大小不变。这意味着不管在何种尺寸的屏幕上查看，故事仪表板的布局和组件将自动调整，保持相同的相对位置和比例。这样的适应性设计使得故事仪表板在不同大小的显示设备上都能获得最佳的视觉效果，且内容可能会变形。
创建适应屏幕大小的故事仪表板，可以参考 新画布页面 选择 适应屏幕 类型的网页布局。
固定故事大小
在这种模式下，故事仪表板的大小是固定的，无论在何种尺寸的屏幕上查看，仪表板会根据屏幕大小进行像素级缩放。这意味着在不同大小的屏幕上，仪表板会按照设备的像素密度进行缩放，以确保图像和文本的清晰度和细节。由于仪表板大小是固定的，可能会导致在较小屏幕上内容显示较小或在较大屏幕上内容显示较大。
创建固定大小的故事仪表板，可以通过全局样式中的故事的宽度、高度：
大屏背景
设计一个与仪表板主题和内容相符并且吸引人视觉效果的背景图片。背景图片的颜色应与故事仪表板中使用的色彩调色板相一致，以确保整体风格的统一性。可以考虑使用渐变、纹理或花纹等元素，以增加视觉效果和层次感。确保背景图片简洁和清晰，避免过多的细节和干扰性元素。背景应该是一种支持内容展示的背景，而不是分散观众注意力的主角。
- 使用纯色或渐变色或以 svg 格式设置为背景图片
- 上传设计过的背景图片
svg 背景和模式
- 如下面 css background 配置所示，可以使用 svg 格式的背景图片
background-color: #330055;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23330055' cx='50' cy='0' r='50'/%3E%3Cg fill='%233a015d' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23410165' cx='50' cy='100' r='50'/%3E%3Cg fill='%2348026e' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23500376' cx='50' cy='200' r='50'/%3E%3Cg fill='%2357047e' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%235f0587' cx='50' cy='300' r='50'/%3E%3Cg fill='%2367068f' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f0798' cx='50' cy='400' r='50'/%3E%3Cg fill='%237707a0' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%238008a9' cx='50' cy='500' r='50'/%3E%3Cg fill='%238909b1' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%239109ba' cx='50' cy='600' r='50'/%3E%3Cg fill='%239a09c3' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a309cb' cx='50' cy='700' r='50'/%3E%3Cg fill='%23ad09d4' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b608dc' cx='50' cy='800' r='50'/%3E%3Cg fill='%23c007e5' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23c905ee' cx='50' cy='900' r='50'/%3E%3Cg fill='%23d303f6' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23D0F' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: local;
background-size: contain;
- 对应的背景效果
- 实际仪表板应用效果
背景图片
使用经过设计的图片可以确保背景与故事仪表板的主题相符。设计过的图片可以根据仪表板的内容和目标进行定制，使其在视觉上与数据和信息相协调，提供更加一致的视觉体验。在图片中包含品牌元素或公司标志，可以增加品牌的曝光和识别度。
背景图片有以下几种配置方式：
- 直接配置图片的链接可以设置给
background-image属性 - 切换到背景图片配置界面，选择系统内置的背景图片
- 也可以上传自己的图片，点击上传按钮上传图片，然后选择相应的图片
其他组件的背景
除了故事仪表板的背景，用户还可以对其他组件的背景进行设置。如为故事点页面和部件单独设置背景图片，设置方式与故事背景图片相同。
组件边框
设置组件边框和边框图片可以增加大屏的美感、提高视觉吸引力、增强用户体验。
如下图所示，故事仪表板组件边框可以通过这些属性（对应 css 属性）进行设置：
- 边框颜色：
border-color - 边框宽度：
border-width - 边框样式：
border-style - 边框图片：
border-image- 预设边框图片
- 自定义边框图片（用户上传）
- 边框切片：
border-image-slice - 盒子阴影：
box-shadow - 阴影：
box-shadow
字体样式
组件字体样式对于大屏的可读性、视觉吸引力和用户体验都有重要影响。通过使用粗体、斜体或不同的字号，可以将关键信息从其他内容中区分开来，吸引观众的注意力，使其更容易理解和记住关键信息。通过选择与主题相符的艺术字体或特殊效果，可以使大屏在视觉上更加引人注目。
设置组件文本样式可以通过以下属性进行设置：
三维效果
在数据可视化方面，3D图形可以更生动地呈现数据，增强数据的立体感和深度感。特别是在展示复杂的关系和趋势时，3D图形可以更好地表达数据间的关联性，使观众更容易理解和解读数据。
要为大屏仪表板添加三维效果，可以通过以下方式进行设置：
- 自定义图形：通过 ECharts 的 globe 等类型可以实现三维图形效果，并且可以设置自动旋转。
关于自定义图形请参考 范例：AdventureWorks Sales - 5. 故事自定义图形。
- 视频部件：如果只是设置一个动态 3D 背景效果，可以考虑使用视频部件，将一个 3D 视频作为背景，可以实现类似的效果。
颜色主题
设置故事仪表板的颜色主题，
全局颜色主题
如下图所示可以在全局设置中设置故事仪表板的颜色模式和颜色序列，主题会应用到故事仪表板的所有部件和图形中。
除了系统内置的颜色序列，用户还可以自行设计颜色序列，然后将颜色序列复制到故事仪表板的颜色序列组件输入框中即可，如：
#ea698b, #d55d92, #c05299, #ac46a1, #973aa8, #822faf, #6d23b6, #6411ad, #571089, #47126b
例如此网站可以生成颜色序列：https://coolors.co/palettes/popular/gradient
图形主题： ECharts 主题
对应上面的故事仪表板几种主题，用户可以自定义相应的 ECharts 主题配置。用户可以通过 ECharts 主题构建工具 定制好主题，然后将主题配置复制到故事仪表板的 ECharts 主题配置中。
图形颜色序列
除了统一设置故事仪表板的颜色序列外，还可以对单独一个图形部件或图形 series 设置颜色序列。这样可以实现不同图形部件或图形 series 的颜色序列不同，从而实现更好的视觉效果。
- 为图形属性的全局颜色
这里的颜色序列会按顺序分配给图形数据元素，如果数据元素超过颜色序列的长度，会循环使用颜色序列中的颜色。
- 为度量字段设置颜色序列，图案
为度量字段单独设置颜色序列，可以实现根据度量值的范围和大小确定颜色变化的效果，从而实现更好的视觉效果。
高级样式
为了满足更高级的用户需求，元数分析云故事仪表板还支持自定义 CSS 样式。用户可以根据自己的技术水平和设计要求，编写自定义的 CSS 代码，以实现更精细和个性化的大屏样式效果。
高级样式设置有以下多种应用场景：
- 加载新字体。
- 设置特定页面元素样式。
- 实现更多动态效果
滑动部件
为了增加大屏的动态效果和交互性，仪表板提供了 滑动部件 。用户可以在大屏上添加滑动部件，以展示多个页面或信息板块。这些滑动部件可以自动循环播放，使信息以一定的时间间隔进行切换，为观众呈现出更丰富的内容。
自动刷新与自动翻页
为了确保大屏上的数据能够及时更新，元数分析云故事仪表板允许用户设置自定义的数据刷新事件。用户可以指定数据更新的时间间隔或触发条件，以确保大屏上展示的数据保持最新。此外，用户还可以设置自动翻页功能，使大屏内容在设定的时间或条件下自动切换页面。
总结
通过以上功能点，元数分析云故事仪表板提供了丰富的功能和灵活性，使用户能够创建出精美、互动且具有个性化风格的大屏展示。无论是用于数据报告、业务展示还是其他领域的信息展示，该仪表板都能满足用户的需求，并为用户带来更好的视觉体验。