1.官方網站：
https://echarts.apache.org/zh/index.html
2.官方教程：5分鐘上手ECharts
3.簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
4.dome
- 獲取 ECharts
可直接下載js文件，引入到項目中，下載地址：ECharts.js。 -
引入 ECharts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script type="text/javascript" src="/js/echarts.min.js"></script> <!-- 引入jquery --> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> </head> </html> - 繪製一個簡單的柱狀圖
<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')); //向後臺發送處理數據 $.post( "/web/weuser/getData", function(data){ // 指定圖表的配置項和數據 var option = { title: { text: '用戶註冊量' }, tooltip: {}, legend: { data:['註冊量'] }, xAxis: { data: data.category }, yAxis: {}, series: [{ name: '註冊量', type: 'bar', data: data.totals }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); } ); </script> </body> - 後端異步提供數據
@RequestMapping("/getData") @ResponseBody public Map<String, Object> getData() { Map<String, Object> map = new HashMap<>(); map.put("category", Arrays.asList("一月份", "二月份", "三月份", "四月份", "五月份")); map.put("totals", Arrays.asList(10, 20, 30, 50, 100)); return map; }
訪問頁面無法展示，提示：Uncaught ReferenceError: echarts is not defined
解決辦法：
引入這行即可
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
頁面展示效果：
