使用echarts可视化无法显示后台数据

Order类代码

public class Orders {
    private String name;
    private int num;

    public Orders(String name, int num) {
        this.name = name;
        this.num = num;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getNum() {
        return num;
    }

    public void setNum(int num) {
        this.num = num;
    }
}

BarServlet代码

import com.google.gson.Gson;
import com.example.myweb01.Orders;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class BarServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        List list = new ArrayList();
        list.add(new Orders("鸭绒服", 30));
        list.add(new Orders("雪地靴", 20));
        list.add(new Orders("保暖内衣", 10));

        Gson gson = new Gson();
        String json = gson.toJson(list);
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(json);

    }
}

bar.jsp代码

<%--
  Created by IntelliJ IDEA.
  User: hhphz
  Date: 2022/12/21
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>柱形图演示title>
    <script type="text/javascript" src="js/echarts.js">script>
    <script type="text/javascript" src="js/jquery-3.5.1.js">script>
head>
<body>
<div id="main" style="width: 600px; height: 400px;">

div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"));

    myChart.setOption({
        title:{
            text: '柱形图加载数据'
        },
        tooltip:{},
        legend:{
            data:['销售量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        series:[{
            name: '销售量',
            type: 'bar',
            data: []
        }]
    });

    myChart.showLoading();

    //定义后台数据存放的数组
    var names = [];
    var nums = [];

    $.ajax({
        type: "post",
        async: true,
        url: "BarServlet",
        data: {},
        dataType: "json",
        success: function (result){
            if (result){
                for (var i=0; i.name);
                    nums.push(result[i].num);
                }
                myChart.hideLoading();
                myChart.setOption({
                    xAxis: {
                        data: names
                    },
                    series: [{
                        name: '销量',
                        data: nums
                    }]
                });
            }
        },
        error:function (errorMsg) {
            alert("图表数据请求失败");
            myChart.hideLoading();
        }
    })
script>

body>
html>

最后结果显示，预计显示出柱状图，结果却无法显示

你用的什么语言框架前端

根据您提供的代码，可能是bar.jsp中ajax请求BarServlet后台没有正确获取数据导致的。可以尝试在bar.jsp中打印获取的数据，检查是否获取到了数据。

例如在bar.jsp的ajax请求的success回调函数中加入以下代码：

console.log(result);

这样就能在浏览器的控制台中看到获取的数据。如果获取到了数据，可以再检查echarts的配置是否正确。如果没有获取到数据，则可能是后台的BarServlet代码问题，可以检查BarServlet的代码是否正确。

第2段代码也需要和第1段一样：

看了你贴出来的报错信息，404错误，检查下路径问题。