前言

最近接到一個(gè)新的任務(wù)，說(shuō)是在公司內(nèi)部要組織開展技術(shù)交流分享會(huì)，為了促進(jìn)程序同事間的技術(shù)氛圍，提高大家的學(xué)習(xí)積極性，讓更多的人能參與進(jìn)來(lái)，已納入部門和個(gè)人績(jī)效考核范疇。

形式很簡(jiǎn)單，每周都會(huì)進(jìn)行一次技術(shù)分享。分享人由入職時(shí)間先后順序安排。題材不限，可以是自己熟悉的技術(shù)領(lǐng)域或某個(gè)知識(shí)點(diǎn)，比如區(qū)塊鏈開發(fā)者分享底層公鏈、聯(lián)盟鏈、智能合約等等；服務(wù)端開發(fā)者分享框架與設(shè)計(jì)模式，SQL深度優(yōu)化，消息隊(duì)列等等，前端開發(fā)者分享MVVM模式，WEB前端性能優(yōu)化，數(shù)據(jù)可視化，CSS3高級(jí)用法等等。

可以是一些通用的技術(shù)，比如數(shù)據(jù)結(jié)構(gòu)，算法，代碼規(guī)范，學(xué)習(xí)路線指南，調(diào)試技巧等，甚至可以是看書讀后感（讀書筆記）等等，抑或是最近大家在研究一個(gè)開源的項(xiàng)目，也可以跟大家講講這個(gè)開源項(xiàng)目的架構(gòu)，或許有些人利用業(yè)余時(shí)間做了一個(gè)小工具插件，也可以拿出來(lái)分享。

首次線下分享經(jīng)歷

有圖有真相，感謝同事們的支持與關(guān)注，快來(lái)瞧一瞧??，站在臺(tái)上是不是老帥了。

先簡(jiǎn)單介紹一下自己，我是Jack Chen，一名非常熱愛(ài)學(xué)習(xí)的【高級(jí)Web前端工程師】，從事Web前端工作多年，具有豐富的大中型實(shí)戰(zhàn)項(xiàng)目開發(fā)經(jīng)驗(yàn)。【學(xué)習(xí)與寫作】是目前唯一每天都堅(jiān)持完成的事情，業(yè)余時(shí)間的我，喜歡寫作和分享。我運(yùn)營(yíng)著自己的公眾號(hào)【懶人碼農(nóng)】和有著一群喜歡閱讀我文章的讀者，還能跟著志同道合的伙伴們一起交流學(xué)習(xí)一起進(jìn)步。

個(gè)人博客演示地址：http://106.55.168.13:8888/

小編接到這個(gè)任務(wù)后，第一反應(yīng)是自己覺(jué)得沒(méi)啥壓力，反而更加有動(dòng)力，想著怎么去做好這次技術(shù)分享會(huì)。還主動(dòng)提出作為2021新年第一場(chǎng)技術(shù)分享者，也是首次嘗試線下交流分享會(huì)。

分享幾點(diǎn)收獲

• 做技術(shù)分享，最大的受益者在分享者身上。在分享的準(zhǔn)備和過(guò)程中，訓(xùn)練了寫作能力，組織能力，演講能力，和資料整理能力。再面向自己的同事陳述一遍，分享的資料才會(huì)真正變成自己的東西。
• 學(xué)會(huì)制作PPT演講稿或畫思維導(dǎo)圖（文末下載）
• 通過(guò)分享會(huì)，讓更多的人參與進(jìn)來(lái)，大家互相交流和探討技術(shù)，可以互相提高，結(jié)識(shí)更多大牛。

此次分享自我感覺(jué)還不錯(cuò)，獲得了一大波粉絲的支持與關(guān)注，雖然自己還有很多不足（比如：時(shí)間管控、語(yǔ)言表達(dá)、互動(dòng)交流），這只是暫時(shí)的，后續(xù)會(huì)加倍努力做得更好?？紤]到讓更多的小伙伴對(duì)數(shù)據(jù)可視化有個(gè)全新的認(rèn)識(shí)，以及感興趣參與動(dòng)手開發(fā)屬于自己的炫酷作品，小編加班加點(diǎn)趕出這邊文章，希望對(duì)大家有所幫助。

主題內(nèi)容從三個(gè)方面進(jìn)行闡述

• 第一部分：這是什么呢？（What）
• 第二部分：為什么用這個(gè)呢？（Why）
• 第三部分：如何做更好呢？（How）

What?

數(shù)據(jù)可視化

科普

百度百科

