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

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

<%@ 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>

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

    }

}

java项目使用Echarts 做柱状堆叠图，包含点击事件的更多相关文章

highchart柱状堆叠图动态数据请求
$(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...
Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题
今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候如下图:
小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
Echarts 关系图添加点击事件
/*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...
echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
echarts 图的点击事件(含：点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题鼠标指向不同地市触发一个事件展示该地区趋势图但是但是后台中不管我第几次鼠标指向都会触发两次指向事件现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
柱状堆积图Echarts
Map<String,Object> map = new HashMap<String, Object>(); //图例的千人.双百 HashMap<String, St ...
ajax实现highchart与数据库数据结合完整案例分析（三）---柱状折线图
作者原创,未经博主允许,不可转载在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求实现highchart. 先展示一下实现的效果图: 用ajax ...
highcharts 柱形堆叠图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...

随机推荐

Nhibernate主子表查询
假如有AB两表,A为主,B为子:已知A表ID,查B表数据 ICriteria criteriaTotal = session.CreateCriteria<B>().CreateCrite ...
自构BeanHandler(用BeansUtils)
class BeanHandler<T> implements ResultSetHandler<T>{ private Class<T> clazz; publi ...
centos6.5安装vsftp服务并配置虚拟账户ftp
当我们的用户量越来越大时,继续创建更多的系统用户是不明智的,这时就需要为vsftpd创建虚拟账户,但vsftpd虚拟账户的数据库要保存在Berkeley DB格式的数据文件中,所以需要安装db4- ...
python unicode&str 转化
从数据库中取出的值是Unicode编码的需要转化为str才能正常使用参考: http://www.mamicode.com/info-detail-308445.html
Centos yum install
http://wiki.centos.org/TipsAndTricks/BrokenVserver centos mirror: http://mirror.centos.org/centos/6 ...
newman安装时遇到问题的解决
npm安装newman时系统提示需要安装.net framwork环境通过查询文档安装visual studio express: 于是安装visual studio 2012 express. 安 ...
iscc2016-好长的字符串
Vm0wd2QyVkhVWGhVYmxKV1YwZDRXRmxVUm5kVlJscHpXa2M1VjFKdGVGWlZNbmhQWVd4YWMxZHViRmROYWxaeVdWZDRZV014WkhG ...
arp欺骗
arp欺骗原理某机器A要向主机B发送报文,会查询本地的ARP缓存表,找到B的IP地址对应的MAC地址后,就会进行数据传输.如果未找到,则广播A一个ARP请求报文(携带主机A的IP地址Ia——物理地址 ...
如何调整iMindMap打印设置
打印何尝不是一种保存.导出iMindMap思维导图的一种方法,我们还可以通过调整打印设置来满足我们不同的需求.下面小编就给你翻一翻iMindMap中文版教程,教你怎样调整打印设置. 我们在打开iMin ...
Web工程软件升级之数据库升级(二)
升级前检查 1. 用户是否存在 awk -F: '{if($1 == "xxx") print $1}' /ect/passwd 用户名 awk -F: '{if($1 == &q ...

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

java项目使用Echarts 做柱状堆叠图，包含点击事件的更多相关文章

随机推荐

热门专题