今天給各位分享數(shù)據(jù)可視化項(xiàng)目設(shè)計(jì)實(shí)訓(xùn)的知識(shí)，其中也會(huì)對(duì)數(shù)據(jù)可視化項(xiàng)目策劃書(shū)進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、智慧小區(qū)安全防護(hù)系統(tǒng)實(shí)訓(xùn)——數(shù)據(jù)可視化
• 2、數(shù)據(jù)可視化的設(shè)計(jì)步驟有哪些?
• 3、數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)
• 4、在Vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)可視化操作

智慧小區(qū)安全防護(hù)系統(tǒng)實(shí)訓(xùn)——數(shù)據(jù)可視化

1、智慧小區(qū)安全防護(hù)系統(tǒng)的可視化展現(xiàn)；

1 物聯(lián)網(wǎng)云平臺(tái)可視化組件配置運(yùn)用

可視化能力是 OneNET 平臺(tái)重點(diǎn)打造的基于物聯(lián)網(wǎng)設(shè)備大數(shù)據(jù)的增值服務(wù)能力，可以從平臺(tái)全部產(chǎn)

品服務(wù)的菜單列表中，點(diǎn)擊”數(shù)據(jù)可視化 view“菜單后，點(diǎn)擊“立即試用”按鈕進(jìn)入。

首先新增一個(gè)可視化項(xiàng)目，在彈出的模板選擇頁(yè)面，選擇一個(gè) 2D 項(xiàng)目模板下的“空白模板”作為本

次項(xiàng)目可視化的基礎(chǔ)模板，填寫(xiě)位于右側(cè)的項(xiàng)目名稱(chēng)、項(xiàng)目描述后，點(diǎn)擊“確定”完成可視化項(xiàng)目創(chuàng)建。

點(diǎn)擊左側(cè)菜單“數(shù)據(jù)管理”下“數(shù)據(jù)源模板”子菜單，右側(cè)頁(yè)面中，點(diǎn)擊“創(chuàng)建數(shù)據(jù)源模板”，預(yù)先

為界面展示距離的變化圖表建立一個(gè)數(shù)據(jù)來(lái)源模板。

在展開(kāi)的配置項(xiàng)中，先設(shè)定第一項(xiàng)的“數(shù)據(jù)類(lèi)型” 為“OneNET Studio”，這時(shí)頁(yè)面會(huì)切換為配置從

“OneNET Studio”抓取數(shù)據(jù)所需的必要信息。依次

填寫(xiě)帶“*”的所有項(xiàng)。（以其中一個(gè)為例）

回到可視化項(xiàng)目列表展示頁(yè)面，點(diǎn)擊已創(chuàng)建好可視化項(xiàng)目縮略圖下方的“編輯”按鈕，進(jìn)入頁(yè)面編輯狀態(tài)，如果是采用已有模板，則需將頁(yè)面多余的控件加以刪除，保留背景等基礎(chǔ)效果，如果是空白模板，則直接添加本次實(shí)訓(xùn)所需的控件：常規(guī)圖表中的平滑折線圖。

保持折線圖處于選擇狀態(tài)（可再次雙擊折線圖，右側(cè)出現(xiàn)屬性修改頁(yè)），現(xiàn)在切換到“數(shù)據(jù)”屬性 Tab頁(yè)。選擇“數(shù)據(jù)綁定方式”為“數(shù)據(jù)源”，此時(shí)“數(shù)據(jù)源選擇”下拉列表為“請(qǐng)選擇”狀態(tài)，點(diǎn)擊“管理數(shù)據(jù)源”按鈕，彈出“數(shù)據(jù)源管理”頁(yè)面。

[圖片上傳中...(屏幕截圖 2022-04-15 114906.png-675493-1650179797124-0)]

點(diǎn)擊 “使用數(shù)據(jù)過(guò)濾器”前面的勾選框，去掉勾選，即不使用數(shù)據(jù)過(guò)濾器。

實(shí)驗(yàn)后，可以實(shí)現(xiàn)基礎(chǔ)的OneNETStudio 可視化輸出，可以將數(shù)據(jù)通過(guò)onenet平臺(tái)可視化數(shù)據(jù)，可以更加直觀的獲取數(shù)據(jù)。

數(shù)據(jù)可視化的設(shè)計(jì)步驟有哪些?

1、需求分析