數(shù)據(jù)可視化（Data visualization）是關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種數(shù)據(jù)的視覺(jué)表現(xiàn)形式被定義為，一種以某種概要形式抽提出來(lái)的信息，包括相應(yīng)信息單位的各種屬性和變量。

數(shù)據(jù)可視化視頻介紹：https://baikevideo.cdn.bcebos.com/media/mda-O95ntOML8EqV0Umy/913a849554690764f3708ce06c2d15a0.mp4

可視化（Visualization）是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來(lái)，再進(jìn)行交互處理的理論、方法和技術(shù)。

可視化視頻介紹：https://baikevideo.cdn.bcebos.com/media/mda-O95fgdPNjvL51hpe/3fc58c4084f854393b6c2a2320eb4127.mp4

維基百科

數(shù)據(jù)可視化被許多學(xué)科視為與視覺(jué)傳達(dá)含義相同的現(xiàn)代概念。它涉及到數(shù)據(jù)的可視化表示的創(chuàng)建和研究。為了清晰有效地傳遞信息，數(shù)據(jù)可視化使用統(tǒng)計(jì)圖形、圖表、信息圖表和其他工具。可以使用點(diǎn)、線或條對(duì)數(shù)字?jǐn)?shù)據(jù)進(jìn)行編碼，以便在視覺(jué)上傳達(dá)定量信息。

可視化是指用于創(chuàng)建圖形、圖像或動(dòng)畫，以便交流溝通訊息的任何技術(shù)和方法。在歷史上包括洞穴壁畫、埃及象形文字等，如今可視化有不斷擴(kuò)大的應(yīng)用領(lǐng)域，如科學(xué)教育、工程、互動(dòng)多媒體、醫(yī)學(xué)等。

定義

數(shù)據(jù)可視化可以增強(qiáng)數(shù)據(jù)的呈現(xiàn)效果，方便用戶以更加直觀的方式觀察數(shù)據(jù)，進(jìn)而發(fā)現(xiàn)數(shù)據(jù)中隱藏的信息。

目的

借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。

前端可視化

利用前端技術(shù)手段，以前端表現(xiàn)層手段展示、處理和分析數(shù)據(jù)。

ECharts

定義

ECharts，Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢的運(yùn)行在 PC 端和移動(dòng)端的絕大部分瀏覽器上，底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

由百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)打造的一款開源可視化工具，目前已捐贈(zèng)給Apache開源軟件基金會(huì)，作為孵化項(xiàng)目。

特性

• 豐富的可視化類型（統(tǒng)計(jì)數(shù)據(jù)可視化、地理數(shù)據(jù)可視化、關(guān)系數(shù)據(jù)可視化）
• 多種數(shù)據(jù)格式無(wú)需轉(zhuǎn)換直接使用（二維表、key-value鍵值對(duì)）
• 千萬(wàn)數(shù)據(jù)的前端展示
• 移動(dòng)端優(yōu)化，交互和布局適配，按需打包
• 跨平臺(tái)使用（PC端、移動(dòng)端、微信小程序）
• 絢麗的特效
• ...

Why?

技術(shù)現(xiàn)狀

• 現(xiàn)在的數(shù)據(jù)時(shí)代，數(shù)據(jù)可視化因?yàn)閿?shù)據(jù)分析的火熱而變得逐漸火熱起來(lái)，但是數(shù)據(jù)可視化并不是一個(gè)新的技術(shù)，雖然說(shuō)數(shù)據(jù)可視化相對(duì)于數(shù)據(jù)分析來(lái)說(shuō)相當(dāng)?shù)暮?jiǎn)單，但是數(shù)據(jù)可視化卻是一個(gè)重要的技術(shù)。

• 在國(guó)外，其實(shí)數(shù)據(jù)可視化已經(jīng)很成熟了，比如說(shuō)新聞方面，他們借助于數(shù)據(jù)可視化的技術(shù)，使用圖像化來(lái)傳播信息，以此來(lái)提高自己的影響力。而在我國(guó)，數(shù)據(jù)可視化起步的時(shí)間較晚一點(diǎn)，比如阿里巴巴的淘寶指數(shù)，通過(guò)旗下的電子交易產(chǎn)生的商業(yè)數(shù)據(jù)進(jìn)行分析和可視化，為買家、賣家和其他第三方提供信息，進(jìn)行分享。

發(fā)展趨勢(shì)

• 提高從業(yè)者的職業(yè)素養(yǎng)，培養(yǎng)創(chuàng)新型人才，數(shù)據(jù)的客觀性和準(zhǔn)確性對(duì)任何企業(yè)來(lái)說(shuō)都是非常重要的，大數(shù)據(jù)分析從業(yè)者面對(duì)海量數(shù)據(jù)信息時(shí)要準(zhǔn)確的梳理出所需要信息，還需要具備對(duì)數(shù)據(jù)信息進(jìn)行收集、分析及決策的能力。

