可视化图表组件体系的构建（内附全套开源文件）
Part01
————————
前言
EasyV作为一个低代码数字孪生可视化搭建平台，其图表组件作为可视化项目建设的基础构成发挥着重要的作用。
经过多年可视化项目交付经验，沉淀了一套形态多样、样式精细、高配置度的数据可视化图表。
Figma开源文件社区获取入口
EasyV产品官网入口
Part02
————————
EasyV Charts Components是什么？
基于EasyV图表组件的Figma图表组件体系库
2.1 支持
-包含常用24种可视化图表：柱状图、堆叠柱状图、立体柱状图、立体堆叠柱状图、水平条形图、水平堆叠条形图、象形图、折线图、面积图、饼图、环图、玫瑰图、万用图……
-所有图表的样式均可根据尺寸自适应
-内置10套B端可视化设计主题配色：深色8➕浅色2
-易拓展：配置化快速调整图表样式，例如：数值标签、坐标轴…
-可落地：图表设计可通过EasyV数字孪生可视化搭建平台快速落地
2.2 提效
基于EasyV的可视化项目交付包含需求调研、原型设计、页面设计、页面搭建、数据接入等环节，EasyV Charts component 帮助在原型设计、页面设计、页面搭建这些关键节点提效，提升40%可视化图表设计效率，提升10%的可视化项目交付效率。
Part03
————————
设计语言
设计关键词
- 易读性、简洁、继承性、拓展性、复用率、灵活性、可维护性
功能点
- 全局变量、形状可控、显隐、圆角、占比可配、一键换肤
3.1 色彩
色彩作为突出重点、区分数据类别、传达情感和引导观众注意力的部分，我们内置了可视化设计VED团队自有的设计作品中十套满足常用场景的配色方案，与EasyV中的主题配色一一对应。
3.2 布局
3.2.1 图表构成
通过对图形语法的启示，我们从设计的角度对图表进行了原子级别的拆分和抽象，从而形成了一套通用的组件，其中包括轴线、图例、图表和信息提示等。
3.2.2 响应式
绝对像素布局
优势：精确地控制图表元素的位置和大小，保障图形特征；
挑战：项目硬件分辨率差异较大时，图表会失去复用性，需要设计者对展示的不足做点状修补；
百分比布局
优势：根据显示区域自适应图表信息密度，有限的空间内帮助用户更快地理解信息和获取洞见；
挑战：图形表达的精细化颗粒度配置困难；
在EasyVxFigma的可视化体系中，以柱状图为例，我们选用了使图表元素在各种屏幕尺寸下具有更好的可读性和可用性的百分比布局，这与EasyV图表组件的布局逻辑保持了一致；
我们从图表整体、图表内原子组件梳理了适用于各元素组件的布局适应体系（响应策略），如下：
· 轴
① 纵轴
- 固定columns间间距为0，纵轴组为等距；根据父级容器尺寸自适应每个column的宽高；
- 参网格线和轴标签始终水平居中于column；参考线长度适应父级容器，轴标签始终居于column底部；
② 横轴
- rows为固定宽（top、bottom为中间段row宽度的1/2），rows间间距动态值，由父级容器尺寸决定；
- 参网格线和轴标签始终垂直居中于row；参考线长度适应父级容器，轴标签始终居于row左侧；
- 若显示z轴，不会影响row总长，z轴标签始终位于row右侧；
③ 坐标轴
- 横纵轴在整个图表容器中布局约束均为左右拉伸+上下拉伸；
· 图例
- 横向图例组设为三种布局方式：左对齐、居中对齐、右对齐；图标与文本间间距为固定值；
- 图例始终居于图表容器的顶部，宽度适应容器 ，不改变原布局方式；
- 由于没有更多辅助信息帮助数据表达，饼图、环图的图例相较于轴类的图例被寄予了更高的期望；除了图标与类目文本外，供给使用者是否显示类目对应的占比以及实际数值情况，其约束方式最大程度上保障图表元素间的平衡，若整体拖拽比例较大时，需要手动校准；
· 图表
- 各类型图表元素在整个图表容器中布局约束均为左右拉伸+上下拉伸，不改变子级布局方式；
· 信息提示与参考线
- 信息提示和参考线的适应方式具有一定的局限性，图表整体拖拽比例较大时，需要手动校准；
- 信息提示布局约束为锁定左侧和上间距；
- 参考线约束为左右拉伸；网格线适应容器，文本始终位于右侧；
3.2.3 字体
对于常规1920x1080的屏幕来说，正文14-18px，小标题文字18-24px，最小字号不低于12px;
行距通常设置为文本字号的1.5倍，比如14px字体行距为22px，16px字体行距为24px；
基于这一设计标准下，图表中的轴标签与数值标签应用了12px字体，信息提示框中图例需要强调数值的部分应用了14px，饼图和指标图中的指标数值应用了24px字号；
Figma开源文件社区获取入口
EasyV产品官网入口
Part04
————————
图表组件
4.1 折线图/曲线图
反映数据随时间变化趋势，或用于展示比率、比值等数据
- 提供三种折线/曲线样式，可任意组合
- 线图、面积图，折线图、曲线图，均可一键切换
- 线的点数可配置为（6，7，8，12，∞），点数需要跟x轴轴线数量保持一致
- 数值标签、点位显隐可控
- 更灵活：保留了对于【线】水平位置和高度占比的可配置性，更精准的把控图表的视觉平衡
4.2 柱状图/排行条形图
柱状图一般用于展现数据的变化和对比；横向的排行条形图一般用于展现数据的排名对比
- 基本柱状图、堆叠柱状图、基本条形图、水平堆叠条形图、双向水平条形图一键切换
- 柱子数可配置为（4，5，6，8， 12），数量与x轴预设数量为一一对应
- 数值标签显隐可控
- 更垂直：基于EasyV柱图组件的形态，提供了“立体柱”、“象形图”、“图片素材”等样式风格，且头部图片可配置显隐，落地更高效
- 更灵活：保留了对于有效柱形高度的配置、以及类目柱间间距、系列柱间间距的可配置性，更好的诠释数据之美
4.3 饼图/占比图
用来表示每一个数值相对于总值的大小；当需要呈现的类目超过7/8，并数据的间的差异不大，建议使用柱图作为数据呈现的方式
- 基本饼图、多色玫瑰饼图、基本环图、轮播环图一键切换
- 饼图系列数(2，3，4，5），需要跟图例数量保持一致
- 饼图间间隙显隐可控
- 图例内容数量 (1，2，3），系列数量 (1， 2，3，4，5)
- 数值标签内容数（1，2)，位置（左上，右上，右下，左下）
- 轮播环图下可配当前值
- 更精细化：占比、半径可控，更贴合实际业务场景
4.3 组合图（万用图）
供复合场景使用，通常使用多纵轴来辅助表现多维度的数据呈现
4.4 指标
通常用于核心指标
4.5 其他
除上述图表类型外，还提供了轮播表格，满足展示明细数据的使用场景
Part05
————————
写在最后
据 IBM 称，我们的世界每天要创建出高达 2.5 万亿字节的数据。人脑很难直接理解所有数据，但是可视化设计师可以通过图表设计在用户和数据之间建立对话。
作为设计师，设计图表的工作重点在于如何让复杂、混乱的数据更简单的呈现给用户。并且让用户能够快速、高效的理解分析数据从而做出正确的反馈，最终将构建一个回合的交互行为。
这次我们通过EasyV Charts Component探索了可视化设计中图表组件体系的构建，结合了可视化项目中图表设计规范，希望辅助其他设计师更好的通过图表设计表达、诠释数据之美。基于EasyV Charts Component提高设计师的设计效率，通过EasyV提升落地效率，把更多的时间用在更有价值体现的部分上。
此外，我们未来也会结合图表插件拓展产品能力，提升可视化项目页面搭建效率。
Figma开源文件社区获取入口
EasyV产品官网入口
使用反馈表单
可视化图表组件体系的构建（内附全套开源文件）相关推荐
- 用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
- 数据分析 | 数据可视化图表，BI工具构建逻辑
一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出来的信息,包括相应信息单位的各种属性和变量. 如果说的实际 ...
- Baidu KDD Cup 2022 官方赛题解读，内附 Baseline 开源代码
KDD Cup(国际知识发现和数据挖掘竞赛)是 ACM 协会 SIGKDD 分会主办的数据挖掘研究领域的国际顶级赛事,从1997年开始,每年举办一次,有着数据挖掘领域「世界杯」之称,是该领域水平最高. ...
- Myeclipse学习总结（16）——MyEclipse CI 2018.8.0首次更新，全新来袭！（内附破解激活文件，亲测破解100%）
一.MyEclipse CI 2018.8.0简介 MyEclipse 2018首次更新,全新来袭!期待已久的2018版Myeclipse终于来了!总结了下MyEclipse CI 2018.8.0 ...
- echarts实现全国及各省市地图（内附地图json文件）
echarts实现各省市地图 总结不易,大家别忘了点赞+关注呀! 首先要获取目标地图的json文件,去阿里云就可以获取:阿里云地理 进入后看到的是这样的: 上图是全国地图,如果想要某市的,点击对应省份 ...
- 数据分析可视化04 图表组件：Echarts数据可视化图表基础
本课时是课程的第二个模块,环境部署篇的第一个课时.在第一部分的基础理论篇,我向你介绍了数据可视化分析的概念定义.方法体系和关键技术.接下来,我会带你了解基于开源框架,如何部署数据可视化分析的开发环境, ...
- Asp.net报表制作 OpenFlashChart免费图表组件
Asp.net报表制作 OpenFlashChart免费图表组件 OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表组件,用它能创建一些很有效果的报表分析图 ...
- python制作可视化图表-如何攻破可视化图表？附完整 Python 源代码
如何攻破可视化图表?附完整 Python 源代码 翻译 | Lemon 责编 | 郭 芮 本文总结了 Matplotlib 以及 Seaborn 用的最多的50个图形.这些图表列表允许开发者使用 ...
- 「github资料」40个Python可视化图表案例（附零基础学习资料）
前言 数据可视化是数据科学中关键的一步.(文末为大家准备了学习资料) 在以图形方式表现某些数据时,Python能够提供很大的帮助. 不过有些小伙伴也会遇到不少问题,比如选择何种图表,以及如何制作,代码 ...
最新文章
- R语言数值向上近似函数（round, ceiling, floor, trunc, signif）实战
- 使用BeanUtils.copyProperties进行对象之间的属性赋值
- ap的ht模式_AP6256 STA模式操作示例
- GO语言实现RSA 加密和解密的实现
- 51单片机实现4位数以内的加减法
- LeetCode 652. 寻找重复的子树（DFS）
- 用工具激活visio2013
- 详解 EnumWindows 与 EnumWindowsProc - 回复 SplendourChiang 的问题
- （转）CKEditor和CKFinder在ASP.NET中的应用
- HTML + CSS 为何得不到编程界的认可？
- 夺命雷公狗TP3.2.3商城16-----无限极分类删除（玩法1：有子级分类的不能删除）...
- 四、bootstrap-Table
- java fileupload 文件类型_FileUpload怎么获取文件的类型
- hp计算机u盘启动,惠普台式机u盘启动（免费分享惠普电脑u盘启动步骤）
- eplan窗口宏与符号宏是什么_电气设计||Eplan P8 宏功能的应用
- jxl获取excel超级链接
- [交换最小值和最大值] 本题要求编写程序，先将输入的一系列整数中的最小值与第一个数交换，然后将最大值与最后一个数交换，最后输出交换后的序列。 注意：题目保证最大和最小值都是唯一的。
- 服务器sni协议,SNI协议分析
- 贪婪洞窟2如何修改服务器,贪婪洞窟2改造系统详解-改造系统概率分析
- Vue双向绑定：原理篇（详细）