雙11再也不孤單，結識ECharts---強大的經常使用圖表庫

時間 2019-12-09

標籤再也不孤單結識 echarts 強大經常使用圖表简体版

原文原文鏈接

　　又是一年雙十一，廣大單身狗們有沒有很寂寞(好把，其實我也是)！可是此次的雙十一，我再也不孤單，由於結識了一個js的強大的圖表庫---ECharts。javascript

　　最近作軟件工程項目的時候，因爲設計圖中有柱狀圖和餅圖的設計，第一反應用原生js寫確定很麻煩，因而我請求可否不作，但咱們的PM鐵了心要作，最終逼迫我找到了這個強大的圖表庫，哈哈，在這裏感謝一下PM李佳瑋。(當我發現它還兼容IE6-8時，真的炒雞感動!)html

　　 ECharts提供商業產品經常使用圖表，底層基於ZRender（一個全新的輕量級canvas類庫），建立了座標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和絃圖、力導向佈局圖、儀表盤以及漏斗圖，同時支持任意維度的堆積和多圖表混合展示。前端

　　廢話很少說，立刻進入ECharts的使用吧。java

　　首先咱們進入ECharts的官網http://echarts.baidu.com/index.html(向百度前端團隊致敬)，進去之後下載ECharts。
git

　　下載好的目錄:github

　　初學的話咱們只要把目光放在build文件上，這裏麪包含了咱們製做圖表所需的相關資源文件。json

　　引入ECharts包有三種方式，官方文檔中有三種方式的具體介紹http://echarts.baidu.com/doc/doc.html#引入ECharts。canvas

　　這裏我採用官方推薦的模塊化單文件引入,首先須要熟悉模塊化開發。ECharts是一個符合AMD規範的模塊加載器，AMD規範相信你們都不陌生，它是javascript客戶端(就是瀏覽器上)的開發規範，而Node.js有CommonJs開發規範。若是不是很瞭解AMD規範能夠參考一下文章:瀏覽器

　　AMD---瀏覽器中的開發規範http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.htmlecharts

　　好，接下來我會展現具體的引入寫法:

<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
</head>
<body>
	<div id="main" style="height:300px;"></div>
	<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths : {
                                // 這裏載入相對路徑
				echarts : "echarts/build/dist"
			}
		});
		require(
			[
                                // 這裏的echarts表明的是paths中的路徑
				"echarts",
				"echarts/chart/bar"
			],
　　　　　　　　　　　　　　// 回調函數
			function(ex){
			}
		);

	</script>
</body>
</html>

　　js中require()表示要建立一個圖標的請求，首先要列出所需圖表庫的資源，這裏是要載入bar.js文件，所以須要引入模塊"echarts/chart/bar"。在ECharts中還有不少種圖表，好比pie(餅圖)，map(地圖)等等。

　　如今咱們已經加載了咱們須要的圖類，接下來要作的事很簡單---插入對應圖類所需組件。

<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
</head>
<body>
	<div id="main" style="height:300px;"></div>
	<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths : {
				echarts : "echarts/build/dist"
			}
		});
		require(
			[
				"echarts",
				"echarts/chart/pie"
			],
			function(ec){
				var myChart=ec.init(document.getElementById("main"));
				var option = {
					title :{
						text : "查看企業各部門報銷",
						x : "center"
					},
					tooltip : {
						trigger : "item",
						formatter : "{a} <br/> {b} : {c} ({d}%)"
					},
					legend : {
						orient : "vertical",
						x : "left",
						data : ["part1","part2","part3","part4"]
					},
					toolbox : {
						show : true,
						feature : {
							//mark : {show : true},
							//dataView : {show : true,readOnly : false},
							restore : {show : true}
							//saveAsImage : {shwo :true}
						}
					},
					calculable : false,
					series : [
						{
							name : "餅圖實例",
							type : "pie",
							radius : "55%",
							center : ["50%","60%"],
							data : [
								{value:100,name:"part1"},
								{value:200,name:"part2"},
								{value:300,name:"part3"},
								{value:400,name:"part4"}
							]
						}
					]
				};
				myChart.setOption(option);
			}
		);
	</script>
</body>
</html>

　　能夠看到require()的第二個參數是個function(){}，這裏應該是個回調函數，等待資源加載好後執行，這個函數中提供了建立圖表所須要的信息:

　　首先要獲取到須要被建立的對象，這裏用DOM方法取到。

　　其次把數據集用相似json的形式存放到option中，最後傳入到要被建立的對象中。

　　能夠看到Option對象中的子對象，都攜帶了不一樣的信息，好比標題title，提示框(tooltip)等等，更多的組件信息能夠在官方文檔中查看

　　http://echarts.baidu.com/doc/doc.html#選項

　　最後打開瀏覽器就能夠欣賞到一個簡單的利用ECharts的圖表了:

　　當我打開的時候還看到了不少動態的好玩的效果，都值得咱們去研究。

　　不過框架畢竟是框架，但願你們在學習框架前必定要學好原生js~這樣用起這些框架起來纔會駕輕就熟！