你可以選擇要根據什么條件查，以及顯示的圖表是哪一種類型的。我這里做了柱狀、折線、餅圖。前兩種的option設置差不多，但是餅圖是不一樣的。所以在做了判斷才使用對應的配置項和數據顯示圖表。
通過ajax像后台發送請求數據，從數據庫查信息。看一下我的sql語句：
String sql="select "+information+" as leibie,count(*) as num from information group by "+information+" ";
在數據庫中測試一下sql語句。注意（count * 默認的列屬性類型為int型）
然后我們需要根據自己查詢語句中as之后自己設置的列名創建一個實體類。
package User; public class echarts { private String leibie; private Integer num; public String getLeibie() { return leibie; } public void setLeibie(String leibie) { this.leibie = leibie; } public Integer getNum() { return num; } public void setNum(int num) { this.num = num; } public echarts() { super(); } public echarts(String leibie, int num) { super(); this.leibie = leibie; this.num = num; } }
Dao層的執行函數（從數據庫查出數據存在list數組之中）
//echarts按分類獲取數據和數量 public static List<echarts> getechartsdata(String sql) throws SQLException { // 查詢語句的執行結果為一個表格，即多個學生對象的集合，所有可以創建數組列表對象來存儲 List<echarts> lst = new ArrayList<echarts>(); // 獲取連接對象 Connection conn = Connect.getConn(); try { // 連接對象conn調用createStatement()方法，創建一個執行SQL語句的對象st Statement st = conn.createStatement(); // 執行SQL語句的對象st調用executeQuery()方法，執行查詢語句，將查詢到的結果返回到一個結果集中 ResultSet rs = st.executeQuery(sql); // 遍歷結果集對象 while (rs.next()) { echarts mes = new echarts(); mes.setLeibie(rs.getString("leibie")); mes.setNum(rs.getInt("num")); lst.add(mes); } } catch (Exception e) { System.out.println(e.getMessage()); } finally { // 資源使用完之后，如果沒有關閉，則需要關閉 if (conn != null) { conn.close(); } } return lst; }
servlet的echarts：
//測試圖表 private void echarts(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String information=req.getParameter("information"); String sql="select "+information+" as leibie,count(*) as num from information group by "+information+" "; List<echarts> echartslist= MessageService.getechartsdata(sql); //list轉json JSONArray Js = JSONArray.fromObject(echartslist); resp.getWriter().print(Js); }
前台界面jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <select id="information"> <option value="insattr">機構屬性</option> <option value="belongarea">歸屬區域</option> <option value="totime">發布時間</option> </select> <select id="echartstype"> <option value="bar">柱狀圖</option> <option value="line">折線圖</option> <option value="pie">餅圖</option> </select> <button id="select">查詢</button> <div id="main" style="width: 600px;height:400px;"></div> <div id="table"></div> </body> <script src="echarts/echarts.min.js"></script> <script src="js/jquery.min.js" charset="utf-8"></script> <script type="text/javascript"> $("#select").click(function () { //獲取圖表的類型 var echartstype=$("#echartstype").val(); //獲取查詢條件 var information=$("#information").val(); //var informationtext=$("#information").text(); echarts.init(document.getElementById('main')).dispose();//銷毀前一個實例 // 基於准備好的dom，初始化echarts實例,先銷毀，在初始化 var myChart = echarts.init(document.getElementById('main')); $.ajax({ type: "post", url:"MessageServlet?method=echarts", async:false, cache:true, data:{"information":information}, success:function (data) { // 指定圖表的配置項和數據 //json字符串 // var js=data; //json字符串轉為json對象 var jsobj=JSON.parse(data) //往table中顯示先出來的數據 var text = "<table class='table table-hover table-striped table-bordered table-sm'>" + " <thead>" + " <tr>" + " <th>名稱</th>" + " <th>總數</th>" + " </tr>" + " </thead><tbody>"; for (i = 0; i <jsobj.length; i++) { text += "<tr id='w"+i+"'>" + "<td>" + jsobj[i].leibie + "</td>" + "<td>" + jsobj[i].num+ "</td>" + "</tr>"; } text += "</tbody></table>"; $("#table").html(text); //將json字符串存儲在兩個一維數組中 let xxx=[]; let yyy=[]; for(let i=0;i<jsobj.length;i++){ xxx.push(jsobj[i].leibie); yyy.push(jsobj[i].num) } //柱狀圖,折線圖顯示 if (echartstype!="pie") { var option = { title: { text: '河北征集圖表顯示' }, tooltip: {}, legend: { data:['數據量'] }, xAxis: { data:xxx, axisLabel: { //橫坐標全部顯示 interval: 0, //橫坐標傾斜45度 rotate: -45, } }, yAxis: {}, series: [{ name:'數據量',//控制圖例的顯示，legend里的data可以不寫 //圖的類型 type:echartstype, data: yyy,//xAxis的data必須和series的data一一對應 }] }; }else{//如果選則的是餅圖的話 //轉換數據的格式 var array=[]; var selected = {}; for (var i=0;i<xxx.length;i++){ //構造[{value:....,name:....}]格式的數據 array.push({value:yyy[i],name:xxx[i]}); //object，圖例的選中狀態 selected[xxx[i]] = i<6; } option = { title: { text: '河北征集圖表顯示', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { type:'scroll', orient: 'vertical', left: 10, //如果 data 沒有被指定，會自動從當前系列中獲取。多數系列會取自 series.name 或者 series.encode 的 seriesName 所指定的維度 data: xxx, // selected:selected, }, series: [ { name: '出現次數', type: 'pie', radius: '55%', center: ['50%', '60%'], data: array,//name屬性控制圖例的顯示 emphasis: {//高亮的扇區和標簽樣式 itemStyle: { //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowBlur: 10, shadowOffsetX: 0,//陰影水平方向上的偏移距離。 shadowColor: 'rgba(0, 0, 0, 0.5)'//陰影顏色 } } } ] }; } // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); }, error:function () { alert("生成圖表出錯") } }) }) </script> </html>
然后說一下這個柱狀圖，折線圖用到的屬性，圖例的展示是legend--data（圖里的數據集）屬性控制的，你可以不寫data屬性。
在柱狀圖和折線圖中，如果沒有這個屬性，默認渠道series的name屬性，如果寫的話，要和series的name屬性值保持一樣。
在餅圖中如果不設置的話，默認會取到你的series--data中的name屬性值。data的寫法是[{value:....,name:.....},{.....}]。
從前端傳過來的轉換成對應的格式：
//json字符串裝為json對象
var jsobj=JSON.parse(data)；
//將json字符串存儲在兩個一維數組中
let xxx=[];
let yyy=[];
for(let i=0;i<jsobj.length;i++){ xxx.push(jsobj[i].leibie); yyy.push(jsobj[i].num) }
var array=[];
var selected = {};
for (var i=0;i<xxx.length;i++){
//構造[{value:....,name:....}]格式的數據
array.push({value:yyy[i],name:xxx[i]});
//object，圖例的選中狀態
selected[xxx[i]] = i<6;
}
折線圖和柱狀圖中，xAxis中的data要和series的data一一對應。
var jsobj=JSON.parse(data)；
//將json字符串存儲在兩個一維數組中
let xxx=[];
let yyy=[];
for(let i=0;i<jsobj.length;i++){ xxx.push(jsobj[i].leibie); yyy.push(jsobj[i].num) }
如果你注意的話會發現的每次點擊事件，都進行了一個銷毀的操作。
echarts.init(document.getElementById('main')).dispose();//銷毀前一個實例
// 基於准備好的dom，初始化echarts實例,先銷毀，在初始化
var myChart = echarts.init(document.getElementById('main'));
銷毀之后再初始化。原因是你如果進行多次查詢，圖的類型不一樣的話，會出現堆疊。如下：
就像這樣，底層會有坐標系。切記。