一.引言
最近做一個智慧城市項目，項目中需要圖表和報表進行數據分析，從網上找了很多，最后找到了百度開放的echarts，一個很強大的插件。
二.介紹
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
三.使用方式
1、從百度官網下載最新的版本echarts3，這個版本是一個集成版本，也可以自定義一個版本：http://echarts.baidu.com/download.html
最新版本和之前的2.0版本使用不一樣了，引用方式和里面一些插件的參數等存在一定的區別，具體看官網上的文檔介紹http://echarts.baidu.com/api.html#echarts。
echarts3把所有的插件集成在一起，只需要在項目中引用一個echarts.js文件就可以，非常簡單。
2、官網上有很多模板，這些版本的樣式和主題都是可以修改的，根據自己的需要可以定制。主題的下載地址：http://echarts.baidu.com/download-theme.html
最后生成的也是一個js文件，直接引用在項目中就可以了，可以下載多套模板，這樣就可以實現換皮膚的效果了，在代碼中只需要修改一下模板的名字。
3、現在來寫一個小的demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); //初始化（使用默認的主題）
//var myChart=echarts.inti(document.getElementById('main'),'infographic');這個就是使用自定義的主題 infographic為主題名字 // 指定圖表的配置項和數據 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>
運行結果：
