最近在一个项目中做数据可视化设计和实现的功能，有一些前端图表设计和实现的收获跟大家分享。
一、为用户提供个性化的数据分析视图
数据分析和数据可视化的优点不言而喻，但是数据可视化一定要结合用户角色特征进行展示才有意义。比如普通员工和管理者角色，关注的重点肯定不同，普通员工会更注重个人绩效、个人的排名等，而管理者会更注重整个部门的整体绩效情况，可能还会关心整体中的一些极端个例。
所以为不同角色的用户提供适合的数据分析视图，才能让数据展示有意义。
二、数据可视化常用图表
数据可视化的常用图表包括柱状图、饼图、折线图、散点图、雷达图、漏斗图等。
（1）柱状图
优点：强调个体和个体之间的差异，由于人眼对高度比较敏感所以易于比较数据间的差别；
缺点：不适宜大量的数据集即项数较多时不适合使用；
适用场景：一个维度的数据比较、数据单纯性展示、排序数据展示等；
适用数据：数据集不大的二维数据集；
注意事项：通常用户习惯认为柱状图的X维是时间维，可以用颜色来区分每根柱子，改变用户对时间趋势的看法；如果分类项目的标签文本比较长，会出现重叠，建议使用条形图。
（2）饼图
优点：直观的显示各部分的占比和分布情况，强调个体和总体的比较；
缺点：数据不精细，不适合分类较多的情况；
适用场景：一个维度各项指标（一般不超过5个项目）占总体的占比情况，分布情况；
适用数据：具有整体意义的各项相同数据；
注意事项：使用时饼图最好不超过5个，区块越多用户提取数据的能力就越弱；
（3）折线图
折线图分为直线折线图和曲线折线图。直线折线图适用于离散变量，曲线折线图适用于连续变量。
优点：反应数据变化趋势;
缺点：数据集太小时显示不直观；
适用场景：需要反应变化趋势、关联性；
适用数据：时间序列数据，关联类数据；
（4）散点图
散点图还有一种变形是气泡图，气泡图通过每个点的面积大小反映第三维。
优点：直观反映数据集中情况，对离散数据线性回归等曲线预测性的拟合辅助作用；
缺点：适用场景比较少；
适用场景：对离散数据进行预测，两个维度的数据；
适用数据：离散值数据；
（5）其他数据分析常用图
热力图，用于表示密集程度，可以直观清楚地看到页面上每一个区域的访客兴趣焦点，图形化展示，清晰直观；
漏斗图，用于表示数据转化类关系，适用于业务流程比较规范、周期长、环节多的流程分析，通过漏斗各环节业务数据的比较，能够直观地发现和说明问题所在；
仪表盘，指标类数据；
雷达图，适用于多维数据（四维数据），且每个维度必须可以排序。
最后其他最重要的核心数据，直接用数字显示，最直观。
三、数据可视化主要技术
前端常用的可视化技术主要有d3.js、echarts、highcharts；
其中d3.js的定制化更强，但是美观度和工作量需要自己把握；echarts由百度提供，免费使用，开发工作量小，但是定制化能力弱；highcharts和echarts比较类似但是需要商业授权。
highcharts和d3.js是基于SVG渲染的，性能差些，但是是基于DOM操作的，用户交互更精确，可以通过virtual dom技术解决性能差的问题，如react前端框架。
echarts基于canvas渲染的，性能更好些。
