echarts學習
阿新 • • 發佈：2021-06-22
ECharts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。
名稱解釋
| 名詞 | 描述 |
|---|---|
| chart | 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表型別或由基本圖表組合而成的“混搭”圖表，可能包括座標軸、圖例等 |
| axis | 直角座標系中的一個座標軸，座標軸可分為類目型、數值型或時間型 |
| xAxis | 直角座標系中的橫軸，通常並預設為類目型 |
| yAxis | 直角座標系中的縱軸，通常並預設為數值型 |
| grid | 直角座標系中除座標軸外的繪圖網格，用於定義直角系整體佈局 |
| legend | 圖例，表述資料和圖形的關聯 |
| dataRange | 值域選擇，常用於展現地域資料時選擇值域範圍 |
| dataZoom | 資料區域縮放，常用於展現大量資料時選擇可視範圍 |
| roamController | 縮放漫遊元件，搭配地圖使用 |
| toolbox | 輔助工具箱，輔助功能，如新增標線，框選縮放等 |
| tooltip | 氣泡提示框，常用於展現更詳細的資料 |
| timeline | 時間軸，常用於展現同一系列資料在時間維度上的多份資料 |
| series | 資料系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據 |
圖表名稱
| 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').