令人驚嘆的數據可視化-Echarts

2021-03-06 玖柒知識屋
廢話不多說先上效果圖

看完效果圖，我在給大家詳細的解釋一下我們完成這個圖所需要的具體的操作與技術吧！

應對現在數據可視化的趨勢，越來越多企業需要在很多場景(營銷數據，生產數據，用戶數據)下使用，可視化圖表來展示體現數據，讓數據更加直觀，數據特點更加突出。

01-技術要點

02-案例適配方案

03-頁面主體布局

因為我們今天的主題是echarts部分所以前面的這些，我就為大家寫好框架，裡面的布局相信以大家的能力都是分分鐘解決的事情。

echarts介紹

常見的數據可視化庫：

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和行動裝置上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

echarts體驗

下載echarts https://github.com/apache/incubator-echarts/tree/4.5.0

使用步驟（5大步驟）：
1.引入echarts 插件文件到html頁面中
2.準備一個具備大小的DOM容器

3.初始化echarts實例對象

4.指定配置項和數據(option)

5.將配置項設置給echarts實例對象

echarts基礎配置

這是要求同學們知道以下配置每個模塊的主要作用幹什麼的就可以了

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

    系列列表。每個系列通過 type 決定自己的圖表類型

  數據堆疊，同個類目軸上系列配置相同的stack值後 後一個 系列的值會在前一個系列的值上相加。

1.官網實例

官網默認為我們提供了大量的案例，我們需要使用那一種只需要直接點擊打開後複製他們的相關配置，然後按照我上面說的5大步驟進行使用即可。

2.社區Gallery

官方自帶的圖例，可能在很多時候並不能滿足我們的需要，在社區這裡可以找到一些基於echart的高度定製好的圖表，相當於基於jquery開發的插件，這裡是基於echarts開發的第三方的圖表。

本案例中使用了地圖模擬飛行的案例就是從社區中進行引用的，

實現步驟：

代碼已經上傳至我的碼雲如有需要的小夥伴可自行下載：

https://gitee.com/jiuyueqi/echarts