需求分析是大數(shù)據(jù)可視化項(xiàng)目開(kāi)展的前提，要描述項(xiàng)目背景與目的、業(yè)務(wù)目標(biāo)、業(yè)務(wù)范圍、業(yè)務(wù)需求和功能需求等內(nèi)容，明確實(shí)施單位對(duì)可視化的期望和需求。包括需要分析的主題、各主題可能查看的角度、需要發(fā)泄企業(yè)各方面的規(guī)律、用戶的需求等內(nèi)容。

2、建設(shè)數(shù)據(jù)倉(cāng)庫(kù)/數(shù)據(jù)集市的模型

數(shù)據(jù)倉(cāng)庫(kù)/數(shù)據(jù)集市的模型是在需求分析的基礎(chǔ)上建立起來(lái)的。數(shù)據(jù)倉(cāng)庫(kù)/數(shù)據(jù)集市建模除了數(shù)據(jù)庫(kù)的ER建模和關(guān)系建模，還包括專(zhuān)門(mén)針對(duì)數(shù)據(jù)倉(cāng)庫(kù)的維度建模技術(shù)。

3、數(shù)據(jù)抽取、清洗、轉(zhuǎn)換、加載(ETL)

數(shù)據(jù)抽取是指將數(shù)據(jù)倉(cāng)庫(kù)/集市需要的數(shù)據(jù)從各個(gè)業(yè)務(wù)系統(tǒng)中抽離出來(lái)，因?yàn)槊總€(gè)業(yè)務(wù)系統(tǒng)的數(shù)據(jù)質(zhì)量不同，所以要對(duì)每個(gè)數(shù)據(jù)源建立不同的抽取程序，每個(gè)數(shù)據(jù)抽取流程都需要使用接口將元數(shù)據(jù)傳送到清洗和轉(zhuǎn)換階段。

4、建立可視化場(chǎng)景

建立可視化場(chǎng)景是對(duì)數(shù)據(jù)倉(cāng)庫(kù)/集市中的數(shù)據(jù)進(jìn)行分析處理的成果，用戶能夠借此從多個(gè)角度查看企業(yè)/單位的運(yùn)營(yíng)狀況，按照不同的主題和方式探查企業(yè)/單位業(yè)務(wù)內(nèi)容的核心數(shù)據(jù)，從而作出更精準(zhǔn)的預(yù)測(cè)和判斷。

數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)

數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)

總結(jié)是對(duì)某一階段的工作、學(xué)習(xí)或思想中的經(jīng)驗(yàn)或情況進(jìn)行分析研究的書(shū)面材料，它能使我們及時(shí)找出錯(cuò)誤并改正，讓我們一起認(rèn)真地寫(xiě)一份總結(jié)吧。總結(jié)怎么寫(xiě)才不會(huì)千篇一律呢？下面是我精心整理的數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)，僅供參考，希望能夠幫助到大家。

數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)1

數(shù)據(jù)可視化是指將數(shù)據(jù)間的關(guān)系利用圖表直觀地展示出來(lái)。通過(guò)數(shù)據(jù)可視化將大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。

一、數(shù)據(jù)分析可視化常用的圖表類(lèi)型有如下幾種：

1、表格

2、散點(diǎn)圖

3、折線圖

4、柱狀圖

5、條形圖

二、可視化分析

2.1想分析購(gòu)買(mǎi)數(shù)量前10名的用戶是否是回頭客還是客單量大？

對(duì)該項(xiàng)分析使用 表格 分析，按購(gòu)買(mǎi)數(shù)量排名前10的用戶根據(jù)購(gòu)買(mǎi)日期的次數(shù)分析：都是一次性購(gòu)買(mǎi)，并非回頭客用戶，企業(yè)應(yīng)該想辦法維護(hù)這些大客戶群。

2.2 根據(jù)2.1分析結(jié)果繼而想到那些回頭客購(gòu)買(mǎi)力度怎么樣呢？從而再次對(duì)后買(mǎi)日期統(tǒng)計(jì)，分析購(gòu)買(mǎi)次數(shù)多的用戶：得出本次共分析29944個(gè)用戶，回頭客只有25個(gè)，占比0.083%；其中只有1名用戶是購(gòu)買(mǎi)4次的， 其余24名用戶只購(gòu)買(mǎi)2次。商家需要拉些回頭客，考慮是否質(zhì)量過(guò)關(guān)，是否活動(dòng)力度不夠？

