组件化图表库的设计与应用

2018.12.22

袋鼠云前端高级开发工程师—饮冰

01

02

03

04

业务背景可视化理论、应用场景、业务介绍

组件库设计传统模式、通用原则、技术选型

平台实践优化策略、接口开放、风险规避

案例说明客户案例数据脱敏demo

业务与技术背景

数据可视化

数据可视化是关于数据之视觉表现形式的研究。

其中，这种数据的视觉表现形式被定义为一种以某种概要形式抽提出来的

信息，包括相应信息单位的各种属性和变量。

应用场景

我们做了什么？

业务 流程 产品

应用结构

组件库的构建

传统解决方案

eCharts

HighCharts

jQuery Plugins

其他

图表 = lib +

configObject

灵活性？

可拓展性？

可复用性？

数据可视化的流程

原始数据 应用数据 几何数据 图形数据

预处理 映射 绘制

目的

方便扩展定制

可复用

可缩放

与平台解耦

文件尺寸

技术选型

平衡点

图表分解

座标轴

基本图形形状

文字

辅助元素

例子

几点规范

1.不要忘记 proptypes

2.尽量使用无状态组件

3.每个组件独立为一个svg元素

4.请使用 export from 语法

5.特殊组件间解耦独立发包

为什么不直接使用 D3

React Wrapper

最大复用单元

图表组合与组件

可视化组件

业务数据源

业务组件

Easy[V]平台

Easy[V]数据请求与处理模块

平台组件配置模

块

oracle

MySQLAPI

CSV/Excel

格式化数据

展示配置项

CDN/

自建资源服务器

组件资源JS/CSS/IMG/etc.

对外大屏

分享发布

产品资源

整体架构

平台产品项目实践

防网络延迟/断网/紧急预案

LocalStorage

lowDB

数据缓存

屏幕录制 ？？？

内存泄漏

组件Unmount

资源回收

慎用Random()

请求并发

同域请求并发数限制

http/2请求并发

多路复用

http/1.1

http/2

组件容错

componentDidCatch

项目案例说明

反面教材

零售大脑：袋鼠云x酒类品牌

智慧景区：袋鼠云 X 西溪湿地

打造智慧旅游景区大屏，实现数字化景区运营，助

力未来智慧景区样本

防汛大脑：袋鼠云x防汛大脑

打造防汛大脑，为未来防汛指挥调度提供决策支持

袋鼠云X国家电网

Easy[V] ——交互式数据可视化大屏开发平台

有颜值，更有实力

发布和分享

大屏配置 大屏样式配置 组件交互配置 终端控制配置 数据映射配置

组件基础图表

子组件

地图

文本

辅助图形

交互组件

动效组件

视频流播放器

数据结构化

数据查询条件配置

数据源 SQL API CSV 音视频流媒体

业务数据库 MySQL SQL Server Oracle 其他

技术架构

Easy[V]——交互式数据可视化大屏产品

拖拽式布局

灵活部署和发布

秒级实时

多数据源

可视化组件

拖拽即可完成样式和数据配置，

无需编程就能轻松搭建数据大屏

支持接入包括关系型数据库、本地

CSV上传和在线API等数据源，支持

动态数据请求

支持接入包括关系型数据库、本地CSV

上传和在线API等数据源，支持动态数

据请求

支持多种可视化图表组件，如折线

图、柱状图、气泡图、地图等，支

持多种行业模板，供用户自由拼接

成大屏

持对海量数据秒级实时展示

#5大产品特色，降低数据可视化大屏应用门槛

袋鼠云丨数据智能，让未来变成现在

袋鼠云成立于2016年，是国内领先的 。自创立

以来，袋鼠云始终坚持 的理念，将数据智能

的先进理念和技术传播和应用到传统行业中，在“一切业务数据

化”的基础上，通过帮助挖掘客户的数据价值，实现“一切数据

业务化”，帮助提升生产效率，促进产业创新和社会进步。

使命：让数据产生价值 愿景：做最领先的数据智能践行者 价值观：客户第一、团队合作、专业、担当

一年半内累计融资1个亿，入选

2018年杭州“准独角兽”榜单

1亿

总部坐落于人间天堂杭州，

在北京、上海、贵州均设有

分公司或办事处

4地

作为阿里云战略合作伙伴，阿里云

生态技术先锋，拥有7项阿里云合作

伙伴认证，超过10位阿里云全球

MVP

7项公司总人数超过200人，其中

80%为技术人员，每年数千万研

发投入

80%

3000+客户选择和袋鼠云数智同行

电话：400 002 1024 网址：www.dtstack.com

关注下载分享内容电话：400 002 1024 网址：www.dtstack.com