相關焦點

  • ECharts數據可視化:從0到1的蛻變(內部技術分享總結)
    考慮到讓更多的小夥伴對數據可視化有個全新的認識，以及感興趣參與動手開發屬於自己的炫酷作品，小編加班加點趕出這邊文章，希望對大家有所幫助。主題內容從三個方面進行闡述What?數據可視化科普百度百科數據可視化（Data visualization）是關於數據視覺表現形式的科學技術研究。
  • ECharts 4.8.0 發布,JavaScript 數據可視化圖表庫
    ECharts 4.8.0 已發布，ECharts 是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和行動裝置上，兼容當前絕大部分瀏覽器，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表
  • 推薦收藏｜又帶來了12個炫酷的數據可視化作品含源碼
    之前分享了10個炫酷的數據可視化大屏源碼，反響很大，好多人在後臺回復獲取源碼，這次，我又帶來了12個炫酷的數據可視化大屏源碼，都是從網上收集的，都測試後可以使用，在我電腦（1920X1080解析度下）正常顯示，所以分享給大家
  • Echarts圖表實現後臺數據統計分析
    簡介：ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和行動裝置上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender
  • Echart | 能輔助展示你互動設計思想的數據可視化小工具!
    [編者按語] 因為教《數據可視化》課程的原因，會讓本科生做一些交互可視化的作業與作品，讓研究生做一些研究報告時用得著的交互式可視化的輔助圖形素材
  • ECharts GL 1.0 alpha 發布
    <script data-src="echarts/dist/echarts.min.js"></script> <script data-src="echarts-gl/dist/echarts-gl.min.js"></script>    如果你用 webpack 和 npm 作為開發環境。
  • canvas/數據可視化工具庫匯總
    今天推薦的是：canvas/數據可視化工具庫匯總1：d3star:92.7k官網：https://d3js.org/GitHub地址：https://github.com/mbostock/d3d3 一個基於數據操作文檔的js數據可視化框架，最流行的數據可視化庫之一 2：Chart.js
  • Echarts圖表嵌入ThingJS場景
    ThingJS 是物聯網可視化PaaS開發平臺，幫助物聯網開發商輕鬆集成 3D 可視化界面。ThingJS 基於 HTML5 和 WebGL 技術，可以在ThingJS場景中引入ECharts圖表。THING.Utils.dynamicLoad(['https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js'], function () {var app = new THING.App({ url: 'https://www.thingjs.com
  • antv初識:antv和echarts的對比
    antv是螞蟻金服所提供的一套全新的視圖可視化圖表庫, 與echart雖然都為圖表庫, 但是從實質出發還是存在一定的差異性, echarts是以圖表為主, 而antv則是以圖形出發。echarts相對於antv來說是比較成熟的一套圖表庫, 使用方便、圖表種類多， 也是比較容易上手的, 遇到問題網上的解決方式也有很多，而antv是以數據可視化底層引擎，以數據驅動， 相對於echart更具有拓展性和靈活性。antv針對移動端和PC端有兩套不同的圖表庫， PC端是G2， 移動端是F2。
  • 數據可視化基本套路總結
    文章總結了多種數據可視化圖形，並簡要介紹了各種圖形的作用，能為科研工作者在數據可視化階段提供新的思路，在此分享給大家。可是這是個看臉的世界，大部分人對於數據也都是外行的，只有把數據可視化做得漂亮才能吸引他們的注意；只有把數據可視化做得簡單易懂，他們才能理解數據分析的內涵。對於數據可視化，最重要的東西從來不是圖形、工具、配色這些套路性的東西，而在於創意和靈感。可你又不是參加比賽，並不需要那麼多的創意靈感。
  • 玩轉大數據可視化,推薦幾個必學的工具!
    如今，企業越來越重視數據分析給業務決策帶來的有效應用，而可視化是數據分析結果呈現的重要步驟。而可視化技術/工具在國內國外也發展的相當成熟，很多都已經做成應用（比如可視化圖表庫，BI工具等等），並投入商用。
  • 百度數據可視化實驗室正式成立,發布深度學習可視化平臺 Visual DL
  • 利用Python畫中國地圖,實現各省數據可視化
    第一步：安裝pyecharts pyecharts是一款將python與echarts
  • Axure 教程:利用圖表前端插件實現高級可視化圖表
    如何通過圖標前端插件完成高級可視化圖表？筆者在此給出了詳細教程，與大家分享~~後臺開發中避免不了實現一些可視化的圖表，主要製作的方法有四種：Excel表格截圖、Axure圖形繪製、Axure網頁框架和Axure第三方圖表元件。第三個「Axure網頁框架」需要結合antv、echarts、HighCharts等前端可視化插件代碼。
  • 大數據可視化大屏設計經驗,教給你
    大數據產業正在用一個超乎我們想像的速度蓬勃發展，大數據時代的來臨，越來越多的公司開始意識到數據資源的管理和運用，大數據可視化大屏展示被更多的企業青睞，身為UI設計師的我們，也要緊跟時代的步伐學習這方面的設計。
  • 14款基於javascript的數據可視化工具
    圖形化的信息可以讓人們對數據有更加直觀清晰的理解，讓信息發布者更加高效地展示自己的核心內容。在前端開發中，如果缺少合適工具，製作數據可視化圖表會十分複雜。然而隨著數據可視化概念逐年火熱，有較多優秀的圖表開源庫和製作工具脫穎而出。下面，我們就拿其中比較有名的 14個產品進行簡要介紹。
  • 推薦14 款基於 JavaScript 的數據可視化工具
    圖形化的信息可以讓人們對數據有更加直觀清晰的理解，讓信息發布者更加高效地展示自己的核心內容。在前端開發中，如果缺少合適工具，製作數據可視化圖表會十分複雜。然而隨著數據可視化概念逐年火熱，有較多優秀的圖表開源庫和製作工具脫穎而出。下面，我們就拿其中比較有名的 14個產品進行簡要介紹。
  • Matplotlib數據可視化!
    數據可視化，就是指將結構或非結構數據轉換成適當的可視化圖表，然後將隱藏在數據中的信息直接展現於人們面前。相比傳統的用表格或文檔展現數據的方式，可視化能將數據以更加直觀的方式展現出來，使數據更加客觀、更具說服力。數據可視化已經被用於工作科研的方方面面，如工作報表、科研論文等，成為了不可或缺的基礎技能。現在，就讓我們一起來學習下數據可視化的基礎知識。
  • 用數據可視化的方式做匯報,更容易顯現成績、升職加薪更近一步
    但是，如果你拿給老闆的是這樣一張數據密密麻麻的表格，你覺得老闆能夠在短時間內看懂你的數據嗎？想要讓老闆在短時間內看懂我們想要表達的內容，就需要對表格數據進行可視化操作。俗話說：字不如表，表不如圖。一圖勝千言，通過數據可視化可以直觀的表明我們的態度，也能在老闆面前更好的展示自己。
  • 網際網路服務對接—用 FileMaker 開發數據可視化分析(下)
    今天，我會繼續分享如何通過多個 ECharts 圖表來組建一個 Dashboard 數據可視化儀錶盤。在之前的系統中，有很多非常詳細的表格式報表功能。這些報表大多是提供給運營人員做運營數據核對和統計之用，並沒有充分發揮給管理者提供運營分析的作用。而由多種圖表組成的 Dashboard 則可以讓管理者隨時隨地快速了解企業運營狀況。