使用一個(gè)餅狀圖更直接看出回頭客比重之小

2.3 根據(jù)商品種類(lèi)cat_id統(tǒng)計(jì)出銷(xiāo)量前10名的商品種類(lèi)，使用條形圖做了可視化分析：

2.4 對(duì)20xx年和20xx年總銷(xiāo)量分別按照月度和按照季度做 折線圖 可視化分析，很明了看出銷(xiāo)售變化趨勢(shì)如下；11月度銷(xiāo)量最高，第四季度銷(xiāo)量最高。

2.5 分析表2數(shù)據(jù)，想知道哪個(gè)年齡段的兒童服裝銷(xiāo)量比較高？如下分別用 柱形圖 和 散點(diǎn)圖 進(jìn)行可視化圖表分析（感覺(jué)點(diǎn)狀圖效果稍好一些），可以看出相同年齡段的男女生銷(xiāo)量走勢(shì)是一致的，且隨著年齡增長(zhǎng)銷(xiāo)量呈下降趨勢(shì)。

若以3歲為一個(gè)階段，0—3歲為嬰兒期間的銷(xiāo)量最高，淘寶和天貓市場(chǎng)需求量大。

三、作為數(shù)據(jù)分析職責(zé)的思想總結(jié)

在此總結(jié)下兩篇初步學(xué)習(xí)數(shù)據(jù)分析的心得：數(shù)據(jù)分析首先要掌握常用的數(shù)據(jù)分析方法，數(shù)據(jù)分析工具，然后再根據(jù)自己公司的產(chǎn)品調(diào)整，靈活組合。接下來(lái)我要系統(tǒng)學(xué)習(xí)數(shù)據(jù)分析知識(shí)。數(shù)據(jù)分析師是一個(gè)實(shí)踐的職位，要在實(shí)際項(xiàng)目中不斷的訓(xùn)練，才能成為高手。

作為數(shù)據(jù)分析師我認(rèn)為的主要職責(zé)是要將業(yè)務(wù)數(shù)據(jù)清晰、準(zhǔn)確、明了的呈現(xiàn)給數(shù)據(jù)使用者和決策者，比如預(yù)測(cè)用戶的流失，對(duì)用戶進(jìn)行自動(dòng)分類(lèi)等。你能提供的價(jià)值大了。決策者和管理者能夠根據(jù)呈現(xiàn)的數(shù)據(jù)結(jié)果及時(shí)合理調(diào)整業(yè)務(wù)活動(dòng)，以使企業(yè)得到利潤(rùn)最大化。

數(shù)據(jù)可視化實(shí)訓(xùn)總結(jié)2

一、數(shù)據(jù)可視化的定義

數(shù)據(jù)可視化（Data Visualization）是涉及信息技術(shù)、自然科學(xué)、統(tǒng)計(jì)分析、圖形學(xué)、交互、地理信息等多種學(xué)科交叉領(lǐng)域，通過(guò)將非數(shù)字的信息進(jìn)行可視化以表現(xiàn)抽象或復(fù)雜的概念和信息的技術(shù)。簡(jiǎn)單的說(shuō)，這種技術(shù)將數(shù)據(jù)以圖表的方式呈現(xiàn)，用以傳遞信息。人類(lèi)有五官，能通過(guò)5種渠道感受這個(gè)物質(zhì)世界，那么為什么單單要青睞可視化的方式來(lái)傳遞信息呢？這是因?yàn)槿祟?lèi)利用視覺(jué)獲取的信息量巨大，人眼結(jié)合大腦構(gòu)成了一臺(tái)高帶寬巨量視覺(jué)信號(hào)輸入的并行處理器，具有超強(qiáng)模式識(shí)別能力，有超過(guò)50%功能用于視覺(jué)感知相關(guān)處理的大腦，大量視覺(jué)信息在潛意識(shí)階段就被處理完成，人類(lèi)對(duì)圖像的處理速度比文本快6萬(wàn)倍，所以數(shù)據(jù)可視化是一種高帶寬的信息交流方式。

