java项目使用Echarts 做柱状堆叠图，包含点击事件

时间：2023-02-06 23:29:20

基础知识请自行百度查看，以下直接贴出实现代码：

<%@ 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();

    }

}

相关文章