Fork me on GitHub

数据可视化之大屏展示

发表于 | 分类于 | 阅读次数:

1、前言

说起数据大屏，酷炫！对的，数据大屏就是讲究酷炫效果。除了一些寻常的可视化图表，也包括一些3d可视化地图等等

2、总结大屏展示三大基本要求就是：

  • 1、不出现滚动条
  • 2、自适应布局
  • 3、黑色节约省电

不出现滚动条

如果一个大屏展示项目出现滚动条，那放大到很大的一个程度，那岂不是有很大一部分看不见，所以大屏展示必须不能出现滚动条，这是必须的。

屏幕自适应布局

一般设计稿是1920*1080的设计图，但是不一定是这个尺寸，目前不知道展示这个这个数据大屏的屏幕尺寸是多少，因此，只能做出自适应的效果，但是如何做到自适应效果呢。想了几种方案，目前我用的方案是采用vh和vw单位来进行页面布局的

用vh和vw单位的好处

1、可以实现滚动轴出现，页面不闪动效果，代码如下：

1
2
3
4
5
6
@media screen and (min-width: 960px) { //之所以进行宽度判断，是因为移动端滚动轴不占宽度
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

自此，就不需要再计算滚动轴的宽度了。
2、因为我是全屏的，不需要出现滚动轴，但是不同的缩放屏幕，有可能会出现滚动轴，可以用如下代码，取消滚动轴显示。

1
2
3
4
5
html {
    width:100vw;
    height:100vh;
    overflow:hidden;
}

坏处

1、计算起来相对麻烦
2、在父级元素是定位的情况下，完全可以用百分比替代，百分比比VH和VW兼容性好。（我的数据大屏不需要很好的兼容性，因此选用了vh和vw）

3、echarts自动触发tooltip

数据大屏中很多都是自动触发的，没有鼠标交互，每隔几秒执行一次，我们用到了一个类似中国地图的表格，但是tooltip是自动触发的，每隔几秒更新一下数据，触发一次！
首先把tooltip下面的triggerOn设置为none,然后通过dispatchAction来触发，官方API解释比较模糊，其实很简单，代码如下：

1
2
3
4
5
6
7
myChart.dispatchAction({
    type: 'showTip',
    // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
    name: (convertData(obj.mapData.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 1)))[0].name //获取最多数据的名字
});

这样就可以自动触发了

4、用svg制做动态时钟

数据大屏上面需要有一个动态的时间，时间是跳动的，还需要一个时钟。代码如下：
html代码如下：

1
2
3
4
5
6
7
8
9
10
11
<div id="nowtimes">
                <div class="parent">
                    <svg height="200" width="200" viewBox="0 0 1000 1000">
                        <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26"/>
                        <path d="M500,500,500,236" id="hour"/>
                        <path d="M500,500,500,120" id="min" />
                        <path d="M500,500,500,90" id="sec" />
                    </svg>
                </div>
                <div class="tdtimes" id="tdtimes"></div>
          </div>

css代码如下：

1
2
3
4
5
6
7
8
9
/* 钟表样式*/
svg {position: absolute;top: 10%; width: 100%; height: 80%;}
path { stroke: #fff;stroke-linecap:round; stroke-width: 35;fill:none;}
#sec { stroke: #fff; stroke-width: 20;}
#min {stroke: #fff;stroke-width: 30;}
#hour { stroke: #fff;stroke-width: 30;}
#nowtimes{margin-top:7px;}
#nowtimes .parent{width:30px;position:relative;height:30px;display: inline-block;vertical-align: middle;}
.tdtimes{display: inline-block;font-size:.7vw;color:#979798;vertical-align: middle;}

js代码如下：

1
2
3
4
5
6
7
8
9
10
setInterval(function() {
      function r(el, deg) {
        el.setAttribute('transform', 'rotate('+ deg +' 500 500)')
      }
      var d = new Date();
      r(sec, 6*d.getSeconds());
      r(min, 6*d.getMinutes());
      r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
      $("#tdtimes").html(d.getHours() +":" +d.getMinutes() +":" +d.getSeconds());
    }, 1000)