使用vue版本地dataV组件库

dataV

这个库主要是用来写监控大屏得,提供了很多好看得图表供选择,也有vue版本和react版本。
官方文档
正常按照官方文档下载库,然后导入组件,传入文档中要求的配置项就可以成功得渲染出来,下次简单写一点我的使用过程

        <div class="full-screen">
            <dv-border-box-11 title="污染物监管系统">
                <dv-loading v-if="loading">Loading...</dv-loading>
                <div v-else class="body">
                    <div class="item">
                        <dv-active-ring-chart :config="config1" style="width:200px;height:200px" />
                    </div>
                </div>
            </dv-border-box-11>
        </div>

效果

使用vue版本地dataV组件库

这个库的全屏组件不太好用,自己实现一个即可,然后布局调整一下,组件多用填满屏幕,针对需求使用组件,这样就会像一个专业的监控大屏了,另外大屏数据往往都是不停刷新的,我知道的有两种方案,一种是轮询,就是不断地请求接口获取数据,另一种是websocket协议,建议学习。

上一篇:DataV


下一篇:超震撼数据可视化工具GitHub开源的10个超棒后台管理面板