zoukankan      html  css  js  c++  java
  • 仪表板设计技巧-如何将多个元素进行重叠实现更酷炫的可视化大屏

    在使用Wyn Enterprise进行仪表板设计过程中,为了整体设计的美观和具有更酷炫的效果,经常需要多个可视化元素进行重叠放置,以及重叠在一起的元素怎么随意选择其中一个。例如可视化大屏标题,需要有标题文字以及标题装饰;总量数据展示需要有数字以及图表以及个性化边框,可视化大屏整体设计不同可视化元素需要有不同风格的边框等等。

    本贴主要介绍在仪表板设计多个元素重叠相关的技巧。帮助大家可以设计更美观的数据可视化大屏

     

    重点:灵活利用多种可视化元素进行重叠组合达到完美的效果

    具体实现过程:
    一、创建仪表板,并在仪表板设计器开启组件重叠功能。


    二、开启组件重叠功能之后,就可以跟自己的需求选择不同的可视化元素进行设计。
    1.以标题设计为例详细介绍组件重叠功能,可以采用文本框或者图片组件作为标题的底部装饰。

    文本框组件添加背景图片作为底部装饰。选中该文本框,点击属性设置,添加背景图片。

    图片组件添加图片作为底部装饰。选中该图片组件,点击组件右上角的编辑图标可以添加背景图片。


    当然也可以选择其它可视化组件,例如容器组件添加背景图片,大家可以灵活选择这些可视化元素作为底部装饰。

    2.然后可以采用文本框,编写标题文字,根据风格选择字体颜色,大小等等。同样也可以选择采用扩展插件通过html和css实现动画标题。
    文本框实现标题。

    外部扩展插件实现动画效果标题。

    动画效果如下,当然也可以自己实现更酷炫的动画效果。


    3.其它的可视化组件设计同上面类似,灵活采用各种可视化元素,通过添加背景图片,或者扩展插件来实现更丰富、自由、灵活、酷炫的可视化数据大屏。

    三、在组件重叠设计的过程中,当两个组件同样大小的时候,我们需要选择其中某一个组件的时候该怎么做?
    接下来介绍在组件重叠时候怎么选择任意组件。
    例如现在标题背景装饰和标题组件重叠,需要修改背景装饰的时候该怎么选择底部装饰组件呢,当然可以将上面的组件拖动移开,然后选择底部装饰组件,再将上面标题文字组件移动回来,这样会比较麻烦,下面介绍一种技巧。

    当两个组件重叠的时候,我们可以在该组件上右键选择我们想要进行操作的组件进行编辑。

    此时选择组件会被选中,即可鼠标点击进行编辑。

  • 相关阅读:
    moss文档浏览次数统计
    C#中方法参数的四种类型
    [记录] JavaScript 中的深浅拷贝(克隆)
    [记录] JavaScript 中的事件分类
    [记录] JavaScript 中的数组操作
    [记录] JavaScript 中的事件(Event对象、事件源对象、事件流、事件绑定)
    [记录] JavaScript 中的try..catch 详细的错误信息
    [题目] JavaScript 练习题目(一) [020]
    [记录] JavaScript 中的this和call()、apply()方法
    [记录] JavaScript 中的对象操作和包装类
  • 原文地址:https://www.cnblogs.com/edoo/p/13646574.html
Copyright © 2011-2022 走看看