先放下效果图
以上是目前开发出来的大屏框架1.0版本,较为简陋。没有进行复杂的界面设计,采用了9*9的标准设计布局
主要使用了百度提供的echarts库,进行图表的实现,使用了jquery来实现简单的主题切换交互功能
稍微说明下设计的思路:
首先作为一个框架库,对于界面的设计,应该是通过配置项来实现的
在布局方面,我选择了使用绝对定位布局来布局,使用百分比来界定每一个小盒子的宽高
只需要在开发时,进行相应的设计,写入对应的domjson配置,就可以生成任何想要的盒子,以下是代码
根据以上这些数据,再通过解析的代码就可以生成对应的dom结构
关于echart的渲染,根据id进行匹配,只用配置对应的option代码,就可在对面的盒子里生成对应的图表
可在此函数内进行Ajax操作,完成图表的数据交互
也可通过该函数进行特例化设计,可用字符串拼接,也可以template模板,进行随心所欲的各种设计