前言：
如果我們開發的項目中涉及到大量的數據分析，乾巴巴的數據展示肯定不是用戶想看到的，怎麼把數據更加形象生動的展示給用戶，就變得十分重要了。那麼就不得不說今天的主角ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。這篇文章通過一個簡單的demo,帶你初步認識ECharts。
正文：
一、瀏覽器畫圖的原理
基於HTML和JavaScript的瀏覽器繪圖方式，依賴於各個瀏覽器內部所提供的圖形引擎。所以針對不同瀏覽器就誕生了不同的網絡圖形標準。
目前主流的網絡圖形標準包括兩種：
1.SVG：SVG 是由 W3C 制定的同樣基於 XML 的矢量圖形描述語言，SVG 元素是指示如何繪製圖像的一些指令，由圖形引擎解釋這些指令，把 SVG 圖像在瀏覽器上顯示出來。使用 SVG 可以在網頁上顯示出各種各樣的高質量的矢量圖形，其最明顯的特徵是靈活的文件格式，矢量圖形、位圖和文字三部分共同組成一個 SVG 圖形，並具備對運行中的 Web 頁面圖像進行實時修改的能力。
2.Canvas: Canvas 是指 HTML 5 中新加入的 canvas 元素，最初由 Apple 的 Safari 瀏覽器引入，而後受到 Firefox 和 Opera 的廣泛支持。Canvas 元素相對 SVG 的一個重要不同在於，canvas 提供了通過 JavaScript 繪製圖形的方法，每一個 canvas 元素都有一個上下文，在其中可以繪製任意圖形；而 SVG 使用 XML 文檔來描述圖形，開發人員通常通過修改其中的 XML 標記來完成對圖像的修改。
我們先簡單的看下兩個簡單的demo:
第一個是Canvas的
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
第二個是SVG的
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
所以我看可以看出，canvas是通過js來繪製圖形，而SVG是在已有的圖像模型，對標籤的屬性修改來控制圖形。而ECharts是基於canvas來實現畫圖的。
二、什麼是ECharts
ECharts就是一個純JavaScript的圖標庫,給我們提供直觀，交互豐富，可高度個性化定製的數據可視化圖表，讓數據展示變得更加友好靈動。
三、ECharts支持的圖表類型很多，我們可以在ECharts的官網https://www.echartsjs.com/zh/index.html看到ECharts支持的類型，可以說能滿足我們的各種各樣的需求
四、ECharts如何使用
1.我們先看個demo,然後根據這個demo，看看怎麼具體學習echarts的使用，可以直接把這段代碼粘貼到你的開發軟件裏，但是要記得去官網先下載 echarts.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script> //想使用ECharts必須要引入echarts.js
<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: { //------------------------------------------------x軸
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {}//------------------------------------------------y軸
series: [{//-----------------------------------------------系列列表。每個系列通過 type決定自己的圖表類型
name: '銷量',
type: 'bar',//-----------------------------------------柱狀圖
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
展示的效果：
在上面的官方demo裏我加了一些註釋，主要解釋這個是做什麼的。這個在官方網站的文檔裏都有詳細說明，可以從術語速查手冊和配置項手冊看到，尤其配置項手冊寫的超詳細，根據這些官方demo和文檔你可以很快上手。
總結：
ECharts學習起來還是很容易的，沒有太多的難點，因爲它是中國開源的文檔，所以中文文檔會很多，學習難度也就下降很多，想要玩轉他的展示效果，就趕緊跟着官方文檔操作一波，你會發現它真的是一款功能強大的可視化工具。
我是阿達，一名喜歡分享知識的程序員，時不時的也會荒腔走板的聊一聊電影、電視劇、音樂、漫畫，這裏已經有372小夥伴在等你們啦，感興趣的就趕緊來點擊關注我把，哪裏有不明白或有不同觀點的地方歡迎留言。