我发现,酷炫的大屏已经不能满足大家的需求了,不少人又对指标和维度数据的展示提出了新的困惑:
![cbd3855b959099c699fdd4d3813727a8.png](https://i-blog.csdnimg.cn/blog_migrate/301086ab1af05f63d3d023961283a8da.jpeg)
秉持着快速响应需求的态度,产品团队精心打造了——智慧树图,它不仅沿袭了扩展图表系列组件精致酷炫的视觉效果,在轮播、跳转等联动特效上,更是体现了数据展示的实用性,可谓是指标类大屏开发者的福音!
一、智慧树图介绍
(1)两大联动效果,指标管理更简单
智慧树图由树干和树枝上的气泡两部分组成,气泡用来展示数据的维度信息。气泡可以自动轮播时联动其它组件,让同模板的其它图表切换到与气泡相同维度的数据;
![3ff83026f3a5ceac45b5da2802d2c2d1.gif](https://i-blog.csdnimg.cn/blog_migrate/6fd0fa659da6ddcb34302986f4b52553.gif)
也可以鼠标点击跳转到其它页面,显示该维度下的详细指标数据。两种联动效果随需选择,让指标管理变得更清晰简单。
![7f91a4c72d48aaa7fa9e66388f2b9f6c.gif](https://i-blog.csdnimg.cn/blog_migrate/635ec79f8d1baab5a07e081857d5d24f.gif)
(2)整合多张模板,构建大屏系统门户
当一个企业,或者一个大型项目的所有指标数据都要在同一个大屏设备上展示时,一张模板可能难以容下所有的数据。
如下图示例中的投资监管大屏,产权管理、保理业务和投资风险等维度完全可以单独填满一张大屏,此时,如何在一个大屏幕上展示多张模板成了困扰项目经理们的难题。
![8cc36b027ae7827fd4228ab36d8a4b92.png](https://i-blog.csdnimg.cn/blog_migrate/72ca92d817de67c9dd35927f7d6386d2.jpeg)
智慧树图拥有良好的视觉效果,可以作为大屏展示系统首张模板的主体,结合联动效果,点击智慧树维度跳转到对应的模板。这样,几张模板就巧妙地构成了一个完整的“线上监管系统”啦!
(3)两种样式可选
智慧树同样拥有游戏级的酷炫效果,并且有“电子”和“模型”两种风格可选。
![c45ba06cf62018759a526e8cb9396db1.gif](https://i-blog.csdnimg.cn/blog_migrate/83fe657e6c5dbbce275e6cacb7913ac6.gif)
电子效果偏重科技风格,象征着企业的创新和数字化,模型效果则更古朴醇厚,可以衬托企业的文化底蕴。
![369bfc68c443e279ade7e0cd9c943cd7.gif](https://i-blog.csdnimg.cn/blog_migrate/2dac720add699688f050b5583a814f36.gif)
加载动画是一根光柱冲出成为树干的同时,一片数字散落成树枝,让大屏加载的等待过程不再漫长乏味。
(4)可配置项全面
不少客户提出,3D图表的视觉效果虽好,但字体、色彩等可配置的选项太少了,限制到了大屏开发的风格。
![2a5349ecff0bed6c5fc706f4853bdc9b.png](https://i-blog.csdnimg.cn/blog_migrate/7bc38580c140e551634e3ffc213e1dc1.jpeg)
大部分图表增设了可配置项,智慧树图也不例外,无论是树体、气泡和标签字体的颜色,还是背景的动效和填充,都可以随需自定义。
二、关键步骤教程
智慧树图联动、跳转的步骤并不复杂。
(1)智慧树联动其它组件
- 首先,为智慧树图确定几个展示维度,显示在气泡中
- 其次,设置好被联动的组件;
- 最后,在特效中开启图形轮播,并添加JS链接。
![5e9ee1e2fda89f7e899f3d4ff98cab2e.png](https://i-blog.csdnimg.cn/blog_migrate/9bd03302bc92985a38fec16c549d6695.jpeg)
(2)超链接跳转其它模板
同样确定好智慧树图的展示维度;其次制作好气泡跳转到的模板,与智慧树图所在主模板放在同一文件夹下:
![a70ab364a1ac24636759dfb79bd95447.png](https://i-blog.csdnimg.cn/blog_migrate/825cb2216c478c593e9159ac004ee65f.jpeg)
三、模板
还是感觉操作步骤繁琐,想要一个案例模板?
看评论,主模板+7个子模板,而且这套模板和数据均来自真实的业务案例改编,拥有极高的参考价值!
![24e41d5771d4e7839d7e4a8f167bdabf.png](https://i-blog.csdnimg.cn/blog_migrate/2fe79cb3087f2d82be6b3429b6ccc230.jpeg)