如果我們的視野再開(kāi)闊些，數(shù)據(jù)可視化從廣義上來(lái)說(shuō)包含了三個(gè)分支：科學(xué)可視化（Scientific Visualization），信息可視化（Information Visualization）和可視分析學(xué)（Visual Analytics）?？茖W(xué)可視化是跨學(xué)科研究與應(yīng)用領(lǐng)域，關(guān)注三維現(xiàn)象的可視化，在建筑學(xué)、氣象學(xué)、醫(yī)學(xué)或生物學(xué)方面的各種系統(tǒng)中有廣泛的應(yīng)用，這個(gè)領(lǐng)域研究的數(shù)據(jù)具有天然幾何結(jié)構(gòu)（如磁感線、流體分布等）。

scientific_data_viz。png

信息可視化則研究抽象數(shù)據(jù)的交互式視覺(jué)表示以加強(qiáng)人類(lèi)認(rèn)知。抽象數(shù)據(jù)包括數(shù)字和非數(shù)字?jǐn)?shù)據(jù)，如地理信息與文本，這個(gè)領(lǐng)域研究的數(shù)據(jù)具有抽象的結(jié)構(gòu)，比如柱狀圖，趨勢(shì)圖，流程圖和樹(shù)狀圖，這些圖表將抽象的概念轉(zhuǎn)化成為可視化信息，常常以數(shù)據(jù)面板的形式體現(xiàn)。

info_data_viz。png

可視分析學(xué)結(jié)合了交互式視覺(jué)表示以及基礎(chǔ)分析過(guò)程（統(tǒng)計(jì)過(guò)程、數(shù)據(jù)挖掘技術(shù)），執(zhí)行高級(jí)別、復(fù)雜的活動(dòng)（推理、決策）。

viz_analysis。png

二、在數(shù)據(jù)科學(xué)全過(guò)程中的位置

數(shù)據(jù)科學(xué)的主要組成部分包含三個(gè)大的階段：數(shù)據(jù)整理，探索性數(shù)據(jù)分析和數(shù)據(jù)可視化。站在一個(gè)更高的位置來(lái)看，數(shù)據(jù)可視化在數(shù)據(jù)科學(xué)中的位置是比較靠后的，是屬于最后的成果展示階段。如果要從頭說(shuō)起的話，首先，在數(shù)據(jù)整理階段，我們的主要任務(wù)是數(shù)據(jù)的獲取和解析，包括一系列對(duì)原始數(shù)據(jù)的清洗和加工工作，這一塊的知識(shí)領(lǐng)域主要涉及計(jì)算機(jī)科學(xué)。緊接著是探索性數(shù)據(jù)分析階段，這個(gè)階段要大量使用統(tǒng)計(jì)和數(shù)據(jù)挖掘方面的專(zhuān)業(yè)知識(shí)，也需要繪制圖表來(lái)解釋數(shù)據(jù)和探索數(shù)據(jù)，這個(gè)階段的主要任務(wù)是過(guò)濾和挖掘。但這個(gè)階段的可視化分析只是你和數(shù)據(jù)之間的“對(duì)話”，是數(shù)據(jù)想要告訴你什么，而數(shù)據(jù)可視化則是數(shù)據(jù)和你的讀者之間的對(duì)話，是你通過(guò)數(shù)據(jù)想要告訴讀者什么，這是它們之間最大的區(qū)別。完成了上面兩個(gè)階段的內(nèi)容，才到了我們最后的數(shù)據(jù)可視化階段，這是一個(gè)多學(xué)科交叉的領(lǐng)域，涉及到圖形設(shè)計(jì)，信息可視化和人機(jī)交互，我們的主要任務(wù)是對(duì)信息進(jìn)行精煉，然后通過(guò)可視化表示出來(lái)，并與讀者產(chǎn)生交互。然而，如果將數(shù)據(jù)科學(xué)的這三個(gè)階段理解為按嚴(yán)格順序進(jìn)行的“線性”的模型那就大錯(cuò)特錯(cuò)了，它經(jīng)歷的是一個(gè)迭代的，非線性的過(guò)程。后面的步驟會(huì)讓你更了解之前所做的工作，可能到了數(shù)據(jù)可視化階段，才意識(shí)到還有太多疑點(diǎn)要弄明白，我們需要回到上一步重新進(jìn)行之前的工作，就像畫(huà)家翻來(lái)覆去才能最終完成一幅杰作一樣，數(shù)據(jù)可視化的過(guò)程并不是給數(shù)據(jù)分析這個(gè)剛出爐的蛋糕加點(diǎn)糖霜，，而是有一個(gè)反復(fù)迭代，不斷優(yōu)化的過(guò)程。

