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 ...

随机推荐

Core Data 教学
看了一篇国外的文章,关于iOS9的Core Data教学,在这里做了一下总结 Core Data 教学示例开源地址:LastDayCoreData 在这篇文章中我们将学习Core Data的系列教程 ...
十六、C# 常用集合类及构建自定义集合(使用迭代器)
常用集合类及构建自定义集合 1.更多集合接口:IList<T>.IDictionary<TKey,TValue>.IComparable<T>.ICollectio ...
Windows2003 下 MySQL 数据库每天自动备份
1. 环境: windows server 2003 + Apache 2.0 + PHP5 + MySQL 4.0.26 . 2. 假设 PHP 安装目录为 D:/php ,MySQL 安装目录为 ...
Perl 中级教程第5章课后习题
5. 9. 1. 练习1 [5 分钟] 先不要运行程序, 看看你能否判断出这程序的哪部份出了问题?如果你看不出来, 就可以运行一相程序, 得到些暗示, 来看是否能修改好: my %passenger ...
php基于数组的分页实现
关于数组的分页函数,用数组进行分页的好处是可以方便的进行联合多表查询,只需要将查询的结果放在数组中就可以了以下是数组分页的函数,函数page_array用于数组的分页,函数show_array用于分页 ...
plot的实践。
from matplotlib import pyplot as plt data = np.loadtxt(r'C:\Users\yinggang\Desktop\1\a.txt') x,y,z = ...
HashMap在Android和Java中的不同实现
起因今天在项目中遇到一个很"奇葩"的问题.情况大致是这样的:Android终端和服务器(Spring),完全相同的字符串键值对放入HashMap中竟然顺序不一样,这直接导致了服务 ...
01:A+B问题
总时间限制: 1000ms 内存限制: 65536kB 描述在大部分的在线题库中,都会将A+B问题作为第一题,以帮助新手熟悉平台的使用方法. A+B问题的题目描述如下:给定两个整数A和B,输出A ...
关于MYSQL优化(持续更新)
*利用MYSQL数据缓存提高效率,注意事项: 1.应用环境:不经常改变的表及对此表相同的查询 2.不适用于服务器端编写的语句 3.根据数据使用频率,合理分解表 4.合理使用默认条件,提高命中率 5.统 ...
转:Github上最受关注的前端大牛，快来膜拜吧！
原文来自于:http://code.csdn.net/news/2820990 本文列出了Github上最受关注的10位前端大牛.看看他们负责的项目和提交的代码,你是不是能从中学到些什么? 1. Pa ...

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

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

随机推荐

热门专题