一、 簡單echarts
Echarts的使用：
1.下載echarts對應的js 去官網下載 然后找到dist 里面的echarts.js 拷貝進來 引用就可以。
2.在頁面中引入下載的js
3.為圖表提供一個帶有高和寬的容器對象【div】
4.使用echarts初始化容器對象--%>
5.向echarts圖表中設置要展示的數據和圖表類型
6.為 ECharts 准備一個具備大小（寬高）的 DOM
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/12/5 0005 Time: 22:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script> <%--詳情可參考echarts 官方文檔。 文檔的配置項手冊去看咋配置的--%> <%-- 里面基本傳的都是jaon 字符串 或者數組形式--%> <script> window.onload=function () { // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); <%-- 指定圖表的配置項和數據--%> var option = { title: { text: 'ECharts 入門示例', subtext:'echarts副標題', // 這下面的這個是標題下的一個數組 設置標題的顏色。 textStyle:{ color:'red', fontStyle:'italic', } }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, //y軸 yAxis: { axisLabel:{ formatter: '{value} 萬元' } }, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] },{ name: '銷量', type: 'line', data: [5, 20, 36, 10, 10, 20] }] }; <%-- // 使用剛指定的配置項和數據顯示圖表。--%> myChart.setOption(option); } </script> <html> <head> <title>Title</title> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html>
二 、 與后端數據庫 結合 使用echarts 、
2.1前端頁面
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/12/5 0005 Time: 22:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script> <%--詳情可參考echarts 官方文檔。 文檔的配置項手冊去看咋配置的--%> <%-- 里面基本傳的都是jaon 字符串 或者數組形式--%> <script> $(function () { // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); var names =[]; var sellCount = []; $.ajax({ type:"GET", url:"${pageContext.request.contextPath}/emp/phone", success:function (result) { //遍歷map key 是取出來的每個鍵， for (key in result.map.hashMap) { //因為要把取出來的值 放到x軸或者y軸的data 屬性里面。 需要創建兩個一位數組 把這兩個數組放到x，y 對應data后面作為展示的數據。 names.push(key); sellCount.push(result.map.hashMap[key]); } <%-- 指定圖表的配置項和數據--%> var option = { title: { text: 'ECharts 入門示例', subtext: 'echarts副標題', textStyle: { color: 'red', fontStyle: 'italic' } }, legend: { data: ['銷量'] }, xAxis: { data: names }, yAxis: { axisLabel: { formatter: '{value} 萬元' } }, series: [{ name: '銷量', type: 'bar', data: sellCount }, { name: '銷量', type: 'line', data: sellCount }] }; myChart.setOption(option); } }); }); </script> <html> <head> <title>Title</title> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html>
2.2后端代碼
//各個手機操作系統的使用情況分析 @RequestMapping(value = "/phone",method = RequestMethod.GET) @ResponseBody public ResultEntity getEchartData(){ Map<String, Object> map = new HashMap<String, Object>(); map.put("IOS", 1600); map.put("Android", 3000); map.put("Sambian", 1000); map.put("windows", 2000); return ResultEntity.success().put("hashMap", map); }
這樣這個echarts 就結束了！！！！