這個這個。。哇，簡直無敵，之前怎么沒有發現這么強大的工具
最近寫了一個JavaWeb的小項目，把Layui以及Bootstrap兩大前端工具結合起來做了一個在我這個直男審美看起來很漂亮的一個購物網站，什么各種樣式啊，各種控件啊，再加上我精妙的頁面設計，就感覺還是挺不錯的，也運行了很多的工具類添加到項目當中去，像啥郵箱驗證啊，手機驗證碼驗證啊，地圖啊，支付包的支付界面啊等等，就充實一點嘛，在項目的最后，想着還要不要加一點什么東西，我的導師在群里面來了一句靈魂發話，如圖所示：
反正我是一眼就被那花里胡哨的圖標給吸引了，沒錯，答案就是Echarts，然后我就去Echarts的官網走了一下，丟你勞雷！！太強了吧，這簡直就是數據展示器啊，無比強大的樣式以及方便的用法完完全全的吸引了我，下面就為大家來介紹這強大的前端工具，只是介紹，因為里面的開源可用樣式是非常之多的，我只能用我體現在項目里面所用的南丁格爾玫瑰圖做一個小Demo給大家Show一下，放心，非常好上手，只要數據傳的對了，你也可以做出一個很牛X的前端展示圖。
Echarts官網：https://echarts.baidu.com/index.html
Echarts之所以強大的一個原因就是因為它的便捷，每一個樣式的實例都是包裝好的，一旦我們覺得所要展示的數據用的這個實例不好想換的時候，沒事，2分鍾，直接從官網或者直接下載好的Echarts包直接拷里面的option就可以了，引入的方法有挺多種的，在這里我推薦的是模塊化單文件引入，也是最直觀的一種引入方法
1 <script type="text/javascript"> 2 require.config({ 3 paths: { 4 echarts: './js/dist' //為模塊加載器配置echarts的路徑 5 } 6 }); 7 require( 8 [ 9 'echarts', 10 'echarts/chart/line', // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表 11 'echarts/chart/bar' 12 ], 13 function (ec) { 14 var myChart = ec.init(document.getElementById('main')); 15 var option = { 16 ... 17 } 18 myChart.setOption(option); 19 } 20 ); 21 </script>
其中的option就是你要放入的圖標實例
接下來要做的就是在頁面中創建一塊具備一定大小的<div id="main">，不要忘了再之前還要引入模塊化單文件echarts.js
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 </head> 6 <body> 7 <!-- 為ECharts准備一個具備大小（寬高）的Dom --> 8 <div id="main" style="height:400px"></div> 9 <!-- ECharts單文件引入 --> 10 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> 11 </body>
怎么樣，是不是特別方便，最強大的還不是這個，由於Echarts的實例太多，無法一一說明，就隨便找了一個Try Dragging these Points圖的例子來講。
ECharts 提供了豐富的自定義配置選項，並且能夠從全局、系列、數據三個層級去設置數據圖形的樣式。
而此時在如中所展示的正是通過傳入的data而顯示出的圖標，以一種更為美觀和簡單的樣式增加了人們對於信息的接受度，讓繁雜的數據能夠轉換成顯而易見的圖形信息被人所吸收。
不僅僅提供了豐富的可視化類型，還兼容了當前的絕大部分的瀏覽器（IE7以下不兼容），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
細粒度的模塊化和打包機制可以讓Echarts在移動端也能夠展現出千萬級的數據量，就是。。。。哇！！！簡直無敵就是，我一個做安卓的朋友被我安利之后就好像發現了新大陸一樣。哈哈哈哈哈，千萬別誤會，我沒收它的廣告費，這算是一篇安利貼吧
配合Echarts中的timeline 組件以及ajax的部分刷新給他放在你的頁面當中，簡直不要在高大上了。
實例講解：
從Servlet傳回的list用Gson或者JsonArray包裝傳回
在前端中再接收之后放入data[]中，然后。。。。然后沒有啦，打開之后就是一個相當nice的圖表