javaweb生成echart3D柱状图失败

Question

javaweb通过ajax异步请求获取echart3Dpunch数据生成图表失败

以下分别是js和servlet层的代码，请各位佬帮忙看一下如何改进，一直显示不了

var Poption = {
    tooltip: {}
    ,toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    }
    ,visualMap: {
      max: 20,
          inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
          }
      }
      ,xAxis3D: {
      type: 'category'
          ,data: []
    },
    yAxis3D: {
      type: 'category'
        ,data: []
    },
    zAxis3D: {
      type: 'value'
    }
    ,grid3D: {
      boxWidth: 60
          ,boxDepth: 120
          ,viewControl: {}
          ,light: {
        main: {
          intensity: 1.2
            ,shadow: true
        }
        ,ambient: {
          intensity: 0.3
              }
          }
      }
    ,series: [
          {
            trpe: 'bar3D'
              ,name: 'data'
              ,data: []
              ,shading: 'lambert'
              ,label: {
              fontSize: 16
                  ,borderWidth: 1
              }
              ,emphasis: {
              label: {
                fontSize: 20
                  ,color: '#900'
              }
              ,itemStyle: {
                color: '#900'
                  }
              }
          }
    ]
  };
  
  function update3D() {
    $.ajax({
      url: '/ItemPunch'
      ,type: 'get'
      ,dataType: 'json'
      ,success: function (result) {
        Pchart.hideLoading();
        Pchart.setOption({
            xAxis3D: {
             data: result.row
            }
            ,yAxis3D: {
              data: result.col
            }
            ,series: [
            {
              data: result.data
            }
          ]
        });
      }
      ,error: function (error) {
        layer.msg(error);
      }
    });
  }

@WebServlet("/ItemPunch")
public class ItemPunchServlet extends HttpServlet {
    ItemData itemData = new ItemDataImpl();
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");
        
        String[] row = new String[] {"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"};
        String[] col = new String[] {"01","02","03","04","05","06","07","08","09","10"};
        int[][] data = new int[260][3];
        
        
        for (int i=0; i < 26; i++) {
            String r = row[i];
            for (int j=0; j < 10; j++) {
                String c = col[j];
                data[i*10+j][0] = i;
                data[i*10+j][1] = j;
                data[i*10+j][2] = itemData.numByAdd(r + "-" + c);
            }
        }
        
        JSONObject j = new JSONObject();
        j.put("col",col);
        j.put("row",row);
        j.put("data",data);
        
        PrintWriter pw = resp.getWriter();
        pw.write(j.toString());
        pw.flush();
        pw.close();
    }
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

这是效果图：

Answer 1

本答案参考 多次询问 ChatGPT-3.5 后选择的最佳回答，若是满意，还请采纳，谢谢

以下是对代码的分析与改进：

一、JavaScript部分（前端）

1. 变量名拼写错误

   • 在series中的trpe应该为type。这是一个简单的拼写错误，会导致Echarts无法正确识别该配置项。

2. 数据处理逻辑

   • 在update3D函数中，当更新xAxis3D、yAxis3D和series的数据时，直接替换整个配置对象的子属性可能不是最佳做法。更好的方式是使用echarts提供的setOption方法来进行部分更新。
   • 目前在success回调函数中，没有对从后端获取的数据进行充分的格式检查。如果后端返回的数据格式不符合预期，可能会导致图表无法正确显示。例如，如果result.row、result.col或者result.data不是正确的数组格式，echarts将无法正确渲染图表。

3. 初始化Pchart对象缺失

   • 在代码中没有看到Pchart对象的初始化代码。应该在使用Pchart的hideLoading、setOption等方法之前，先创建一个echarts实例并将其赋值给Pchart。例如：

     // 假设存在一个具有合适尺寸的DOM元素，其id为'chartContainer'
     var Pchart = echarts.init(document.getElementById('chartContainer'));
     

二、Java部分（后端 - Servlet）

1. 数据格式转换问题

   • 在doPost方法中，将int[][] data直接放入JSONObject中可能会导致问题。当将这个JSONObject转换为JSON字符串并发送到前端时，这个二维数组的格式可能不符合前端echarts的预期。应该将data转换为合适的格式，例如一个包含对象的数组，每个对象包含x、y和value属性（对应于i、j和itemData.numByAdd(r + "-" + c)的值）。

2. 硬编码数据问题

   • 在doPost方法中，row和col数组是硬编码的。这可能在实际应用中不够灵活。如果可能的话，这些数据应该从数据库或者其他数据源动态获取。

改进后的代码：

1. 前端JavaScript代码

// 假设存在一个具有合适尺寸的DOM元素，其id为'chartContainer'
var Pchart = echarts.init(document.getElementById('chartContainer'));

var Poption = {
    tooltip: {},
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    visualMap: {
        max: 20,
        inRange: {
            color: [
                '#313695',
                '#4575b4',
                '#74add1',
                '#abd9e9',
                '#e0f3f8',
                '#ffffbf',
                '#fee090',
                '#fdae61',
                '#f46d43',
                '#d73027',
                '#a50026'
            ]
        }
    },
    xAxis3D: {
        type: 'category',
        data: []
    },
    yAxis3D: {
        type: 'category',
        data: []
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        boxWidth: 60,
        boxDepth: 120,
        viewControl: {},
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [
        {
            type: 'bar3D',
            name: 'data',
            data: [],
            shading: 'lambert',
            label: {
                fontSize: 16,
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20,
                    color: '#900'
                },
                itemStyle: {
                    color: '#900'
                }
            }
        }
    ]
};

function update3D() {
    $.ajax({
        url: '/ItemPunch',
        type: 'get',
        dataType: 'json',
        success: function (result) {
            // 检查数据格式是否正确
            if (result && result.row && result.col && result.data) {
                // 部分更新配置
                Poption.xAxis3D.data = result.row;
                Poption.yAxis3D.data = result.col;
                Poption.series[0].data = result.data;
                Pchart.setOption(Poption);
                Pchart.hideLoading();
            } else {
                console.error('后端返回数据格式不正确');
            }
        },
        error: function (error) {
            layer.msg(error);
        }
    });
}

2. 后端Java代码（Servlet）

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ItemPunch")
public class ItemPunchServlet extends HttpServlet {
    ItemData itemData = new ItemDataImpl();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");

        String[] row = new String[]{"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
        String[] col = new String[]{"01", "02", "03", "04", "05", "06", "07", "08", "09", "10"};
        int[][] data = new int[26][10];

        List<JSONObject> dataList = new ArrayList<>();
        for (int i = 0; i < 26; i++) {
            String r = row[i];
            for (int j = 0; j < 10; j++) {
                String c = col[j];
                JSONObject dataObj = new JSONObject();
                dataObj.put("x", i);
                dataObj.put("y", j);
                dataObj.put("value", itemData.numByAdd(r + "-" + c));
                dataList.add(dataObj);
            }
        }


        JSONObject j = new JSONObject();
        j.put("col", col);
        j.put("row", row);
        j.put("data", dataList);

        PrintWriter pw = resp.getWriter();
        pw.write(j.toString());
        pw.flush();
        pw.close();
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

这里使用了fastjson库来处理JSON数据。在后端，将data转换为了一个包含对象的列表，每个对象包含x、y和value属性，这更符合echarts对数据的预期格式。在前端，对从后端获取的数据进行了格式检查，并使用setOption方法进行部分配置更新。