前端資料視覺化echarts.js使用指南

阿新 • • 發佈：2019-01-13

一、開篇

首先這裡要感謝一下我的公司，因為公司需求上面的新穎的需求，讓我有幸可以學習到一些好玩有趣的前端技術，前端技術中好玩而且比較實用的我想應該要數前端的資料視覺化這一方面，目前市面上的資料視覺化的框架琳琅滿目，例如：D3.js、hightcharts.js、echarts.js…………。由於公司對這個專案的需求是

1、開發時間短，所以也就限制了D3.js的使用。

2、要儘量的減少開發的成本，所以也就不能使用hightcharts.js(hightcharts是一款個人免費，商業付費的框架)。所以在再三的比對之下最終選擇了echarts.js。

二、echarts.js的優勢與總體情況

echarts.js作為國內的IT三巨頭之一的百度的推出一款相對較為成功的開源專案，總體上來說有這樣的一些優點

1、echarts.js容易使用

echarts.js的官方文件比較詳細，而且官網中提供大量的使用示例供大家使用

2、echarts.js支援按需求打包

echarts.js官網提供了線上構建的工具，可以線上構建專案時，選擇專案所需要使用到的模組，從而達到減小JS檔案的體積

3、echarts.js開源

4、支援中國地圖功能

這個在其他的一些框架中是沒有的，所以為這個功能點個贊

但是echarts.js也存在著一些不好的地方，比如說：

1、echarts.js的體積較大

一個基礎的echarts.js都要400K左右，相對於D3.js和hightcharts.js來說都是比較大的

2、echarts.js的可定製性差

說到echarts.js的定製性差，其實不止是包括echarts.js，hightcharts.js也是如此，因為這一型別的資料視覺化框架主要是高度的進行分裝，所以你在使用的時候只需要設定一下配置就可以了，但是如果是出現了要繪製配置中不支援的圖表怎麼辦，那麼你就只能放棄，嘗試著使用其他的框架了

總的來說:從大的方向上面來看，echarts.js還是值得去了解學習使用的，因為echarts.js得到了百度團隊的重視，在git上面的更新也是比較的頻繁，所以不會出現一些比較嚴重的bug之類的，最後這款框架一點就是框架的配置檔案相當的詳細，但是互動API文件雖然有說明，但是還是沒有示例來舉證，這個可能就是我認為的一個不足之處吧

三、echarts的應用

首先要說明一點是，echarts這個框架的配置內容很是多，所以不要嘗試著把這個框架中的方法都給記住，這是不太可能的事。但是由於這個框架的配置檔案引數比較多，所以我們就需要來學習一下echarts是怎樣來對其進行分類的

1、首先echarts的圖形化呈現主要是通過配置方法來實現的(setOption),然後是對圖形標籤進行初始化，最後把配置方法(setOption)賦值到初始化圖形中，詳細的配置檔案請戳這裡，這裡我就來介紹一下關於配置檔案的學習的經驗之談，比較常見的配置大致如下圖：

上面用紅色方框標出來的就是echarts的基礎配置，也是我認為的學習echarts一定要掌握的配置，其他的一些配置比如什麼時間軸.visualMap元件之類，我認為這些異曲同工，所以這一部分也就是隻有在當你的業務需要使用的時候才加入，也就是說，這一部分的知識我認為到時候現炒現賣就可以了（更正：圖示懸停的提示內容應該更正為滑鼠懸停的提示內容），下面我就來講解一下echarts.js的使用，首先我在官網中下載預設的精簡版，下載地址如下：http://echarts.baidu.com/builder.html，直接下載即可（建議在開發期間使用原始碼版，方便除錯）

3.1 echarts.js入門基礎小專案1

HTML和JavaScript程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script type="text/javascript" src='echarts.js'></script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化圖表標籤
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定義一個標題
        title:{
            text:'測試成績'
        },
        legend:{
            data:['銷量']
        },
        //X軸設定
        xAxis:{
            data:['60分','70分','80分','90分','100分']
        },
        yAxis:{
        },
        //name=legend.data的時候才能顯示圖例
        series:[{
            name:'銷量',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>
</html>


 執行效果如下圖，如果需要線上觀看的請戳這裡

注意事項：這裡案例是最基礎，但是裡面還是有一個知識點來的，就是在使用echarts.js的時候一定要配置xAxis,yAxis,series這三個引數，如果是不想設定的話也要初始化可以將其設定為空JSON就可以了，要不然會出項報錯，同時要保證在echarts.init之前的物件是有寬高的，要不然也會出現錯誤

3.2 echarts.js多系列綜合使用DEMO

在講解這個案例之前，首先我們來假設一個命題，假設要統計一個商店一週的購買金額和一週的銷售金額，其中的購買金額用柱狀圖表示，銷售金額用折線圖表示，然後還要標出一週中最大值和最小值，同時還要求出銷售和購買的平均數，購買金額分別是[200,312,431,241,175,275,369]，銷售金額[321,432,543,376,286,298,400]

這個問題其實也不是很難，想一想，其實也就是一個把多個系列圖表應用到一個畫布上面的過程，為了簡短文章的篇幅，所以把不貼出全部的程式碼，僅貼出主要的其中關鍵的程式碼，程式碼如下：

series:[{
                name:'購買金額',
                type:'bar',
                data:[200,312,431,241,175,275,369],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值',itemStyle:{
                            normal:{
                                color:'green'
                            }
                        }}
                    ]
                }
            },{
                name:'銷售金額',
                type:'line',
                data:[321,432,543,376,286,298,400],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值',itemStyle:{
                            normal:{
                                color:'blue'
                            }
                        }}
                    ]
                }
            }]
 實現效果：

如需看完整的程式碼請戳這裡，自行fork下來