• 要共享數(shù)據(jù)，數(shù)據(jù)不是秘密，我們現(xiàn)在的大數(shù)據(jù)時(shí)代，人人即是數(shù)據(jù)的生產(chǎn)者，也是信息的接收者，大量復(fù)雜的信息，我們應(yīng)該從這些信息中吸取有用的信息，隨著媒體技術(shù)的發(fā)展，應(yīng)該提供共享數(shù)據(jù)，同事對(duì)數(shù)據(jù)進(jìn)行監(jiān)管，使數(shù)據(jù)得到。

• 要制作有創(chuàng)新型、個(gè)性化的數(shù)據(jù)體驗(yàn)，大數(shù)據(jù)時(shí)代不應(yīng)該停留在傳統(tǒng)的模式上，應(yīng)該采取多種模式來(lái)滿足不同的用戶，個(gè)性化、創(chuàng)新型是未來(lái)數(shù)據(jù)可視化的發(fā)展趨勢(shì)。

使用好處

• 更容易被記住

• 以建設(shè)性方式討論結(jié)果

• 更好理解運(yùn)營(yíng)和結(jié)果之間的連接

How?

基礎(chǔ)知識(shí)儲(chǔ)備

• HTML（超文本標(biāo)記語(yǔ)言）
• CSS（層疊樣式表）
• JavaScript（簡(jiǎn)稱：JS，腳本編程語(yǔ)言）
• ECharts（JS插件）

實(shí)現(xiàn)方式

報(bào)表類

針對(duì)普通使用者

Excel 圖表制作軟件

商業(yè)智能 BI

針對(duì)專業(yè)數(shù)據(jù)分析人員，會(huì)使用可視化工具軟件。

• Microsoft BI
• Power BI

編碼類

針對(duì)程序開發(fā)人員，有一定的編程基礎(chǔ)。

ECharts

優(yōu)勢(shì)

• 國(guó)人開發(fā)，文檔全，便于開發(fā)和閱讀文檔
• 圖表豐富，可以適用各種各樣的功能

劣勢(shì)

• 基于圖形語(yǔ)法的能力不夠靈活性
• 復(fù)雜關(guān)系型圖表比較難定制

D3

優(yōu)勢(shì)

• 強(qiáng)大的SVG操作能力，可以非常容易的將數(shù)據(jù)映射為SVG屬性
• 集成了大量數(shù)據(jù)處理、布局算法和計(jì)算圖形的工具方法
• 強(qiáng)大的社區(qū)和豐富的DEMO

劣勢(shì)

• API太底層，復(fù)用性低，學(xué)習(xí)與使用成本高

HighCharts

優(yōu)勢(shì)

• 使用門檻極低，兼容性好
• 使用廣泛，非常成熟

劣勢(shì)

• 樣式比較陳舊、圖表難以擴(kuò)展
• 商業(yè)上使用需要購(gòu)買版權(quán)

AntV

模塊

• 底層繪圖引擎 G
• 可視化語(yǔ)法類庫(kù) G2（靈活的圖形語(yǔ)法）
• 關(guān)系可視化類庫(kù) G6
• 移動(dòng)端圖表類庫(kù) F2
• 可視化設(shè)計(jì)指引與使用規(guī)范

優(yōu)勢(shì)

• 簡(jiǎn)單、易用
• 完備的可視化編碼
• 強(qiáng)大的擴(kuò)展能力

劣勢(shì)

• 語(yǔ)法需要一定學(xué)習(xí)成本

ECharts 基本使用

快速上手五部曲

• 引入 echarts.js 文件
• 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子
• 基于 DOM 容器，初始化 echarts 實(shí)例對(duì)象
• 指定配置項(xiàng)和數(shù)據(jù)
• 將配置項(xiàng)設(shè)置給 echarts 實(shí)例對(duì)象

基礎(chǔ)配置

首先 ECharts 的圖形化呈現(xiàn)主要是通過(guò)配置方法來(lái)實(shí)現(xiàn)的 setOption，然后是對(duì)圖形標(biāo)簽進(jìn)行初始化，最后把配置方法 setOption 賦值到初始化圖形中，詳細(xì)的配置文件請(qǐng)戳這里 https://echarts.apache.org/zh/option.html#title

編程實(shí)操

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">
?


?
?
?
?"main"?style="width:600px;height:450px;">