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

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

    }

}

最新文章

  1. OpenNLP：驾驭文本，分词那些事
  2. python实现汉诺塔
  3. 结对编程之Fault、Error、Failure
  4. WPF+Caliburn.Micro 杂记
  5. 黄聪：使用WORDPRESS自带AJAX方法
  6. (C#).NET 2.0 ~ 4.0 OS requirements.
  7. python md5
  8. Ubontu使用技巧
  9. 【转】CSS中position属性( absolute | relative | static | fixed )详解
  10. Ninja介绍
  11. springMVC(7)---表单标签
  12. Echarts——一个简单的嵌套饼图
  13. Vue与React的异同
  14. Docker : Tomcat Clustering with Load Balancer (Tomcat and Nginx)
  15. MSSQL和MYSQL数据库降权
  16. 让运行着的ASP.NET Web程序重新启动
  17. nil Nil NULL NSNull 之间的区别
  18. [转帖] CentOS 添加新的CA证书到认证地方
  19. 详细讲解WaterRefreshLoadMoreView的使用
  20. git 设置 代理服务器

热门文章

  1. acl操作记录
  2. iOS如何准确获取通知
  3. 设置 textField.placeholder的颜色和大小
  4. iOS中常用的正则表达式
  5. 我用Emacs，后来转向Vim——Vim学习之Vim键盘图(绝对值得珍藏)
  6. 系统默认字体Mac OS,Windows,XP,Lunix
  7. call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
  8. YII框架的部署 通过YII脚手架程序创建应用程序系统
  9. YII 验证功能
  10. [r]Ubuntu Linux系统下apt-get命令详解