ECharts入門教程

時間 2019-11-18

標籤 echarts 入門教程简体版

原文原文鏈接

ECharts介紹javascript

本文介紹的是2.0的版本，3.0版本已經出來了。html

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。java

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展示。git

名稱解釋github

名詞	描述
chart	是指一個完整的圖表，如折線圖，餅圖等「基本」圖表類型或由基本圖表組合而成的「混搭」圖表，可能包括座標軸、圖例等
axis	直角座標系中的一個座標軸，座標軸可分爲類目型、數值型或時間型
xAxis	直角座標系中的橫軸，一般並默認爲類目型
yAxis	直角座標系中的縱軸，一般並默認爲數值型
grid	直角座標系中除座標軸外的繪圖網格，用於定義直角系總體佈局
legend	圖例，表述數據和圖形的關聯
dataRange	值域選擇，經常使用於展示地域數據時選擇值域範圍
dataZoom	數據區域縮放，經常使用於展示大量數據時選擇可視範圍
roamController	縮放漫遊組件，搭配地圖使用
toolbox	輔助工具箱，輔助功能，如添加標線，框選縮放等
tooltip	氣泡提示框，經常使用於展示更詳細的數據
timeline	時間軸，經常使用於展示同一系列數據在時間維度上的多份數據
series	數據系列，一個圖表可能包含多個系列，每個系列可能包含多個數據

圖表名稱chrome

line	折線圖，堆積折線圖，區域圖，堆積區域圖。
bar	柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter	散點圖，氣泡圖。散點圖至少須要橫縱兩個數據，更高維度數據加入時能夠映射爲顏色或大小，當映射到大小時則爲氣泡圖
k	K線圖，蠟燭圖。經常使用於展示股票交易數據。
pie	餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar	雷達圖，填充雷達圖。高維度數據展示的經常使用圖表。
chord	和絃圖。經常使用於展示關係數據，外層爲圓環圖，可體現數據佔比關係，內層爲各個扇形間相互鏈接的弦，可體現關係數據
force	力導佈局圖。經常使用於展示覆雜關係網絡聚類佈局。
map	地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可經過標準GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。
heatmap	熱力圖。用於展示密度分佈信息，支持與地圖、百度地圖插件聯合使用。
gauge	儀表盤。用於展示關鍵指標數據，常見於BI類系統。
funnel	漏斗圖。用於展示數據通過篩選、過濾等流程處理後發生的數據變化，常見於BI類系統。
evnetRiver	事件河流圖。經常使用於展現具備時間屬性的多個事件，以及事件隨時間的演化。
treemap	矩形式樹狀結構圖，簡稱：矩形樹圖。用於展現樹形數據結構，優點是能最大限度展現節點的尺寸特徵。
venn	韋恩圖。用於展現集合以及它們的交集。
tree	樹圖。用於展現樹形數據結構各節點的層級關係
wordCloud	詞雲。詞雲是關鍵詞的視覺化描述，用於彙總用戶生成的標籤或一個網站的文字內容

引入方式瀏覽器

　　引入ECharts有幾種方式，推薦你們使用模塊化單文件引入。網絡

<body>
    <div id="myChart" style="height:600px;"></div>//這裏必須設置div的寬度，不然不會顯示
    ...
    <script src="./js/echarts.js"></script>//這裏放入你js文件的地址
    <script type="text/javascript">
        require.config({                 //配置require.config文件
            paths: {
                echarts: './js/dist'
            }
        });
    </script>
</body>
require.config配置好能夠動態加載ECharts

<body>
    <div id="myChart" style="height:500px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
                'echarts/chart/bar'     //這裏還能夠添加其餘的圖表
　　　　　　　　　　......code
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>
總結　　建立一個顯示圖標的容器（必須設置寬度高度）　　引入EChartsJS文件能夠經過script標籤引入　　配置require.config文件（加載EChartsjs文件地址）　　動態加載ECharts所須要的圖標在回調函數裏面使用（若是是在同一個頁面已經加載了ECharts圖標在使用require('echarts').init(「id」)）以上是ECharts使用方法，是根據ECharts官網介紹來寫的，還有不少方法沒有列出來，能夠參考ECharts官網---------》http://echarts.baidu.com/echarts2/index.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。