ECharts數(shù)據(jù)可視化：從0到1的蛻變（內(nèi)部技術(shù)分享總結(jié)）
前言
最近接到一個新的任務(wù)，說是在公司內(nèi)部要組織開展技術(shù)交流分享會，為了促進程序同事間的技術(shù)氛圍，提高大家的學(xué)習(xí)積極性，讓更多的人能參與進來，已納入部門和個人績效考核范疇。
形式很簡單，每周都會進行一次技術(shù)分享。分享人由入職時間先后順序安排。題材不限，可以是自己熟悉的技術(shù)領(lǐng)域或某個知識點，比如區(qū)塊鏈開發(fā)者分享底層公鏈、聯(lián)盟鏈、智能合約等等；服務(wù)端開發(fā)者分享框架與設(shè)計模式，SQL深度優(yōu)化，消息隊列等等，前端開發(fā)者分享MVVM模式，WEB前端性能優(yōu)化，數(shù)據(jù)可視化，CSS3高級用法等等。
可以是一些通用的技術(shù)，比如數(shù)據(jù)結(jié)構(gòu)，算法，代碼規(guī)范，學(xué)習(xí)路線指南，調(diào)試技巧等，甚至可以是看書讀后感（讀書筆記）等等，抑或是最近大家在研究一個開源的項目，也可以跟大家講講這個開源項目的架構(gòu)，或許有些人利用業(yè)余時間做了一個小工具插件，也可以拿出來分享。
首次線下分享經(jīng)歷
有圖有真相，感謝同事們的支持與關(guān)注，快來瞧一瞧??，站在臺上是不是老帥了。
先簡單介紹一下自己，我是Jack Chen，一名非常熱愛學(xué)習(xí)的【高級Web前端工程師】，從事Web前端工作多年，具有豐富的大中型實戰(zhàn)項目開發(fā)經(jīng)驗。【學(xué)習(xí)與寫作】是目前唯一每天都堅持完成的事情，業(yè)余時間的我，喜歡寫作和分享。我運營著自己的公眾號【懶人碼農(nóng)】和有著一群喜歡閱讀我文章的讀者，還能跟著志同道合的伙伴們一起交流學(xué)習(xí)一起進步。
個人博客演示地址：http://106.55.168.13:8888/
小編接到這個任務(wù)后，第一反應(yīng)是自己覺得沒啥壓力，反而更加有動力，想著怎么去做好這次技術(shù)分享會。還主動提出作為2021新年第一場技術(shù)分享者，也是首次嘗試線下交流分享會。
分享幾點收獲
做技術(shù)分享，最大的受益者在分享者身上。在分享的準(zhǔn)備和過程中，訓(xùn)練了寫作能力，組織能力，演講能力，和資料整理能力。再面向自己的同事陳述一遍，分享的資料才會真正變成自己的東西。 學(xué)會制作PPT演講稿或畫思維導(dǎo)圖（文末下載） 通過分享會，讓更多的人參與進來，大家互相交流和探討技術(shù)，可以互相提高，結(jié)識更多大牛。
此次分享自我感覺還不錯，獲得了一大波粉絲的支持與關(guān)注，雖然自己還有很多不足（比如：時間管控、語言表達、互動交流），這只是暫時的，后續(xù)會加倍努力做得更好?？紤]到讓更多的小伙伴對數(shù)據(jù)可視化有個全新的認識，以及感興趣參與動手開發(fā)屬于自己的炫酷作品，小編加班加點趕出這邊文章，希望對大家有所幫助。
主題內(nèi)容從三個方面進行闡述
第一部分：這是什么呢？（What） 第二部分：為什么用這個呢？（Why） 第三部分：如何做更好呢？（How）
What?
數(shù)據(jù)可視化
科普
百度百科
數(shù)據(jù)可視化（Data visualization）是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為，一種以某種概要形式抽提出來的信息，包括相應(yīng)信息單位的各種屬性和變量。
數(shù)據(jù)可視化視頻介紹：https://baikevideo.cdn.bcebos.com/media/mda-O95ntOML8EqV0Umy/913a849554690764f3708ce06c2d15a0.mp4
可視化（Visualization）是利用計算機圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來，再進行交互處理的理論、方法和技術(shù)。
可視化視頻介紹：https://baikevideo.cdn.bcebos.com/media/mda-O95fgdPNjvL51hpe/3fc58c4084f854393b6c2a2320eb4127.mp4
維基百科
數(shù)據(jù)可視化被許多學(xué)科視為與視覺傳達含義相同的現(xiàn)代概念。它涉及到數(shù)據(jù)的可視化表示的創(chuàng)建和研究。為了清晰有效地傳遞信息，數(shù)據(jù)可視化使用統(tǒng)計圖形、圖表、信息圖表和其他工具?？梢允褂命c、線或條對數(shù)字數(shù)據(jù)進行編碼，以便在視覺上傳達定量信息。
可視化是指用于創(chuàng)建圖形、圖像或動畫，以便交流溝通訊息的任何技術(shù)和方法。在歷史上包括洞穴壁畫、埃及象形文字等，如今可視化有不斷擴大的應(yīng)用領(lǐng)域，如科學(xué)教育、工程、互動多媒體、醫(yī)學(xué)等。
定義
數(shù)據(jù)可視化可以增強數(shù)據(jù)的呈現(xiàn)效果，方便用戶以更加直觀的方式觀察數(shù)據(jù)，進而發(fā)現(xiàn)數(shù)據(jù)中隱藏的信息。
目的
借助于圖形化手段，清晰有效地傳達與溝通信息。
前端可視化
利用前端技術(shù)手段，以前端表現(xiàn)層手段展示、處理和分析數(shù)據(jù)。
ECharts
定義
ECharts，Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 端和移動端的絕大部分瀏覽器上，底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。
由百度商業(yè)前端數(shù)據(jù)可視化團隊打造的一款開源可視化工具，目前已捐贈給Apache開源軟件基金會，作為孵化項目。
特性
豐富的可視化類型（統(tǒng)計數(shù)據(jù)可視化、地理數(shù)據(jù)可視化、關(guān)系數(shù)據(jù)可視化） 多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用（二維表、key-value鍵值對） 千萬數(shù)據(jù)的前端展示 移動端優(yōu)化，交互和布局適配，按需打包 跨平臺使用（PC端、移動端、微信小程序） 絢麗的特效 ...
Why?
技術(shù)現(xiàn)狀
現(xiàn)在的數(shù)據(jù)時代，數(shù)據(jù)可視化因為數(shù)據(jù)分析的火熱而變得逐漸火熱起來，但是數(shù)據(jù)可視化并不是一個新的技術(shù)，雖然說數(shù)據(jù)可視化相對于數(shù)據(jù)分析來說相當(dāng)?shù)暮唵?，但是?shù)據(jù)可視化卻是一個重要的技術(shù)。
在國外，其實數(shù)據(jù)可視化已經(jīng)很成熟了，比如說新聞方面，他們借助于數(shù)據(jù)可視化的技術(shù)，使用圖像化來傳播信息，以此來提高自己的影響力。而在我國，數(shù)據(jù)可視化起步的時間較晚一點，比如阿里巴巴的淘寶指數(shù)，通過旗下的電子交易產(chǎn)生的商業(yè)數(shù)據(jù)進行分析和可視化，為買家、賣家和其他第三方提供信息，進行分享。
發(fā)展趨勢
提高從業(yè)者的職業(yè)素養(yǎng)，培養(yǎng)創(chuàng)新型人才，數(shù)據(jù)的客觀性和準(zhǔn)確性對任何企業(yè)來說都是非常重要的，大數(shù)據(jù)分析從業(yè)者面對海量數(shù)據(jù)信息時要準(zhǔn)確的梳理出所需要信息，還需要具備對數(shù)據(jù)信息進行收集、分析及決策的能力。
要共享數(shù)據(jù)，數(shù)據(jù)不是秘密，我們現(xiàn)在的大數(shù)據(jù)時代，人人即是數(shù)據(jù)的生產(chǎn)者，也是信息的接收者，大量復(fù)雜的信息，我們應(yīng)該從這些信息中吸取有用的信息，隨著媒體技術(shù)的發(fā)展，應(yīng)該提供共享數(shù)據(jù)，同事對數(shù)據(jù)進行監(jiān)管，使數(shù)據(jù)得到。
要制作有創(chuàng)新型、個性化的數(shù)據(jù)體驗，大數(shù)據(jù)時代不應(yīng)該停留在傳統(tǒng)的模式上，應(yīng)該采取多種模式來滿足不同的用戶，個性化、創(chuàng)新型是未來數(shù)據(jù)可視化的發(fā)展趨勢。
使用好處
更容易被記住
以建設(shè)性方式討論結(jié)果
更好理解運營和結(jié)果之間的連接
How?
基礎(chǔ)知識儲備
HTML（超文本標(biāo)記語言） CSS（層疊樣式表） JavaScript（簡稱：JS，腳本編程語言） ECharts（JS插件）
實現(xiàn)方式
報表類
針對普通使用者
Excel 圖表制作軟件
商業(yè)智能 BI
針對專業(yè)數(shù)據(jù)分析人員，會使用可視化工具軟件。
Microsoft BI Power BI
編碼類
針對程序開發(fā)人員，有一定的編程基礎(chǔ)。
ECharts
優(yōu)勢
國人開發(fā)，文檔全，便于開發(fā)和閱讀文檔 圖表豐富，可以適用各種各樣的功能
劣勢
基于圖形語法的能力不夠靈活性 復(fù)雜關(guān)系型圖表比較難定制
D3
優(yōu)勢
強大的SVG操作能力，可以非常容易的將數(shù)據(jù)映射為SVG屬性 集成了大量數(shù)據(jù)處理、布局算法和計算圖形的工具方法 強大的社區(qū)和豐富的DEMO
劣勢
API太底層，復(fù)用性低，學(xué)習(xí)與使用成本高
HighCharts
優(yōu)勢
使用門檻極低，兼容性好 使用廣泛，非常成熟
劣勢
樣式比較陳舊、圖表難以擴展 商業(yè)上使用需要購買版權(quán)
AntV
模塊
底層繪圖引擎 G 可視化語法類庫 G2（靈活的圖形語法） 關(guān)系可視化類庫 G6 移動端圖表類庫 F2 可視化設(shè)計指引與使用規(guī)范
優(yōu)勢
簡單、易用 完備的可視化編碼 強大的擴展能力
劣勢
語法需要一定學(xué)習(xí)成本
ECharts 基本使用
快速上手五部曲
引入 echarts.js 文件 準(zhǔn)備一個呈現(xiàn)圖表的盒子 基于 DOM 容器，初始化 echarts 實例對象 指定配置項和數(shù)據(jù) 將配置項設(shè)置給 echarts 實例對象
基礎(chǔ)配置
首先 ECharts 的圖形化呈現(xiàn)主要是通過配置方法來實現(xiàn)的 setOption，然后是對圖形標(biāo)簽進行初始化，最后把配置方法 setOption 賦值到初始化圖形中，詳細的配置文件請戳這里 https://echarts.apache.org/zh/option.html#title
編程實操
HTML基本模板
"en">
?"utf-8">
????"X-UA-Compatible"?content="IE=edge,chrome=1"/>
?"viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0">
?HTML基本頁面模板
?
?
?
?"main"?style="width:600px;height:450px;"> ?