3.3 echarts.js響應式實現

echarts響應式在echarts官網上面的介紹比較詳細，這裡原理跟CSS3的媒體查詢有點類似，但是echarts.js的響應除了支援媒體查詢的在不同情況下面的相應還支援，根據長寬比來相應的方法，但是在官方文件中還是有一點缺陷的，比如：一個是案例中的響應式沒有涉及到處理series之外的響應，另外一個是按照DEMO中去做，會發現每次都要重新整理頁面才能出現響應的結果，所以下面我將寫一個簡單的案例來解決這些問題，資料樣式與上面的例子一樣

這裡就把所有的JS程式碼貼出來：

var echart=echarts.init(document.getElementById('main1'));
        var option={
            baseOption:{
                    title:{
                    text:'模擬商店一週銷售情況',
                    subtext:'虛擬資料'
                },
                legend:{
                    data:['購買金額','銷售金額']
                },
                xAxis:{
                    data:['週一','週二','週三','週四','週五','週六','週日']
                },
                yAxis:{

                },
                tooltip:{
                    show:true,
                    formatter:'系列名:{a}<br />類目:{b}<br />數值:{c}'
                },
                series:[{
                    name:'購買金額',
                    type:'bar',
                    data:[200,312,431,241,175,275,369],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine:{
                        data:[
                            {type:'average',name:'平均值',itemStyle:{
                                normal:{
                                    color:'green'
                                }
                            }}
                        ]
                    }
                },{
                    name:'銷售金額',
                    type:'line',
                    data:[321,432,543,376,286,298,400],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine:{
                        data:[
                            {type:'average',name:'平均值',itemStyle:{
                                normal:{
                                    color:'blue'
                                }
                            }}
                        ]
                    }
                }]
            },
            media:[
                {
                    //小與1000畫素時候響應
                    query:{
                        maxWidth:1000
                    },
                    option:{
                        title:{
                            show:true,
                            text:'測試一下'
                        }
                    }
                }
            ]
        };
        //每次視窗大小改變的時候都會觸發onresize事件，這個時候我們將echarts物件的尺寸賦值給視窗的大小這個屬性，從而實現圖表物件與視窗物件的尺寸一致的情況
        window.onresize = echart.resize;
        echart.setOption(option);

效果展示：原本是想要展示GIF的，但是錄製的時候卡頓太嚴重所以也就只能發一下在無重新整理的時候對比圖片

3.4 echarts的API互動

首先我們來理清官方文件中的API的分類，大致的API可以分成這樣的四類

這裡我們就來解釋一下echarts物件裡面主要是包括一些銷燬物件(dispose)，註冊地圖(registerMap)，初始化物件(echarts.init),關聯物件(connect)，屬於全域性屬性的設定，echartsInstance這個是包含echarts圖中的某些屬性的獲取或者設定，獲取寬高(getWidth、getHeight),獲取配置(getOption)，設定配置(setOption)等操作action和events這兩個操作在上圖中已經很明白了，所以就不多做解釋，具體的使用方法要與業務進行掛鉤才有意義，所以在這裡就不提供DEMO了，我相信大家看一下文件都能夠看懂個究竟。

四、echarts常見問題解決

1、當X軸上面要渲染的資料太多的時候就會出現只渲染出來一部分，但是圖表中的資料顯示(比如說柱狀圖中的每個柱子)又會自動的進行寬度的縮放，所以會導致X軸與圖中的資訊不相匹配的問題，解決的方法是在X軸設定axisLabel :{ interval:0 }這個屬性問題就可以解決了，Y軸的使用方法相同

2、為了使echart圖表隨著瀏覽器的大小發生響應式變化，所以需要在設定配置之前新增 window.onresize = echart.resize; 具體參照3.3 示例

內容持續更新中，敬請期待

五、總結

雖然echarts在同類型的資料視覺化框架中還算是比較的簡單易用的，但是在入手的時候可能也會有一些比較麻煩的地方困擾著你，比如文件這麼多我怎麼看，例項已經比較齊全了我還需要看API文件嗎，這些問題我想在這裡統一的說一下，其實echarts的學習無外乎就是先了解一下框架大致上的分類，然後是在將全部的API閱讀以便，使對框架有一個全域性的認識，然後在通過實踐去深入學習，示例只不過是這一步的一個輔助而已，只有紮紮實實的通過學習API一步一個腳印去了解學習，才能做到在使用的時候心中有底。以上的文章是博主在學習和專案中使用echarts的一些體會，希望對大家有幫助

前端資料視覺化echarts.js使用指南

前端資料視覺化echarts.js使用指南

ECharts 前端資料視覺化

前端資料視覺化外掛:Highcharts、Echarts和D3

前端資料視覺化外掛大盤點

資料視覺化:(echarts入門手冊：vue+echarts+餅圖demo詳解)

python專案篇-從資料庫獲取資料以Json格式返回前端資料視覺化方式顯示

前端資料視覺化外掛（三）地圖

前端資料視覺化外掛（五）立體圖

前端資料視覺化外掛（一）圖表

D3，最受歡迎的前端資料視覺化庫

前端資料視覺化外掛（四）關係圖

資料視覺化 D3.js實現力導向圖之二（node帶文字說明和提示）

【Echarts】資料視覺化_前端頁面實現嘗試

基於D3.js的資料視覺化前端實現方案

做資料視覺化，為什麼我們不再直接使用D3.js、Echarts

資料視覺化：淺談熱力圖如何在前端實現

互動式資料視覺化－D3.js（四）形狀生成器

neo4j圖形資料庫第七彈——整合vis.js實現資料視覺化

百度地圖標註及結合ECharts圖譜資料視覺化

Echarts資料視覺化全解

前端資料視覺化echarts.js使用指南

相關推薦