三、數(shù)據(jù)可視化的技術(shù)棧

數(shù)據(jù)可視化是一個(gè)再典型不過(guò)的多學(xué)科交叉領(lǐng)域了，可以說(shuō)數(shù)據(jù)可視化所需要用到的知識(shí)，就是數(shù)據(jù)科學(xué)龐大知識(shí)體系的一個(gè)剪影。你會(huì)感受到數(shù)據(jù)科學(xué)理性的.一面，同樣也會(huì)感受到她感性的一面。你可以窮盡自己的一生，在這個(gè)浩如煙海的領(lǐng)域中盡情的探索，常學(xué)常新，其樂(lè)無(wú)窮。

四、數(shù)據(jù)可視化過(guò)程

數(shù)據(jù)可視化的本質(zhì)，是充分理解業(yè)務(wù)的基礎(chǔ)上對(duì)數(shù)據(jù)進(jìn)行深入分析和挖掘，然后將探索數(shù)據(jù)所得到的信息和知識(shí)以可視化的形式展現(xiàn)出來(lái)。也就是說(shuō)我們做的工作其實(shí)就是從數(shù)據(jù)空間映射到圖形空間。我們要做的第一步工作是充分的結(jié)合業(yè)務(wù)理解數(shù)據(jù)，然后采用某些方法選擇合適的圖表類(lèi)型，這又要求我們先對(duì)圖表類(lèi)型有個(gè)比較全面的了解。繪制完圖表是不是就完成了呢？其實(shí)不是。我們還要對(duì)圖表進(jìn)行優(yōu)化，優(yōu)化所針對(duì)的對(duì)象是各種圖表元素，對(duì)此我們有一系列的設(shè)計(jì)技巧，下面將一步一步的來(lái)介紹這些知識(shí)。

4.1 結(jié)合業(yè)務(wù)理解數(shù)據(jù)

離開(kāi)對(duì)業(yè)務(wù)的理解談數(shù)據(jù)分析都是耍流氓。這里介紹一種快速了解數(shù)據(jù)與業(yè)務(wù)以開(kāi)展進(jìn)一步的探索與分析的方法，叫“5W2H法”。

步驟一：WHAT，這是關(guān)于什么業(yè)務(wù)的什么事？數(shù)據(jù)所描述的業(yè)務(wù)主題是什么？

步驟二：HOW，即如何采集的數(shù)據(jù)？采集規(guī)則會(huì)影響后續(xù)分析，比如如果是后端數(shù)據(jù)埋點(diǎn)，那么數(shù)據(jù)一般是實(shí)時(shí)的；而如果是前端數(shù)據(jù)埋點(diǎn)，那么就要進(jìn)一步弄清楚數(shù)據(jù)在什么網(wǎng)絡(luò)狀態(tài)會(huì)上傳？無(wú)網(wǎng)絡(luò)狀態(tài)下是如何處理的？這些都會(huì)影響最后數(shù)據(jù)的質(zhì)量進(jìn)而影響分析質(zhì)量。

步驟三：WHY，為什么搜集此數(shù)據(jù)？我們想從數(shù)據(jù)中了解什么？數(shù)據(jù)分析的目標(biāo)是什么？

步驟四：WHEN，是何時(shí)段內(nèi)的業(yè)務(wù)數(shù)據(jù)？

步驟五：WHERE，是何地域范圍內(nèi)的業(yè)務(wù)數(shù)據(jù)？

步驟六：WHO，誰(shuí)搜集了數(shù)據(jù)（Who）？在企業(yè)內(nèi)可能更關(guān)注是來(lái)自哪個(gè)業(yè)務(wù)系統(tǒng)。

步驟七：HOW MUCH，各種數(shù)據(jù)有多大的量，足夠支持分析嗎？數(shù)據(jù)充足和不足的情況下，分析方法是有所不同的。如果七個(gè)問(wèn)題中有一個(gè)答復(fù)不能令人滿意，則表示這方面有改進(jìn)余地。

4.2 選擇圖表類(lèi)型

用簡(jiǎn)單的三個(gè)步驟就可以選擇合適的圖表類(lèi)型：一看數(shù)據(jù)類(lèi)型，二看數(shù)據(jù)維度，三看要表達(dá)的內(nèi)容。

