基礎知識請自行百度查看，以下直接貼出實現代碼：
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<% String year = request.getParameter("riskYear");
String actionType = request.getParameter("actionType");
%>
</head>
<body>
<div id="main" style="height:153px;"></div>
<!-- ECharts單文件引入 -->
<script src="/ri/common/echarts/dist/echarts-all.js"></script>
<script src="/ri/common/echarts/dist/echarts.js"></script>
<script src="/ri/common/echarts/dist/jquery-1[1].2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var mainDiv = document.getElementById('main');
var option = {
grid : {
x: 30,
y: 30,
x2: 0,
y2: 10
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: {
data:[]
},
toolbox: {
show : false,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisLabel : {
show:false,
interval:0
},
data : [] //'周一','周二','周三','周四','周五','周六','周日'
}
],
yAxis : [
{
type : 'value'
}
],
series : []
};
//采用ajax異步請求數據
$.ajax({
type:'post',
url:'<%=request.getContextPath() %>/EchartsServlet?year=<%= year%>&actionType=<%= actionType%>',
dataType:'json',
success:function(result){
if(result.length>0){
//將返回的category和series對象賦值給options對象內的category和series
option.xAxis[0].data = result[0].category;
option.legend.data = result[0].legend;
option.color = result[0].legendColorList;
var series_arr=result[0].series;
for(var i=0;i<series_arr.length;i++){
option.series[i] = series_arr[i];
option.series[i].stack = 'risk';
}
if(result[0].category.length<7){
mainDiv.style.width = 680 ;
}else{
mainDiv.style.width = result[0].category.length*100;
}
var myChart = echarts.init(mainDiv);
myChart.setOption(option);
// 路徑配置
require.config({
paths: {
echarts: '/ri/common/echarts/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
var ecConfig = require('echarts/config');
function eConsole(param) {
if (typeof param.seriesIndex != 'undefined') {
var url = '/ri/NRCSAManagerController.do?action=getRiskScoreList'
+'&actionType=<%= actionType%>&year=<%= year%>'
+'&orgID='+result[0].orgId[param.dataIndex]
+'&clickIndex'+(param.seriesIndex+1);
window.open(url,'','width=800,height=480,resizable=yes');
}
}
myChart.on(ecConfig.EVENT.CLICK, eConsole);
myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
}
)
}
},
error:function(errMsg){
alert("不好意思，圖表請求數據失敗啦!");
}
});
</script>
</body>
</html>
后台代碼實現如下：
package com.riskintegrator.servlet.report; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import com.riskintegrator.ejb.user.UserData; import com.riskintegrator.slsb.lem.LEMBD; import com.riskintegrator.slsb.report.EchartForm; import com.riskintegrator.slsb.report.EchartRiskBD; import com.riskintegrator.slsb.report.SeriesForm; import edu.emory.mathcs.backport.java.util.Collections; public class EchartsServlet extends HttpServlet { private static final long serialVersionUID = -6497480146173707253L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String jsonString = ""; try { HttpSession session = request.getSession(true); UserData udt = (UserData)session.getAttribute("user"); String orgID = udt.getorgID(); String year = request.getParameter("year"); String actionType = request.getParameter("actionType"); LEMBD LBD = new LEMBD(); String companyOrgId = LBD.getCompanyId(orgID); EchartRiskBD BD = new EchartRiskBD(); List<EchartForm> riskOrgList = BD.getAllRiskMessageByCondition(year,companyOrgId); if(riskOrgList.size() == 0){ JSONArray json = new JSONArray(); jsonString = json.toString(); }else if("riskAssess".equalsIgnoreCase(actionType)){ jsonString = doriskAssess(riskOrgList); }else if("riskKPI".equalsIgnoreCase(actionType)){ jsonString = doriskKPI(riskOrgList); }else if("Assessment".equalsIgnoreCase(actionType)){ jsonString = doAssessment(riskOrgList); }else if("riskControl".equalsIgnoreCase(actionType)){ jsonString = doriskControl(riskOrgList); } } catch (Exception e) { } response.setContentType("text/html;charset=utf-8"); PrintWriter out=response.getWriter(); out.println(jsonString); out.flush(); out.close(); } public String doriskAssess(List<EchartForm> riskOrgList) throws Exception{ //{"低","中","較高","高"} List<String> legendList = new ArrayList<String>(); //設置legend顏色 List<String> legendColorList = new ArrayList<String>(); //category--orgName List<String> categoryList = new ArrayList<String>(); //orgid List<String> orgIdList = new ArrayList<String>(); //series List<SeriesForm> seriesList = new ArrayList<SeriesForm>(); //設置legend數組 legendList.add("低"); //這里的名稱必須和series的每一組series的name保持一致 legendList.add("中"); legendList.add("較高"); legendList.add("高"); //設置顏色 legendColorList.add("#0C0"); legendColorList.add("#FFC"); legendColorList.add("#FC3"); legendColorList.add("#F00"); SeriesForm series1 = new SeriesForm(); series1.setId(1); series1.setName("低"); series1.setType("bar"); List<Integer> seriesData1 = new ArrayList<Integer>(); SeriesForm series2 = new SeriesForm(); series2.setId(2); series2.setName("中"); series2.setType("bar"); List<Integer> seriesData2 = new ArrayList<Integer>(); SeriesForm series3 = new SeriesForm(); series3.setId(3); series3.setName("較高"); series3.setType("bar"); List<Integer> seriesData3 = new ArrayList<Integer>(); SeriesForm series4 = new SeriesForm(); series4.setId(4); series4.setName("高"); series4.setType("bar"); List<Integer> seriesData4 = new ArrayList<Integer>(); EchartsComparator comparator=new EchartsComparator("riskAssess"); Collections.sort(riskOrgList, comparator); for(EchartForm form : riskOrgList){ orgIdList.add(form.getOrgid());//機構ID //加入category categoryList.add(form.getOrgName());//機構名稱 //加入數據值series序列數組 這里提供為了效果只提供一組series數據好了 seriesData1.add(Integer.parseInt(form.getSCORE_LEVEL1()));//風險評估--低 seriesData2.add(Integer.parseInt(form.getSCORE_LEVEL2()));//風險評估--中 seriesData3.add(Integer.parseInt(form.getSCORE_LEVEL3()));//風險評估--較高 seriesData4.add(Integer.parseInt(form.getSCORE_LEVEL4()));//風險評估--高 } series1.setData(seriesData1); series2.setData(seriesData2); series3.setData(seriesData3); series4.setData(seriesData4); seriesList.add(series1); seriesList.add(series2); seriesList.add(series3); seriesList.add(series4); JSONArray json = new JSONArray(); JSONObject jo = new JSONObject(); jo.put("legend", legendList); jo.put("legendColorList", legendColorList); jo.put("orgId", orgIdList); jo.put("category", categoryList); jo.put("series", seriesList); json.add(jo); return json.toString(); } public String doriskKPI(List<EchartForm> riskOrgList) throws Exception{ //{"低","中","較高","高"} List<String> legendList = new ArrayList<String>(); //設置legend顏色 List<String> legendColorList = new ArrayList<String>(); //category--orgName List<String> categoryList = new ArrayList<String>(); //orgid List<String> orgIdList = new ArrayList<String>(); //series List<SeriesForm> seriesList = new ArrayList<SeriesForm>(); //設置legend數組 legendList.add("低"); //這里的名稱必須和series的每一組series的name保持一致 legendList.add("中"); legendList.add("較高"); legendList.add("高"); //設置顏色 legendColorList.add("#0C0"); legendColorList.add("#FFC"); legendColorList.add("#FC3"); legendColorList.add("#F00"); SeriesForm series1 = new SeriesForm(); series1.setId(1); series1.setName("低"); series1.setType("bar"); List<Integer> seriesData1 = new ArrayList<Integer>(); SeriesForm series2 = new SeriesForm(); series2.setId(2); series2.setName("中"); series2.setType("bar"); List<Integer> seriesData2 = new ArrayList<Integer>(); SeriesForm series3 = new SeriesForm(); series3.setId(3); series3.setName("較高"); series3.setType("bar"); List<Integer> seriesData3 = new ArrayList<Integer>(); SeriesForm series4 = new SeriesForm(); series4.setId(4); series4.setName("高"); series4.setType("bar"); List<Integer> seriesData4 = new ArrayList<Integer>(); EchartsComparator comparator=new EchartsComparator("riskKPI"); Collections.sort(riskOrgList, comparator); for(EchartForm form : riskOrgList){ orgIdList.add(form.getOrgid());//機構ID //加入category categoryList.add(form.getOrgName());//機構名稱 //加入數據值series序列數組 這里提供為了效果只提供一組series數據好了 seriesData1.add(Integer.parseInt(form.getKRI_LEVEL1()));//風險指標--低 seriesData2.add(Integer.parseInt(form.getKRI_LEVEL2()));//風險指標--中 seriesData3.add(Integer.parseInt(form.getKRI_LEVEL3()));//風險指標--較高 seriesData4.add(Integer.parseInt(form.getKRI_LEVEL4()));//風險指標--高 } series1.setData(seriesData1); series2.setData(seriesData2); series3.setData(seriesData3); series4.setData(seriesData4); seriesList.add(series1); seriesList.add(series2); seriesList.add(series3); seriesList.add(series4); JSONArray json = new JSONArray(); JSONObject jo = new JSONObject(); jo.put("legend", legendList); jo.put("orgId", orgIdList); jo.put("legendColorList", legendColorList); jo.put("category", categoryList); jo.put("series", seriesList); json.add(jo); return json.toString(); } public String doAssessment(List<EchartForm> riskOrgList) throws Exception{ //{"問題缺陷"} List<String> legendList = new ArrayList<String>(); //設置legend顏色 List<String> legendColorList = new ArrayList<String>(); //category--orgName List<String> categoryList = new ArrayList<String>(); //orgid List<String> orgIdList = new ArrayList<String>(); //series List<SeriesForm> seriesList = new ArrayList<SeriesForm>(); //設置legend數組 legendList.add("問題缺陷"); //這里的名稱必須和series的每一組series的name保持一致 //設置顏色 legendColorList.add("#F63"); SeriesForm series1 = new SeriesForm(); series1.setId(1); series1.setName("問題缺陷"); series1.setType("bar"); List<Integer> seriesData1 = new ArrayList<Integer>(); EchartsComparator comparator=new EchartsComparator("Assessment"); Collections.sort(riskOrgList, comparator); for(EchartForm form : riskOrgList){ orgIdList.add(form.getOrgid());//機構ID //加入category categoryList.add(form.getOrgName());//機構名稱 //加入數據值series序列數組 這里提供為了效果只提供一組series數據好了 seriesData1.add(Integer.parseInt(form.getISS_LEVEL1()));//檢查評價--問題缺陷 } series1.setData(seriesData1); seriesList.add(series1); JSONArray json = new JSONArray(); JSONObject jo = new JSONObject(); jo.put("legend", legendList); jo.put("orgId", orgIdList); jo.put("legendColorList", legendColorList); jo.put("category", categoryList); jo.put("series", seriesList); json.add(jo); return json.toString(); } public String doriskControl(List<EchartForm> riskOrgList) throws Exception{ //{"有效","失效"} List<String> legendList = new ArrayList<String>(); //設置legend顏色 List<String> legendColorList = new ArrayList<String>(); //category--orgName List<String> categoryList = new ArrayList<String>(); //orgid List<String> orgIdList = new ArrayList<String>(); //series List<SeriesForm> seriesList = new ArrayList<SeriesForm>(); //設置legend數組 legendList.add("有效"); //這里的名稱必須和series的每一組series的name保持一致 legendList.add("失效"); //設置顏色 legendColorList.add("#0C0"); legendColorList.add("#F63"); SeriesForm series1 = new SeriesForm(); series1.setId(1); series1.setName("有效"); series1.setType("bar"); List<Integer> seriesData1 = new ArrayList<Integer>(); SeriesForm series2 = new SeriesForm(); series2.setId(2); series2.setName("失效"); series2.setType("bar"); List<Integer> seriesData2 = new ArrayList<Integer>(); EchartsComparator comparator=new EchartsComparator("riskControl"); Collections.sort(riskOrgList, comparator); for(EchartForm form : riskOrgList){ orgIdList.add(form.getOrgid());//機構ID //加入category categoryList.add(form.getOrgName());//機構名稱 //加入數據值series序列數組 這里提供為了效果只提供一組series數據好了 seriesData1.add(Integer.parseInt(form.getCM_LEVEL1()));//控制監測--有效 seriesData2.add(Integer.parseInt(form.getCM_LEVE2()));//控制監測--失效 } series1.setData(seriesData1); series2.setData(seriesData2); seriesList.add(series1); seriesList.add(series2); JSONArray json = new JSONArray(); JSONObject jo = new JSONObject(); jo.put("legend", legendList); jo.put("orgId", orgIdList); jo.put("legendColorList", legendColorList); jo.put("category", categoryList); jo.put("series", seriesList); json.add(jo); return json.toString(); } }