echarts學習筆記
前言：配置環境，熟悉代碼；在系統中注釋至少5種不同類型的echarts圖表；
文章目錄
- echarts學習筆記
- 配置環境
- 學習思路
- echarts
- mapbox
- three.js
- [Vue.js Examples](https://vuejsexamples.com/)
- echarts理論基礎
- 五分鐘上手echarts
- 自定義建構echarts
- echarts基礎概念概覽
- 兩個demo
- 柱狀圖（模拟日均客運總量）
- 折線圖（月度客運總量）
配置環境
根據拉勾招聘上的招聘介紹以及公司官網了解到。公司主要領域是智慧城市大資料分析挖掘和大資料的可視化，公司面向城市規劃、交通規劃、城市管理、國土管理、環境保護等部分，針對多源城市時空活動大資料（包括手機、智能交通系統如計程車、地鐵、公交等資料）采集處理、分析挖掘、可視表達并提供智能決策支援和應用解決方案。
公司産品中使用到的技術有：GIS（QGis、PostGIS、PostgreSQL）、可視化（echarts、mapbox、three.js）
在這裡我主要學習echarts，做圖表的可視化。echarts是基于canvas标簽的。
使用echarts的方法是：下載下傳echarts.min.js，然後用script标簽引用。
學習思路
我習慣學以緻用，帶着做産品的思路去學習，始終記住自己要幹什麼，怎麼去解決學習過程中遇到的問題。學習的過程就會有趣好玩。
這個echarts是一個百度做的可視化神器。是一個JavaScript庫。
echarts
是一個使用JavaScript實作的開源可視化庫。通過下載下傳echarts.min.js用script标簽引入來使用。浏覽器端圖表可以選擇canvas或SVG渲染。
echarts生成圖表的配置：建立HTML頁面、為echarts準備一個具備高寬的DOM容器、使用json格式配置。
我習慣用菜鳥教程來簡單了解這些庫，它的官網教程在這
一個可視化的JavaScript庫，主要用于圖表顯示。本質是canvas，可以參考源代碼造輪子。
mapbox
是為許多公司的網站提供訂制線上地圖的大型供應商。自2010年起，該公司快速拓展了訂制地圖的市場地位。官網在這裡
mapbox gl js 是一個JavaScript庫，使用webGL，以vector tiles和mapbox styles為來源，将它們渲染成互動式地圖。
一個專用于地圖顯示的JavaScript庫，主要用于顯示地圖。本質是webGL
three.js
一個跨浏覽器的腳本，使用JavaScript函數庫或API在浏覽器中建立和展示動畫的三維計算機圖形。three.js使用webGL，源代碼托管在GitHub。官網在這裡
本質是webGL。可以參考造輪子。
Vue.js Examples
example.vue：vue架構中的例子。
echarts理論基礎
五分鐘上手echarts
五分鐘上手echarts 在官網下載下傳echarts；引用echarts；繪制一個簡單的圖表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html> 自定義建構echarts
一般可以直接從CDN中擷取建構好的echarts，也可以在GitHub中echarts/dist檔案夾中擷取建構好的echarts。這些都可以在浏覽器端項目中使用。一般有如下三種定制。
- 完全版：
echarts/dist/echarts.js
echarts/echarts.all.js
- 常用版：
echarts/dist/echarts.common.js
echarts/echarts.common.js
- 精簡版：
echarts/dist/echarts.simple.js
echarts/echarts.simple.js
我們也可以自己建構 echarts，能夠僅僅包括自己所需要的圖表群組件。
echarts基礎概念概覽
echarts執行個體：一個網頁可以建立多個echarts執行個體。每個echarts執行個體可以建立多個圖表和坐标系等等（用option來描述）。準備一個DOM節點（作為echarts的渲染容器），就可以在上面建立一個echarts執行個體。每個echarts執行個體獨占一個DOM節點。
系列（series）：一組數值以及他們映射成的圖。一個系列包含的要素至少有一組數值、圖表類型（series.js）以及其他關于這些資料如何映射成圖的參數。series.type中可以設定圖表類型，如餅圖pie、折線圖line、柱狀圖bar等；在series.data中設定每個系列中所需要的資料。
元件（component）：在系列之上，echarts 中各種内容，被抽象為“元件”。例如，echarts 中至少有這些元件：xAxis（直角坐标系 X 軸）、yAxis（直角坐标系 Y 軸）、grid（直角坐标系底闆）、angleAxis（極坐标系角度軸）、radiusAxis（極坐标系半徑軸）、polar（極坐标系底闆）、geo（地理坐标系）、dataZoom（資料區縮放元件）、visualMap（視覺映射元件）、tooltip（提示框元件）、toolbox（工具欄元件）、series（系列）、…我們注意到，其實系列（series）也是一種元件，可以了解為：系列是專門繪制“圖”的元件。
用option描述圖表：option表述了資料、資料如何映射成圖形、互動行為。
更多内容請看：個性化圖表的樣式、echarts的樣式簡介、使用dataset管理資料、在圖表中加入互動元件、移動端自适應、資料的視覺映射、echarts中的事件和行為、富文本标簽、使用echarts GL實作基礎的三維可視化。
兩個demo
首先思考需要用到哪些demo。由于是要做一個地鐵系統。确定做：顯然柱狀圖、折線圖是必備的，餅狀圖作為補充。在這初步的三個demo的基礎上還需要加入富文本标簽。然後應該就可以應付大部分圖表了。
然後在echarts官網的執行個體中選demo。
最後在GitHub上下載下傳echarts.min.js。用script标簽引入。
柱狀圖（模拟日均客運總量）
樣子：
思路：有三組資料：工作日、周末、節假日；橫坐标是2010到2019，縱坐标是0到600萬人次。
參考：官網上的例子 。修改option；
var option = {
title: {text: '仿日均客運總量柱狀圖'},
legend: {},
tooltip: {},
dataset: {
source: [
['product', '工作日', '周末', '節假日'],
['2010', 53.5, 57.3, 56.8],
['2011', 174.2, 158.2, 79.2],
['2012', 183.4, 172.5, 174.4],
['2013', 279.3, 266.3, 211.2]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
],
}; 折線圖（月度客運總量）
樣子：
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)