我們有兩種數(shù)據(jù)類(lèi)型，每種數(shù)據(jù)類(lèi)型又有兩個(gè)子類(lèi)別。首先，我們有分類(lèi)數(shù)據(jù)和定量數(shù)據(jù)。分類(lèi)數(shù)據(jù)用來(lái)表示類(lèi)別，比如蘋(píng)果，香蕉，梨子和葡萄，就是水果的4種類(lèi)別，稱(chēng)為分類(lèi)定類(lèi)；有的分類(lèi)變量是有一定順序的，比如可以把紅酒的品質(zhì)分為低，中，高三檔，人的身材有偏瘦，正常和肥胖等等，這種特殊的分類(lèi)變量稱(chēng)為分類(lèi)定序。定量數(shù)據(jù)也可以進(jìn)一步分為兩類(lèi)，一類(lèi)叫連續(xù)值數(shù)據(jù)，比如人的年齡；一類(lèi)叫離散值數(shù)據(jù)，比如貓咪的數(shù)量。

在Vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)可視化操作

????????話說(shuō)最近一直在攻在網(wǎng)上花二十塊大洋買(mǎi)的vue音樂(lè)播放器項(xiàng)目，收獲頗多！對(duì)vue項(xiàng)目整體的流程有了更進(jìn)一步的了解，打算花點(diǎn)空余時(shí)間把這個(gè)項(xiàng)目再擼幾遍，然后轉(zhuǎn)入京東的項(xiàng)目實(shí)戰(zhàn)中。。。

? ????? 實(shí)際工作中一直涉及的是數(shù)據(jù)可視化操作（Echarts、Highcharts），即大量數(shù)據(jù)圖表展示，卻獨(dú)獨(dú)沒(méi)有用到丁點(diǎn)兒的vue知識(shí)，感覺(jué)實(shí)在是讓人憋得心慌，晚上沒(méi)事干脆試驗(yàn)一把，如題：在Vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)可視化操作

Echarts ?步驟：

一、安裝插件

? ? ? ? cnpm install echarts -D

注：echarts 也不能通過(guò) Vue.use() 進(jìn)行全局調(diào)用

所以，通常在需要使用圖表的 .vue文件中直接引入

import echarts from 'echarts'

也可以在main.js中引入，然后修改原型鏈

Vue.prototype.$echarts = echarts

這樣在全局中就可以直接使用了

let mychart = this.$echarts.init(document.getElementById('mychart'))

二、創(chuàng)建圖表

? ? ? ? 由于一般情況我們會(huì)在組件中使用，這里我也貼近實(shí)際開(kāi)發(fā)，舉的例子就是應(yīng)用于組件中

數(shù)據(jù)導(dǎo)入

這樣圖表就可以在頁(yè)面中展示出來(lái)了

問(wèn)題：這里引入的 echarts 包含了所有圖表，但有時(shí)候我們只需要一兩個(gè)基本圖表，這時(shí)候完整的 echarts 就顯得累贅，所以：

二、按需引入

? ??// 引入基本模板letecharts = require('echarts/lib/echarts')

? // 引入餅圖組件require('echarts/lib/chart/pie')

? // 引入提示框和圖例組件require('echarts/lib/component/tooltip')

? require('echarts/lib/component/legend')

可以按需引入的模塊列表見(jiàn)

繼續(xù)引出問(wèn)題：在echarts中圖表寬高如果不寫(xiě)，那么就相當(dāng)于作死，所以nozuonodie，所以：

三、適應(yīng)容器

let chartBox = document.getElementsByClassName('charts')[0]

let myChart = document.getElementById('myChart')

// 用于使chart自適應(yīng)高度和寬度,通過(guò)窗體高寬計(jì)算容器高寬

function resizeCharts () {

? myChart.style.width = chartBox.style.width + 'px'

? myChart.style.height = chartBox.style.height + 'px'

}

// 設(shè)置容器高寬

resizeCharts()

let mainChart = echarts.init(myChart)

mainChart.setOption(options)

四、擴(kuò)展

可以把這個(gè)案例模塊化，設(shè)計(jì)成一個(gè)可復(fù)用組件，只需傳入id、options既可完成圖表渲染

參考案例：

剛好，參考案例中用的是highcharts

關(guān)于數(shù)據(jù)可視化項(xiàng)目設(shè)計(jì)實(shí)訓(xùn)和數(shù)據(jù)可視化項(xiàng)目策劃書(shū)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。