2021-05-12 14:32:11
實用的商業級圖表Echarts 詳解
2020-06-16 17:03:13
了解了解
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化客製化的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。
| 一、 簡單了解一下Echarts |
1.1Echarts的基本圖表型別
圖表庫標準包含單圖表型別的標準圖表以及多圖表型別混合的混搭圖表
1.2Echarts中的常用名詞解釋
基本名詞
| 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 |
引入Echarts的方式有很多：
1、模組化包引入
2、模組化單檔案引入
3、標籤式單檔案引入
這裡我們就著重介紹一下第三種方式，也是最簡單，我認為比較好用的一種！！
ECharts 3 開始不再強制使用 AMD 的方式按需引入，程式碼裡也不再內建 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標籤引入。路徑結果如下：
1 <body> 2 <div id="main" style="height:400px;"></div> //為 ECharts 準備一個具備高寬的 DOM 容器。 3 ... 4 <script src="js/echarts.js"></script> 5 <script> 6 var myChart = echarts.init(document.getElementById('main')); //基於準備好的dom，初始化echarts範例 7 var option = { 8 ... //指定圖表的設定項和資料 9 } 10 myChart.setOption(option); //使用剛指定的設定項和資料顯示圖表。 11 </script> 12 </body>
| 三、 具體小範例 |
由於Echarts中的屬性很多，接下來我就通過兩個小李子給大家介紹一下其中的基本屬性的使用吧~~~
3.1範例一：柱狀圖
<script type="text/javascript">
// 基於準備好的dom，初始化echarts範例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的設定項和資料
var option = {
title: { //標題，每個圖表最多僅有一個標題控制元件，每個標題控制元件可設主副標題。
text: 'ECharts 入門範例', //主標題文字
subtext:'該圖表純屬虛構', //副標題文字
x:'left', //標題水平安放位置，預設為left。可選值有left、right、center
y:'top', //標題垂直安放位置，預設為top。可選值有top、bottom、center
textAlign:'left', //標題水平對齊方式，預設根據x設定自動調整。可選值有left、right、center
backgroundColor:'rgba(0,0,0,0)', //標題背景顏色，預設透明
textStyle:{ //主標題文字樣式
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},
subtextStyle:{
color: '#aaa' //副標題文字樣式
}
},
tooltip: {}, //提示框，滑鼠懸浮互動時的資訊提示。
legend: { //圖例，每個圖表最多僅有一個圖例。
data:['銷量'], //圖例內容陣列
x:'center', //圖例水平安放位置，預設為全圖居中。可選值有left、right、center
y:'top', //圖例垂直安放位置，預設為top。可選值有top、bottom、center
},
xAxis: { //直角坐標系中橫軸陣列
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {}, //直角坐標系中縱軸陣列
series: [{ //資料內容
name: '銷量', //系列名稱，如啟用legend，該值將被legend.data索引相關
type: 'bar', //圖表型別，必要引數！如為空或不支援型別，則該系列資料不被顯示。可選值為line(折線圖)，bar(柱狀圖)，scatter(散點圖)
data: [5, 20, 36, 10, 10, 20] //資料
}]
};
// 使用剛指定的設定項和資料顯示圖表。
myChart.setOption(option);
</script
執行效果：
3.2餅圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts-www.linuxidc.com</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts範例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的設定項和資料
var option = {
title: {
text: '某站點使用者存取來源', //主標題文字
subtext: '純屬虛構', //副標題文字
x: 'center' //標題水平安放位置
},
series: [{ //資料內容
name: '存取來源', //系列名稱，如啟用legend，該值將被legend.data索引相關
type: 'pie', //圖表型別，必要引數！
radius: '55%', //半徑
center: ['50%', '60%'], //圓心坐標
data: [{ //資料
value: 335,
name: '直接存取'
},
{
value: 310,
name: '郵件行銷'
},
{
value: 234,
name: '聯盟廣告'
},
{
value: 135,
name: '視訊廣告'
},
{
value: 1548,
name: '搜尋引擎'
}
]
}],
tooltip: { //提示框，滑鼠懸浮互動時的資訊提示
trigger: 'item', //觸發型別，預設資料觸發，可選值有item和axis
formatter: "{a} <br/>{b} : {c} ({d}%)", //滑鼠指上時顯示的資料 a（系列名稱），b（類目值），c（數值）, d（占總體的百分比）
backgroundColor: 'rgba(0,0,0,0.7)' //提示背景顏色，預設為透明度為0.7的黑色
},
legend: { //圖例，每個圖表最多僅有一個圖例。
orient: 'vertical', //布局方式，預設為水平佈局，可選值有horizontal(豎直)和vertical(水平)
x: 'left', //圖例水平安放位置，預設為全圖居中。可選值有left、right、center
data: ['直接存取', '郵件行銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
},
toolbox: { //工具箱，每個圖表最多僅有一個工具箱。
show: true, //顯示策略，可選為：true（顯示） | false（隱藏）
feature: { //啟用功能
dataView: { //資料檢視
show: true,
readOnly: false //readOnly 預設資料檢視為唯讀，可指定readOnly為false開啟編輯功能
},
restore: { //還原，復位原始圖表 右上角有還原圖示
show: true
},
saveAsImage: { //儲存圖片（IE8-不支援），預設儲存型別為png，可以改為jpeg
show: true,
type:'jpeg',
title : '儲存為圖片'
}
}
}
};
// 使用剛指定的設定項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
執行效果：
|
四、 給大家介紹一下其他的製作圖表的框架 |
4.1MSChart
這個是Visual Studio裡的自帶控制元件，使用比較簡單，不過資料這塊需要在後台系結。
4.2ichart.js
是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形。 支援餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖等。
4.3Chart.js
也是一款基於HTML5的圖形庫和ichartjs整體類似。不過Chart.js的教學文件沒有ichartjs的詳細。不過感覺在對於移動的適配上感覺比ichartjs要好一點。
優點：
1.輕量級，min版總大小50多k。
2.行動端使用比較流暢，畢竟小。
缺點：
1.功能欠缺比較多。
2.中文文件奇缺。
4.3Echarts.js
使用這個庫的原因主要有三點，一個是因為這個庫是百度的專案，而且一直有更新，目前最新的是EChart 3；第二個是這個庫的專案文件比較詳細，每個點都說明的比較清楚，而且是中文的，理解比較容易；第三點是這個庫支援的圖形很豐富，並且可以直接切換圖形，使用起來很方便。
優點：
1.國人開發，文件全，便於開發和閱讀文件。
2.圖表豐富，可以適用各種各樣的功能。
缺點：
行動端使用略卡，畢竟是PC端的東西，移植到行動端肯定多多少少有些問題吧，或許跟自己水平也有一定的關係，哎怎麼說呢。
今天就給大家分享到這啦，有什麼不明白的或者是對這篇部落格有什麼意見的，歡迎大家留言~~~謝謝大家！！！
本文永久更新連結地址：http://www.linuxidc.com/Linux/2017-11/148242.htm
相關文章