IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 求问后端数据如何传给echarts饼图里的data里 -> 正文阅读

[JavaScript知识库]求问后端数据如何传给echarts饼图里的data里

已经困扰我一个多星期了,求大佬指导,救救孩子吧
前端代码:

series: [
						{
							name: 'Nightingale Chart',
							type: 'pie',
							radius: [50, 200],
							center: ['50%', '50%'],
							roseType: 'area',
							left: '30%',
							right: '30',
							itemStyle: {
								borderRadius: 6
							},
							data:
							[
							{ value: 40, name: '医疗' },
							{ value: 38, name: '交通' },
							{ value: 32, name: '就餐' },
							{ value: 30, name: '学习' },
							{ value: 28, name: '娱乐' },
							{ value: 26, name: '其他' }

						]

DAO层:


```handlebars
public class ExpenditureRateDao extends BaseDao {
    public ExpenditureRateDao(String tableName) {
        super(tableName);
    }

    public List<Map<String,Object>> getExpenditureByUserName(Map<String,String> map){
        List<Map<String,Object>> list = null;
        List<Map<String,Object>> expenditureTypeList = null;
        String sql = "select * from expenditure,expendituretype where userName=? and expenditure.expenditureType=expendituretype.expenditureTypeId";
        list=super.executeQuery(sql,map.get("userName"));

        ExpenditureTypeDao expenditureTypeDao = new ExpenditureTypeDao("expendituretype");

        expenditureTypeList = expenditureTypeDao.getAll();

        for (Map<String,Object> map2 :expenditureTypeList){
            map2.put("sum",0);
        }
        
        // map1是支出数据
        // map2是支出类型

        for (Map<String,Object> map1 :list){
            for (Map<String,Object> map2 :expenditureTypeList){
                // 如果取出的支出数据的类型与支出类型一样
                if (Integer.parseInt(map1.get("expenditureTypeId").toString()) == Integer.parseInt(map2.get("expenditureTypeId").toString())){
                    map2.put("sum",Double.parseDouble(map2.get("sum").toString())+Double.parseDouble(map1.get("expenditure").toString()));
                    break;
                }
            }
        }

        return expenditureTypeList;
    }

}

server:

public class ExpenditureRateServer {
    public List<Map<String,Object>> getExpenditureByUserName(Map<String,String> map){
        List<Map<String,Object>> list = null;
        ExpenditureRateDao expenditureRateDao = new ExpenditureRateDao("expenditure");
        list = expenditureRateDao.getExpenditureByUserName(map);
        return list;
    }
}

servlet

@WebServlet( "/ExpenditureRateServlet")
public class ExpenditureRateServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String,String[]> maps = request.getParameterMap();
        Map<String,String> map = Util.exchange(maps);

        ExpenditureRateServer expenditureRateServer = new ExpenditureRateServer();
        List<Map<String,Object>> list = expenditureRateServer.getExpenditureByUserName(map);

        String date = JSON.toJSONString(list);
        PrintWriter printWriter = response.getWriter();
        printWriter.print(date);
        printWriter.close();
    }
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-08 13:54:34  更:2022-01-08 13:55:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:49:43-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码