echarts数据下钻如何配置

官方范例:https://echarts.apache.org/examples/zh/editor.html?c=bar-multi-drilldown

看了一眼范例直接晕了,你这,一堆数据直接写死,这怎么用啊!

一般来说,实现步骤是:

1)后台:把下钻数据从数据库里拿出来

2)后台:整理成官方范例里要求的模样

3)前端:把后台处理好的数据绑定到前端

假设我有一个表mytable,其中有数据:

statistics_datemain_categorysub_categorypayment_amount
2024/3/18食品饼干46
2024/3/18食品面包66
2024/3/18服装西装88
2024/3/19食品饼干99
2024/3/19服装西装11

我要按照顺序:statistics_date>main_category>sub_category进行下钻,对应显示payment_amount的值,那么,该如何配置代码:

此处我用的是Thinkphp框架——

后台:

先看构建方法:

    
//参数说明:
//$Model:模型&$sql:sql语句  这俩都是给ThinkPHP用来连接数据库查询数据的,你可以按实际使用场景调整
//$level_sign:1普通层 2底层  因为下钻的底层的构建方式和其他层不同,所以你要告知方法这是哪一层
//$level_name_now:当前层级的名字
//$level_name_prev:上一层级的名字
//$value_name:数值的字段名
//$level_remark:层级标志,(很重要!用来建立下钻关系!)function fetchAndAssignData($Model, $sql, $level_sign, $level_name_now, $level_name_prev, $value_name, $level_remark){$list = $Model->query($sql);//查询数据库$de_json = json_decode(json_encode($list), TRUE);//将结果数组 $list 编码为 PHP 数组。如果你用的是别的方法获取数据库数据就修改这俩行代码,反正到这一步你得让$de_json里有PHP 数组。// 初始化新数组$new_array = [];$array = $de_json;foreach ($array as $item) {// 构建新数组的键名$key = $item[$level_name_prev];// 构建新数组的值(注意,底层的构建方式和其他层不同)if ($level_sign == 1) {//普通层$value = [[$item[$level_name_now], (float) $item[$value_name], $item[$level_name_prev], $item[$level_remark]]];} elseif ($level_sign == 2) {//底层$value = [[$item[$level_name_now], (float) $item[$value_name], $item[$level_name_prev]]];}// 如果新数组中已经存在相同的键名,则将值添加到已有的值数组中if (isset ($new_array[$key])) {$new_array[$key] = array_merge($new_array[$key], $value);} else {// 如果新数组中不存在相同的键名,则创建一个新的值数组$new_array[$key] = $value;}}// 将新数组编码为 JSON 格式并输出$json_data = json_encode($new_array, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);$data = $json_data;$data = substr($json_data, 1);$data = substr($data, 0, -1) . ",";//此处因为要拼接json,所以掐头去尾用逗号连接……return $data;}

再看如何调用:

//注意,按官方范例,第一层的“前一层标志”默认为'things',当然也可以改……这里就用默认
//下钻所需的各种标志(level_name_now、level_name_prev、level_remark)都直接用sql生成出来,注意我这边的写法!//初始化
$Model = M(mytable);//我这里是用的thinkphp的数据库连接方法……可以按实际情况调整
$temp = "";//创建一个空字符串用来接处理好的数据// Level-1$sql = "SELECT statistics_date, SUM(payment_amount) AS payment_amount_all, statistics_date AS level_name_now, 'things' AS level_name_prev,statistics_date AS level_remarkFROM mytableWHERE main_category IS NOT NULLAND sub_category IS NOT NULLGROUP BY statistics_date";$data = $this->fetchAndAssignData($Model, $sql, 1, 'level_name_now', 'level_name_prev', 'payment_amount_all', 'level_remark');//把模型对象(也就是查询的表),sql语句,以及各个关键的参数都发给方法fetchAndAssignData()去处理$temp .= $data;//接收方法处理好的结果//Level-2-注意看下钻所需的各种标志的写法!
$sql = "SELECT statistics_date, main_category, SUM(payment_amount) AS payment_amount_all, main_category AS level_name_now,statistics_date AS level_name_prev,concat(statistics_date, '-', main_category) AS level_remarkFROM mytableWHERE main_category IS NOT NULLAND sub_category IS NOT NULLGROUP BY statistics_date, main_category";$data = $this->fetchAndAssignData($Model, $sql, 1, 'level_name_now', 'level_name_prev', 'payment_amount_all', 'level_remark');$temp .= $data;//Level-3-注意,这是底层,所以$level_sign填2,告知方法fetchAndAssignData()用底层的方法去处理$sql = "SELECT statistics_date, main_category, sub_category, SUM(payment_amount) AS payment_amount_all, sub_category AS level_name_now,concat(statistics_date, '-', main_category) AS level_name_prev, concat(statistics_date, '-', main_category, '-', sub_category) AS level_remarkFROM mytableWHERE main_category IS NOT NULLAND sub_category IS NOT NULLGROUP BY statistics_date, main_category, sub_category";
$data = $this->fetchAndAssignData($Model, $sql, 2, 'level_name_now', 'level_name_prev', 'payment_amount_all', 'level_remark');
$temp .= $data;//结束$temp ="{".$temp."}";//最后用花括号框起来,发给前端
$this->assign("temp", $temp);//发射!

