vue2+datav可视化数据大屏(3)

接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦

1,新建组件

         我们在ser-views文件夹下新建9个vue组件,如下图所示,我给编号为1到9

vue2+datav可视化数据大屏(3)_第1张图片

         在组件里写入内容我是第一块...一次类推,一直到第九块



 2,将我们新建好的组件全部依次填入到我们的主容器indexdata里去

         在主容器中引入组件,并注册

vue2+datav可视化数据大屏(3)_第2张图片

         现在需要就是拼图,将我么需要展示在大屏哪个位置的组件依次的放入到我们的大屏骨架里去

 vue2+datav可视化数据大屏(3)_第3张图片

          最后展示出来的效果就是

vue2+datav可视化数据大屏(3)_第4张图片

 这里因为字体是黑色的,所以我把黑色背景换成了白色,只为了演示而已

3.内容填充

         现在骨架已经搭好,所有的组件已经在他们改在的位置了,这时候,我们需要的就是,在每个小模块的组件里使用echarts和请求接口了

代码如下



         我们看下主屏幕的效果

vue2+datav可视化数据大屏(3)_第5张图片

          ok现在算是完成了,现在目前设置的是一小时请求一次接口更新一次数据,其他的8个模块和第一个模块一样的调节,照常写即可。这里我就不多写了,直接看效果吧

vue2+datav可视化数据大屏(3)_第6张图片

          最后的效果就是这样滴 我下面会把源码放出来,这套完全可以作为公司的项目来使用,哈哈 拜拜

git地址 

[email protected]:hu-wenwu/banana.git

你可能感兴趣的:(前端,vue.js,javascript)