圖形報表技術
在項目開發中除了表格顯示資料外，還可以通過圖表來表現資料，這種圖表形式表現資料使人看的清楚明白且更加直覺。
以下推薦圖形報表的第三方插件。
一、JQuery圖形報表
圖形報表插件基本都是基于JQuery的，根據表現形式不一樣，又分了很多類型。參見下列網址：
http://www.jq22.com/jquery-plugins圖表-1-jq
http://www.oschina.net/project/tag/275/jquery-chart
二、百度ECharts
官網：http://echarts.baidu.com/
ECharts，一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表。
ECharts 提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多元資料可視化的平行坐标，還有用于 BI 的漏鬥圖，儀表盤，并且支援圖與圖之間的混搭。
1.擷取 ECharts
可以通過以下幾種方式擷取 ECharts。
從官網下載下傳界面選擇你需要的版本下載下傳，根據開發者功能和體積上的需求，我們提供了不同打包的下載下傳，如果你在體積上沒有要求，可以直接下載下傳完整版本。開發環境建議下載下傳源代碼版本，包含了常見的錯誤提示和警告。
在 ECharts 的 GitHub 上下載下傳最新的 release 版本，解壓出來的檔案夾裡的 dist 目錄裡可以找到最新版本的 echarts 庫。
通過 npm 擷取 echarts，npm install echarts --save，詳見“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者國内的 bootcdn 上找到 ECharts 的最新版本。
版本：
常用（echarts.common.min.js）——包含常用的圖表元件。
精簡（echarts.simple.min.js）——隻包含基礎圖表。
完整（echarts.min.js）——包含所有的圖表元件。
源代碼（echarts.js）——包含所有圖表元件的源碼，常見的警告和錯誤提示。
2.引入 ECharts
ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼裡也不再内置 AMD 加載器。是以引入方式簡單了很多，隻需要像普通的 JavaScript 庫一樣用 script 标簽引入。
-
<meta charset="utf-8"> <!-- 引入 ECharts 檔案 --> <script src="echarts.min.js"></script> </head> </html>
3.繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。
然後就可以通過 echarts.init 方法初始化一個 echarts 執行個體并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
-
<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>
![【釋出】App Store 預覽視訊制作總結知乎專欄：AppStore預覽視訊制作心得[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)