VUE大屏可视化实战

前言

框架:若依 VUE+SpringBoot前后端分离

基于此框架开发一个可视化自适应大屏(包括echarts和element的各种组件)

 1.布局

        通过div将大的布局框出来,div一定要由大到小的写,否则太容易画错了,为了便于更直观的看到自己的div大小,可以在style中加上border: 1px dashed #aaa;把div的边框显示出来。

        我的页面布局分为上下2个部分,下面的部分又分为左中右3个模块,左中右模块的每个模块又会分成上中下三个小模块,各个模块中会放一些echarts的图例(柱状图,饼图,折线图)和element的table表格,当然这还没有结束,小的模块下面还会有更小的div。

        自适应布局:要想做到自适应,div的宽和高一定得用百分比。(还有文字,echartselement的组件也要做相应的处理,这个之后再写)


大致的布局图如下:

 

 源码如下:





2.echarts图例+element组件的应用

未完待续。。。
 

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