? ? ? ?最近在一個項目中做數據可視化設計和實現的功能，有一些前端圖表設計和實現的收獲跟大家分享。
一、為用戶提供個性化的數據分析視圖
? ? ? ? 數據分析和數據可視化的優點不言而喻，但是數據可視化一定要結合用戶角色特征進行展示才有意義。比如普通員工和管理者角色，關注的重點肯定不同，普通員工會更注重個人績效、個人的排名等，而管理者會更注重整個部門的整體績效情況，可能還會關心整體中的一些極端個例。
? ? ? ? 所以為不同角色的用戶提供適合的數據分析視圖，才能讓數據展示有意義。
二、數據可視化常用圖表
? ? ? ? 數據可視化的常用圖表包括柱狀圖、餅圖、折線圖、散點圖、雷達圖、漏斗圖等。
? ? ? （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渲染的，性能更好些。
