瞎定一个团队的数据可视化大屏开发规范

2019-03-24

开篇闲扯

算是上篇的延续吧,选定了技术方案,就开始撸码了,经过一个星期的写代码,大概能够找到那么一点感觉,果然没有先一股脑的先投入去研究怎么写一个数据可视化大屏开发的框架,而是先从写一个大屏的代码开始,逐步去研究如何写一个大屏,写一个数据数据可视化大屏需要哪些准备之类的。好歹也经过了一周的撸码,大致也有了一定的规范,接下来就来好好扯一扯。

一堆初步定义的规范来袭

目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- public  #公共资源文件,暂定为打包目录
- src # 主文件夹
- components # 公共组件
- Charts # 图标相关组件
- Echarts # 使用 Echarts 编写的图表组件
- AntV # 使用 Antv 编写的图表组件
- D3 # 使用 D3 编写的图表组件
- Elements # 页面元素组件
- Audio # 音频元素组件
- Border # 边框元素组件
- Box # 盒容器元素组件
- Decroate # 装饰元素组件
- Image # 图片元素组件
- Text # 文本元素组件
- Title # 标题组件
- Video # 视频元素组件
- SVG # 使用SVG绘制的元素组件
- group # 分组
- libs # 公用脚本
- App.html # 主页面
- main.js # 主文件

说明:

  1. src 的下一级目录都用小写,再下一级的目录统一采用大写字母开头;
  2. 组件相关类的都是用组件名称进行命名,例如:Elements/Decroate/Decroate-1/Decroate-1.html代表一个元素组件下装饰组件,若无法给组件命名,则统一使用需要序号进行命名,例如:Decroate-1/Decroate-1.html
  3. 在开发完成后,同级目录下增加一个example.png作为组件的示意图。

组件编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="dui-text" style={styles}>
<slot />
</div>

<style lang="scss">
.dui-text {
position: absolute;
}
</style>

<script>
import buildStyle from '../../../libs/buildStyle.js'
export default {
computed: {
styles: ({x=0, y=0, style={}}) => {
return buildStyle({
top: `${y}px`,
left: `${x}px`,
...style
})
}
}
}

</script>
  1. 组件中必须包含x y,分别代表 left top
  2. 如果有宽度的设置则必须使用 width 作为 props 进行传递;
  3. 其它样式的修改则使用style作为props进行传递;
  4. 多个组件进行组合而成的应该新元素建议放在 Box中,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- Box-1.html -->
<div class="dui-box-1" style="top: {y}px; left: {x}px; width: {widthVal}px">
<Border1>
<p class="dui-box-1-title">{title}</p>
<div class="dui-box-1-middle">
<div class="dui-box-1-middle-left">
<Decroate4 />
</div>
<div class="dui-box-1-middle-right">
<span class="dui-box-1-middle-right-text">{value}</span>
</div>
</div>
<div class="dui-box-1-bottom">
<Decroate5 />
</div>
</Border1>
</div>

<style lang="scss">
.dui-box-1 {
position: absolute;
.dui-box-1-title {
text-align: right;
color: #1f6396;
font-size: 12px;
}
.dui-box-1-middle {
overflow: hidden;
}
.dui-box-1-middle-left {
display: inline-block;
line-height: 65px;
margin: 0 30px 0 0;
}
.dui-box-1-middle-right {
float: right;
}
.dui-box-1-middle-right-text {
color: #098fd0;
font-size: 40px;
}
.dui-box-1-bottom {
height: 6px;
position: relative;
}
}
</style>

<script>
// 包含 Border1、Decroate4以及Decroate5
import Border1 from '../../Border/Border-1/Border-1.html'
import Decroate4 from '../../Decroate/Decroate-4/Decroate-4.html'
import Decroate5 from '../../Decroate/Decroate-5/Decroate-5.html'

export default {
computed: {
widthVal: ({width}) => {
return width || 'auto'
}
},
components: {
Border1,
Decroate4,
Decroate5
}
}
</script>
  1. 组件的类名统一由dui-<元素类型>-<序号>组成,例如Box-1组件则命名为dui-box-1
  2. 组件中若包含其它资源,则存放在 Box/Box-1/assets 文件夹下;
  3. 图表组件,则必须包含data,用来作为数据的入口;根据实际情况若有x、y轴,则统一命名为xAxis以及yAxis作为props传入;

组-group

类似许多软件中组的概念,建议在开发之前,可以先将页面进行分组,按组进行开发,这样可以保证在调整页面位置时能够整块的进行移动,避免需要一个个的元素进行调整,以及便于区分页面上的元素。
group下的文件夹建议使用中文进行命名,可以更好的识别到组的分类,规范为group/福州市平均住院日/index.html,组也是由许多元素组成,对外需要暴露x y属性,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 福州市平均住院日/index.html -->
<div class="group" style="top: {y}px; left: {x}px;">
<Text style={textStyle} x={0} y={0}>福州市医院平均住院日</Text>
<Decroate2 x={0} y={21} width={561} />
<Decroate3 x={180} y={10} width={350} />
<Box2 text="三级甲等医院" value={9.5} x={0} y={50} />
</div>

<style>
.group {
position: absolute;
}
</style>

<script>
import Decroate1 from '../../components/Elements/Decroate/Decroate-1/Decroate-1.html'
import Decroate2 from '../../components/Elements/Decroate/Decroate-2/Decroate-2.html'
import Decroate3 from '../../components/Elements/Decroate/Decroate-3/Decroate-3.html'
import Text from '../../components/Elements/Text/Text.html'
import Box2 from '../../components/Elements/Box/Box-2/Box-2.html'

const textStyle = {
fontSize: '16px',
color: '#0d8fd2',
width: '180px'
}

export default {
data () {
return {
textStyle: textStyle
}
},
components: {
Decroate2,
Decroate3,
Text,
Box2
}
}
</script>

开发

  1. 可使用 chrome 的移动设备调试模式,设置好页面宽高,根据页面标尺进行位置锁定;
  2. 建议按照最小的颗粒度进行拆分组件,达到最大程度的复用;
  3. 能够使用svg的部分尽量使用svg;
  4. 当完成一块大屏开发后,需要将成熟稳定的组件进行提取为公共组件,并传到内部npm;

TODO

  1. 脚手架
  2. 组件开发脚手架
  3. 屏幕自适应
  4. 构建脚本
  5. 开发界面组件名称显示
  6. 开发界面标尺显示
  7. 数据可视化大屏组件库建立
  8. 数据可视化大屏组件库官网

结语

一切都还没成型,先对一周的工作做一个小结,下一周还有很多的事情需要完成,希望能够尽快将这个规范和流程建立起来。

下面是我的微信

欢迎骚扰

ww1o01