前端

前端这里当然也要优化,范例写死了,但我们实际应用肯定不能写死……

//对照官方范例就知道我改的是哪一段了……  
const dataMap={$temp}//$temp是从后端传给前端的参数
const allLevelData = [];
for (const key in dataMap) {allLevelData.push(dataMap[key]);
}const allOptions = {};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安达发|电子产品制造企业APS生产排程软件

在电子脉动的世界中,时间是芯片上的电流,效率是电路板上的速度。在这个时代,每一微秒都蕴藏着无限可能,每一决策都关乎着企业的生死存亡。APS生产排程软件,是您的电子制造帝国中的智慧大脑,以卓越的创造力&…

Sqoop【实践 02】Sqoop1最新版 全库导入 + 数据过滤 + 字段类型支持 说明及举例代码(query参数及字段类型强制转换)

Sqoop1最新版举例 1.环境说明2.import-all-tables3.query4.字段类型支持 1.环境说明 还是之前的环境: # 不必要信息不再贴出 # JDK [roottcloud ~]# java -version java version "1.8.0_251" # MySQL [roottcloud ~]# mysql -V mysql Ver 14.14 Distrib…

Vue.js:构建高效且灵活的Web应用的利器

在前端开发领域,Vue.js已经迅速崛起并获得了广大开发者的青睐。作为一个轻量级的JavaScript框架,Vue.js不仅易于上手,而且功能强大,能够帮助开发者快速构建高效且灵活的Web应用。本文将带你深入了解Vue.js的核心概念、特性以及它在…

Reactor设计模式和Reactor模型

Reactor设计模式 翻译过来就是反应堆,所以Reactor设计模式本质是基于事件驱动。 角色 Handle(事件)EventHandler(事件处理器)ConcreteEventHandler(具体事件处理器)Synchronous Event Demult…

CTR之Session行为序列建模用户兴趣:DSIN

在前面的文章中,DIN模型 在用户行为序列建模中引入注意力机制来强调加权与target item相关的行为,以实现动态的兴趣表征;而DIEN模型 则在DIN的基础上加入时间性信息,使用注意力机制的GRU来挖掘用户兴趣的演变。 而今天的这篇文章…

jspssm_maven项目——KTV点歌系统

目录 背景 技术简介 系统简介 界面预览 背景 随着互联网的广泛渗透和进步,基于网络技术的KTV点歌系统迅速壮大,其发展始终围绕用户的实际需求展开。通过深入洞察用户的需求,开发出高度定制的管理平台,利用网络的便捷性对系统…

8.软件工程

整个章节偏向于记忆、背诵; 主要议题: 软件体系:3层; UML重点,重点记3要素中的关系、图; 1.软件体系结构 分层 优点:利于软件的重复利用; 缺点:以什么方式分层&#…

音频RK809

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、目的二、知识准备2.1Audio框架2.1.1 DAI2.1.2 CODEC2.1.3 machine三、原理图3.1 整体原理图3.2 喇叭部分3.3 麦克风部分四、设备树4.1 sound 部分4.2 codec 部分五、驱动讲

用友软件公司面试总结

