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

最新推荐文章于 2024-08-09 14:25:37 发布
最新推荐文章于 2024-08-09 14:25:37 发布
阅读量450 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：http://www.cnblogs.com/Mr-Rocker/p/4165655.html
版权

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

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

 

转载于:https://www.cnblogs.com/Mr-Rocker/p/4165655.html

b129266314387022
关注
Echarts—柱状图动态获取数据示例（java版本）
邓商羽的博客
06-27 3551
最终效果 饼状图：饼状图示例，使劲点我！！！ 折线图：折线图示例，使劲点我！！！ 步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据 html代码 创建一个指定大小的dom <el-col :span="12"> <div id="chartColumn" style="width:100%; heig...
JAVA生成堆积图
03-06
java代码生成堆积图，可以生成比较直观的堆积图
echarts堆叠柱状图优化，解决较小值的bar被较大值bar遮盖的问题
最新发布
sscholar的博客
08-09 1293
需求场景需求场景我现在需要做一个这样的柱状图，一共3个系列的数据，分别为3个会议类型。从设计图上看，每种类型的会议数量在每个x轴刻度处都是堆叠在一起，可以直观看到每个会议类型在不同月份的数据，也可以看每个月份不同类型的会议的数量比较。初步思路通常我会按照正常的写法，除了给echarts的option按照设计图上的样式进行设置，还需要准备3个series项，对应3个类型的会议数量bar。
Echarts 柱状图点击事件叠加问题
zuichu_2001的博客
03-30 560
如下所示 在 this.chart.setOption({ //省略图表代码 //以下是点击事件 this.chart.on('click',function (param) { //渲染图表 _this.initChart(); } }) 业务如下 以班级为一个柱状图 然后点击该班级获取改班级每个人学习情况 所以点击柱状图刷新数据 然后使用_this.initChart();是刷新数据了但是点一下等于俩下了 创建了2次this.chart.on(‘click’,fu
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
热门推荐
qq_42396791的博客
10-10 1万+
html <div class="box" id="echartModel" style="background-color: #191e3e;"></div> js $(function(){ var myChart = echarts.init(document.getElementById('echartModel')); opti...
echarts实现堆叠柱状图或横排图
qq_27387133的博客
05-12 3830
1.实现效果： 2.关键代码： option = { tooltip: { axisPointer: { type: 'shadow' } }, title: { text: "销量数据" }, toolbox: { right: 30, feature: { dataView: { show: tr
堆叠柱状图按照百分比显示.rar
08-20
每个 `series` 对象代表一个数据系列，对于堆叠柱状图，每个系列的数据应该是分组的，即每个数据点包含了所有类别的值。例如： ```javascript var option = { xAxis: { type: 'category', data: ['类别1', '类别...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts提供了多种柱状图样式，如普通柱状图、堆叠柱状图等，可以灵活配置。 8. **数据动态更新**： 结合AJAX和Echarts，当数据库中的数据发生变化时，前端可以通过定时发送AJAX请求，获取最新数据并用Echarts更新...
springboot动态加载Echarts柱状图
08-25
Spring Boot 动态加载 ECharts 柱状图 Spring Boot 是一个基于 Java 的开源框架，用于构建 Web 应用程序。ECharts 是一个基于 JavaScript 的charts 库，用于生成各种类型的图表。在本文中，我们将详细介绍如何在 ...
echarts堆叠柱状图点击事件取id
weixin_43942765的博客
06-21 2930
普通的堆叠统计图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/jquery.min.js"></script> <script src="lib/esl.js"></script> <script src="li
echarts多维条形图 柱状图作图
07-22
echarts多维条形图 柱状图作图，来自官网代码，图形化 展示 大数据 信息
处理echarts堆叠柱状图的legend点击事件legendselectchanged
CherryLee_1210的博客
09-20 1万+
这个效果是三个柱子堆叠而成。 data.nian = data.nian.map((item, index) => { return `${item}年` }) let chart = echarts.init(document.getElementById('school-building-chart')) let arr = []; let datas = [] fo...
java为后台echarts在地图上各个区域显示叠加柱状图
qq_41474597的博客
10-12 1473
简单分三步 数据库 后台 前台 数据库 我们在数据库通常都会根据每一个区域进行分组查询，剩下的根据业务需求就可以了，以下为我在写项目的时候写的sql select count(*) projectCount, consType, bct.name addr_scope from (select zr_deptId, CASE ...
echarts 堆叠柱状图多柱堆叠，每条柱子堆叠内容以及数量不同
cocos2dx zzzzz
10-21 2685
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，在开发中遇到了这样的一个需求：有多个分公司，每个公司污染物类型差距很大，有些公司有这几个污染物，有些公司又没有这几个污染物，这就导致堆叠的时候echarts的series堆叠的种类以及数据无法对应到每一个公司，用echarts现有的堆叠柱状图无法满足，所以吭哧吭哧鼓捣了一早上，最终还是实现了这个需求。
java - (highCharts)柱状图生成及美化
weixin_44462773的博客
12-01 1462
柱状图生成及美化一、基本柱状图1、效果示例2、java代码实现2.1 柱状图封装类2.2 调用类2.3 基础数据类二、柱状图的3D效果设置1、效果示例2、代码实现三、堆叠柱状图1、效果示例2、代码实现 一、基本柱状图 参考Highcharts官网. 本次我们来介绍一下如何通过封装的highcharts jar包，来实现java端柱状图的生成及美化。 1、效果示例 2、java代码实现 2.1 柱状图封装类 import org.moxieapps.gwt.highcharts.client.Chart;
echarts实现可视化堆叠柱状图
A_z2019的博客
05-15 2171
echarts实现堆叠柱状图
双柱状图Java_JFreeChart之堆叠柱形图(StackedBar)
weixin_39561673的博客
02-23 799
1package com.springapp.jfreechar;23import java.awt.Color;4import java.awt.Font;5import java.awt.Graphics2D;6import java.awt.geom.Rectangle2D;7import java.text.DecimalFormat;8import java.text.NumberFor...
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
https://gitee.com/micai-code
06-13 4569
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
echarts立体柱状堆叠图折线图
09-13
关于echarts立体柱状堆叠图和折线图的使用，您可以按照以下步骤进行操作： 1. 首先，确保您已经引入了echarts库。可以通过在HTML文件中添加如下代码来引入： ``` <script src="https://cdn.jsdelivr.net/npm/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值