這篇文章呢，教大家如何使用Echarts實現一個大數據可視化可視面板。有興趣的同學可以進來詳細學習一下。

ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的 Canvas 庫 ZRender。

在我們前端開發中，越來越依靠它，使用它，它能直觀的讓客戶看到他想看到的。ECharts 提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

ECharts有哪些特點?

1. ECharts 屬於開源軟件，並且我們提供了非常炫酷的圖形界面，特色是地圖，另外還提供了柱狀圖、折線圖、餅圖、氣泡圖及四象限圖等；
2. ECharts 使用簡單，在官網中為我們封裝了 JS，只要會引用就會得到完美的展示效果；
3. ECharts 種類多，ECharts 實現簡單，各類圖形都有；
4. 相應的模板，還有豐富的 API 及文檔說明，非常詳細；ECharts 兼容性好，基於HTML5，有著良好的動畫渲染效果。

具體實現

今天的課程我們來實現上述視頻中的大數據可視化展示面板，先給大家看看圖，如下圖：

大數據展示面板

看著確實複雜，其實寫起來更復雜，不過不要怕，既然幹前端了，就得學會，遲早會用上，話不多說，我們一起來看看吧，到底是怎麼實現的。

我們親切的稱為可視化項目

A：需要的技術

• CSS佈局的相關知識點
• jQuery相關知識點
• 掌握echarts的基本使用

B：項目說明

要完成這個項目，看看信息面板，就知道我們的面板佈局肯定離不開DIV+CSS的知識，不過這作為前端肯定沒問題，此外還用到了一些CSS3的知識點，還引入了一些圖表的繪製，以及高級的地圖數據可視化案例，主要用到了一些餅狀圖、柱狀圖、線形圖、地圖等等幾類圖表。

C：技術掌握

• div+css佈局
• flex佈局
• CSS3動畫
• CSS3漸變
• CSS3邊框圖片
• 原生JS+jQuery
• rem適配
• echarts基礎使用
• 後端Json數據接收

D：Echarts基礎使用

1、下載引入（echarts.min.js）引入

2、準備一個具備（寬高的DOM）一般我們以瀏覽器窗口為容器，用jquery直接定義。

<code>
/<code>

3、初始化echarts實例

通過echarts.init實例化一個容器（內部返回），例如：

<code>var myChart = echarts.init(document.getElementById('main'));/<code>

4、指定圖表的配置項和數據（根據文檔提示例找到option），例如：

<code>var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};/<code>

5、使用剛指定的配置項和數據顯示圖表，例如：

<code>myChart.setOption(option);/<code>

E：echarts基礎配置

你想使用那些功能，大家可自行去官方文檔查看，下面我來說說主要的一些圖標功能函數：

title：標題組件，包含主標題和副標題以及標題的一些CSS屬性

legend：圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。

grid：直角座標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。

XAxis：直角座標系 grid 中的 x 軸，一般情況下單個 grid 組件最多隻能放上下兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。

yAxis：直角座標系 grid 中的 y 軸，一般情況下單個 grid 組件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。

polar：極座標系，可以用於散點圖和折線圖。每個極座標系擁有一個角度軸和一個半徑軸。

演示代碼：

<code>var option = {
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '用戶註冊',
        data: [820, 932, 901, 934, 9222, 1330, 1320],
        type: 'line'
    }, {
        name: '用戶數據',
        data: [820, 932, 600, 934, 1290, 1330, 1320],
        type: "bar",
    }], 

    grid: {
        show: true,
        // top : 100
    },
    tooltip: {
        trigger: "axis"
    },
    title: {
        text: '年度統計'
    },
    color: ['red', 'yellow'],
    legend: {
        data: ['用戶註冊', '用戶數據']
    }
};/<code>

F：rem適配

設計稿是1920px ，約定rem基準值為 24px （基準值html的font-size）。

【不同設配等比顯示，例如320和375等設備】

[1024-1920]

那麼：設備寬度與rem基準值比例為 80

結論：適配設備的時候保持80的比例即可。

將來：換算rem單位的時候，使用24px基準值即可。

/*不用媒體查詢，需要查詢區間，如果用JS可以實時監控大小*/

頁面初始化，就需要一個基準值：

<code>(function () { 

       // 1、頁面一加載就要知道頁面寬度計算
      var setFont = function () {
           // 因為要定義變量可能和別的變量相互衝突，汙染，所有用自調用函數
           var html = document.documentElement;// 獲取html
           // 獲取寬度
           var width = html.clientWidth;
    
           // 判斷
           if (width < 1024) width = 1024
           if (width > 1920) width = 1920
           // 設置html的基準值
           var fontSize = width / 80 + 'px';
           // 設置給html
           html.style.fontSize = fontSize;
      }
      setFont();
       // 2、頁面改變的時候也需要設置
       // 尺寸改變事件
       window.onresize = function () {
           setFont();
       }
   })();/<code>

注意：書寫CSS代碼，讓px轉換rem單位，使用一個cscode插件 cssrem

• vscode插件搜索cssrem，進行安裝既可
• 需要在設置中cssrem換算的時候使用80的比例

<code>// rem換算

"cssrem.rootFontSize": 24,//【計算時的基準值】
 

"cssrem.fixedDigits":// 3,【取三位小數】

       /<code>

1920設計稿，比例80，基準值24，計算式可能有小數，很多位，保留3為有效小數，不去除0，例如（0.333）；

G：基礎佈局和動畫

整體佈局和局部佈局都是採用flex佈局，跟平常切頁面差不多，效果是採用JS寫的效果，動畫是採用CSS3進行寫的。

因為代碼比較多，放上去不合適，大家可關注私信我，我會挨個發送。

閱讀更多 Web前端進階指南 的文章

關鍵字: jQuery 大數據 可視化技術