一、自我介绍 二、质询 1. 对本公司的了解? 2. 身边同学对你的印象,认知、评价? 3. 你觉得身边人的评价符合吗? 4. 你觉得你的优点是什么? 5. 哪里人?会粤语吗? 6. 你对公司有多少了解&a…

使用Urllib库创建第一个爬虫程序

Urllib 是 Python 的标准库,它提供了一系列用于处理 URL 的函数和类,包括发送 HTTP 请求、处理 HTTP 响应、解析 URL 等功能。可以使用 urllib 来编写简单的网络爬虫。 request:它是最基本的HTTP请求模块,可以用来模拟发送请求。只…

【JavaScript 漫游】【044】Web Worker

文章简介 本篇文章为【JavaScript 漫游】专栏的第 044 篇文章,对浏览器模型的 Web Worker 相关知识点进行了总结。 概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任…

设计模式|观察者模式(Observer Pattern)

文章目录 初识观察者模式优缺点示例代码(使用 Java 实现)有哪些知名的框架采用了观察者模式常见面试题 初识观察者模式 观察者模式(Observer Pattern)是一种软件设计模式,属于行为型模式。它定义了一种一对多的依赖关…

仿mudo库实现高并发服务器实现文章整合

相关文章实现与转载 (按实际项目流程发布) 时间轮设计-CSDN博客 正则表达式的使用-CSDN博客 bind函数的认识与基本使用-CSDN博客 timerfd的认识与基本使用-CSDN博客 Buffer缓冲区类实现(模块一)-CSDN博客 日志打印宏的编写-CSDN博客 Socket套接字类实现(模块二)-CSDN博…

C#语言规范及特殊用法笔记

前言 记录在学习C#过程中遇到的知识点,会持续更新。 1. 常用数据类型结构的默认值 创建类的一个实例时,在执行构造函数之前,如果没给成员变量赋初始值,C#编译器将每一个成员变量初始化为默认值。虽然C#编译器为每个类型都设置了…

MySQL 8.0.35 企业版开启审计audit log功能

一、系统环境和要求 在MySQL中,开启日志审计可以记录数据库的操作日志,包括修改、删除、插入等操作。这对于追踪和分析数据库的使用情况以及排查潜在的安全问题非常有帮助。本文将详细介绍如何开启MySQL的日志审计功能。 操作系统:Ubuntu 20…

人工智能 框架 paddlepaddle 飞桨 使用指南 使用例子 线性回归模型demo 1

安装过程&使用指南&线性回归模型 使用例子 本来预想 是安装 到 conda 版本的 11.7的 但是电脑没有gpu 所以 安装过程稍有变动,下面简单讲下 conda create -n paddle_env117 python=3.9 由于想安装11.7版本 py 是3.9 所以虚拟环境名称也是 paddle_env117 activa…

6 Spring-AOP

文章目录 1,AOP简介1.1 什么是AOP?1.2 AOP作用1.3 AOP核心概念 2,AOP入门案例2.1 需求分析2.2 思路分析2.3 环境准备2.4 AOP实现步骤步骤1:添加依赖步骤2:定义接口与实现类步骤3:定义通知类和通知步骤4:定义切入点步骤5:制作切面步骤6:将通知类配给容器…

数据库SQLSever——数据查询

一、无条件查询 查询表的所有信息 SELECT * FROM 表名 例:查询学生表 SELECT * FROM student087 二、根据列名查询 根据列名查询表信息 SELECT [列名],[列名],.... FROM 表名 例:查询学生表的学生学号和姓名 SELECT SNO,SNAME FROM STU…

OD_2024_C卷_100分_70、停车场车辆统计【JAVA】【逻辑分析】

题目描述 特定大小的停车场,数组cars[]表示,其中1表示有车,0表示没车。 车辆大小不一,小车占一个车位(长度1),货车占两个车位(长度2),卡车占三个车位&#…

常用设计模式介绍

前言 简说设计模式。 文章目录 前言一、设计模式的要素1、设计模式解决的问题2、设计模式分类1)创建型设计模式2)结构型设计模式3)行为型设计模式 二、详细介绍1、创建型设计模式1)工厂方法模式2)抽象工厂模式3&#x…