文本图片审核，邮件发送，Excel，Echarts报表

最新推荐文章于 2024-09-30 17:00:00 发布

JadeSpring11

最新推荐文章于 2024-09-30 17:00:00 发布

阅读量129

点赞数

文章标签： excel dubbo

本文链接：https://blog.csdn.net/2201_75971147/article/details/134659170

版权

一. 审核

1. 业务

1.1. 流程

用户提交资料，然后平台进行审核，审核通过后向商家发送一封激活邮件，商家需要通过激活链接去激活，激活之后商家可正常登陆

1.2. 为什么需要审核

例如：

首先，店铺入驻的地址是公开的，任意用户都能访问。那么有些恶意访问用户可能会提交一些具有侮辱、暴力、非法宣传的店铺名字，以及店铺logo提交一些涉黄、涉毒、涉赌、恶心、血腥暴力的图片

1.3. 店铺审核分类

1. 自动审核
   百度AI【花钱 - 免费试用次数】：
       对店铺的名称进行非法字符审核：就是将输入的文本拿到百度的文本库去比对
       对店铺的logo进行审核：就是将传入的图片拿到百度的图片库【很大，很多】去比对
2. 人工审核
   准备店铺管理页面
   提供审核功能
   审核的结果
       通过
           修改店铺状态为待激活
           保存审核日志
           发送激活邮件
       驳回
           修改店铺状态为驳回
           保存审核日志
           发送重新入驻的邮件

2. 自动审核

2.1. 什么是自动审核

针对图像、文本、语音、视频等多媒体内容，提供全方位的审核能力，覆盖涉政、涉黄、涉恐、恶意推广、低质灌水等内容自动鉴别

2.2. 百度AI 内容审核功能

以上的功能需要使用到图像识别功能。如果要自己实现是需要花费大量的时间以及人力。我们项目里面可以直接使用第三方提供的功能百度AI 的内容审核功能内容审核_内容安全_智能审核-百度AI开放平台

二. 百度AI智能审核

百度AI的内容审核功能：https://ai.baidu.com/solution/censoring
百度智能云-管理中心：(https://console.bce.baidu.com/ai/#/ai/antiporn/overview/index)
API文档：https://ai.baidu.com/ai-doc/ANTIPORN/Rk3h6xb3i

1. 准备工作

1.1. 内容审核平台

浏览器打开百度智能云-管理中心 (baidu.com)，注册并登录百度账号/也可以百度App扫码登录，进入内容审核的控制台。

注意：请先实名！

1.2. 领取“免费尝鲜”

1.3. 点击“前往应用列表”创建应用

1.4. 配置审核策略

在应用列表页面，点击“配置审核策略”

这里啥都不做，使用默认策略即可，因为已经比较齐全了，没必要自定义会很麻烦。

2. 查看文档

官方文档地址：https://ai.baidu.com/ai-doc/ANTIPORN/Rk3h6xb3i

从文档中我们可以分析出：

百度AI给我们提供了各种各样的审核接口，我们只需要调用相应的接口就可以完成审核
我们调用接口需要通过申明的账号的key和秘钥先获取访问令牌（相当于登陆之后才能使用）
携带access_token才能去调用各种审核接口

第一步：书写配置文件

# 百度内容审核的配置信息
baidu:
ai:
api-key: VCvfCtmECy0yznVWO34xQpsz
securet-key: CHqfePIKM3wE8XEpgCnOS4oY6lrpf4m6

第二步：引入依赖

<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
</dependency>


<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.58</version>
</dependency>

第三步：引入HttpUtil工具类，复制以下代码即可

package com.dw.util;

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;
import java.util.Map;

public class HttpUtil {
public static String post(String requestUrl, String accessToken, String params)
throws Exception {
String contentType = "application/x-www-form-urlencoded";
return HttpUtil.post(requestUrl, accessToken, contentType, params);
}

public static String post(String requestUrl, String accessToken, String contentType, String params)
throws Exception {
String encoding = "UTF-8";
if (requestUrl.contains("nlp")) {
encoding = "GBK";
}
return HttpUtil.post(requestUrl, accessToken, contentType, params, encoding);
}

public static String post(String requestUrl, String accessToken, String contentType, String params, String encoding)
throws Exception {
String url = requestUrl + "?access_token=" + accessToken;
return HttpUtil.postGeneralUrl(url, contentType, params, encoding);
}

public static String postGeneralUrl(String generalUrl, String contentType, String params, String encoding)
throws Exception {
URL url = new URL(generalUrl);
// 打开和URL之间的连接
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("POST");
// 设置通用的请求属性
connection.setRequestProperty("Content-Type", contentType);
connection.setRequestProperty("Connection", "Keep-Alive");
connection.setUseCaches(false);
connection.setDoOutput(true);
connection.setDoInput(true);

// 得到请求的输出流对象
DataOutputStream out = new DataOutputStream(connection.getOutputStream());
out.write(params.getBytes(encoding));
out.flush();
out.close();

// 建立实际的连接
connection.connect();
// 获取所有响应头字段
Map<String, List<String>> headers = connection.getHeaderFields();
// 遍历所有的响应头字段
for (String key : headers.keySet()) {
System.err.println(key + "--->" + headers.get(key));
}
// 定义 BufferedReader输入流来读取URL的响应
BufferedReader in = null;
in = new BufferedReader(
new InputStreamReader(connection.getInputStream(), encoding));
String result = "";
String getLine;
while ((getLine = in.readLine()) != null) {
result += getLine;
}
in.close();
System.err.println("result:" + result);
return result;
}
}

第四步：创建百度AI审核的工具类

package com.dw.util;

import com.alibaba.fastjson.JSONObject;
import lombok.SneakyThrows;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.beans.factory.annotation.Value;

import java.net.URLEncoder;

@Component
public class BaiduAiUtil {

@Value("${baidu.ai.api-key}")
private String client_id;

@Value("${baidu.ai.securet-key}")
private String client_secret;

@SneakyThrows
public String getAuth(){
String accessTokenUrl = "https://aip.baidubce.com/oauth/2.0/token?"
// 1. grant_type为固定参数
+ "grant_type=client_credentials"
// 2. 官网获取的 API Key
+ "&client_id=" + client_id
// 3. 官网获取的 Secret Key
+ "&client_secret=" + client_secret;
// 1.创建httpclient
CloseableHttpClient httpClient = HttpClients.createDefault();
//2. 创建HttpGet，设置URL访问地址
HttpGet httpGet = new HttpGet(accessTokenUrl);
// 3. 请求执行，获取响应
CloseableHttpResponse response = httpClient.execute(httpGet);
// 4.获取响应实体
HttpEntity entity = response.getEntity();
// 5.转为JSON字符串
String strOfEntity = EntityUtils.toString(entity, "utf-8");
// 6.使用fastjson转为JSONObject
JSONObject jsonObject = JSONObject.parseObject(strOfEntity);
// 7.获取其中的字段值
String access_token = jsonObject.getString("access_token");
// 8.关闭资源
response.close();
httpClient.close();
return access_token;
}

/**
* 文本审核
* @param param：需要审核的文本
* @return
*/
public Boolean TextCensor(String param) {
// 请求url
String url = "https://aip.baidubce.com/rest/2.0/solution/v1/text_censor/v2/user_defined";
try {
// 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间，客户端可自行缓存，过期后重新获取。
String accessToken = getAuth();
//处理参数格式
param = "text=" + param;
String result = HttpUtil.post(url, accessToken, param);
JSONObject jsonObject= JSONObject.parseObject(result);
String conclusion = jsonObject.getString("conclusion");
if ("合规".equals(conclusion)){
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}

/**
* 图片审核
* @param imageUrl 需要审核的图片路径地址
* @return
*/
public Boolean ImgCensor(String imageUrl) {
// 请求url
String url = "https://aip.baidubce.com/rest/2.0/solution/v1/img_censor/v2/user_defined";
try {
//图片地址进行编码
String imgParam = URLEncoder.encode(imageUrl, "UTF-8");
//设置参数
String param = "imgUrl=" + imgParam;
// 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间，客户端可自行缓存，过期后重新获取。
String accessToken = getAuth();

String result = HttpUtil.post(url, accessToken, param);
JSONObject jsonObject= JSONObject.parseObject(result);
String conclusion = jsonObject.getString("conclusion");
if ("合规".equals(conclusion)){
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
}

4. 项目融入自动审核验证

上面的工具类把文本验证以及图片验证抽取成另个方法，在用户提交店铺数据保存之前去验证用户数据。

在basic下的exception包中添加全局异常

public class ExamineException extends RuntimeException{
public ExamineException() {
}
public ExamineException(String message) {
super(message);
}
}

修改ShopServiceImpl类

@Override
@Transactional
public void settlement(Shop shop){
//一：检验
// 代码省略...

   // 百度AI平台审核
if (!baiduAiUtil.TextCensor(shop.getName())){
   throw new ExamineException("店铺名称不合法，请重新输入！");
}

//二：入驻业务
// 代码省略...
}

修改ShopController类

/**
* 接口：店铺入驻
* @param
* @return
*/
@PostMapping("/settlement")
@ApiOperation(value = "店铺入驻")
public AjaxResult settlement(@RequestBody Shop shop){
try {
shopService.settlement(shop);
return AjaxResult.me().setSuccess(true).setMessage("操作成功");
} catch (BusinessException e) {
e.printStackTrace();
return AjaxResult.me().setSuccess(false).setMessage("入驻失败，" + e.getMessage());
} catch (ExamineException e) {
e.printStackTrace();
return AjaxResult.me().setSuccess(false).setMessage("入驻失败，" + e.getMessage());
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.me().setSuccess(false).setMessage("系统繁忙，请稍后重试!!!");
}
}

四. 邮件发送

3. 发送邮件

3.1. 邮件发送原理

发件人【设置授权码】 - SMTP协议【Simple Mail TransferProtocol - 是一种提供可靠且有效的电子邮件传输的协议】 - 收件人

3.2. 获取授权码

开通POP3/SMTP，获取授权码

授权码是QQ邮箱推出的，用于登录第三方客户端的专用密码。适用于登录以下服务：POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务。

温馨提醒：为了你的帐户安全，更改QQ密码以及独立密码会触发授权码过期，需要重新获取新的授权码登录

第一步：进入邮箱设置 -> 账户 -> 生成授权码：【注意】POP3/SMTP ,IMAP/SMTP服务都需要开启

第二步：生成授权码，授权码用来发送邮件用

第三部：根据提示发送短信，然后得到授权码

第四步：授权码如下，需要记录下来

4. SpringBoot中邮件发送

4.1. 发送邮件步骤

1. 选择一个邮件服务商：QQ - smtp.qq.com
2. 获取授权码
3. 导包
4. 配置文件
5. 注入使用JavaMailSender
注意事项：163和126邮箱要检查邮件中是否有未许可的信息，所有最好用qq邮箱作为发送方。而且发送方邮箱账号就是配置中的邮箱账号

4.1. 导入依赖

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>

4.2. 配置邮箱

spring:
mail:
host: smtp.qq.com # 设置邮箱主机(服务商),这里使用QQ邮件服务器
username: 1456868501@qq.com # 设置用户名 - 发送方
password: nscrlhscrzwsiiea # 设置密码，该处的密码是QQ邮箱开启SMTP的授权码而非QQ密码
properties:
mail:
smtp:
auth: true # 必须进行授权认证，它的目的就是阻止他人任意乱发邮件
starttls: #SMTP加密方式:连接到一个TLS保护连接
enable: true
required: true

4.3. 发送简单邮件

@SpringBootTest(classes = ApplicationStart.class)
@RunWith(SpringJUnit4ClassRunner.class)
public class EmailTest {

@Autowired
private JavaMailSender javaMailSender;

@Test
public void send1(){
SimpleMailMessage mailMessage = new SimpleMailMessage();
//设置发送人
mailMessage.setFrom("1104829999@qq.com");
//邮件主题
mailMessage.setSubject("新型冠状病毒防护指南");
//邮件内容：普通文件无法解析html标签
mailMessage.setText("<h1>好好在家待着.....</h1>");
//收件人
mailMessage.setTo("659769499@qq.com");
//发送邮件
javaMailSender.send(mailMessage);
}
}

4.4. 发送复杂邮件

@Test
public void send2() throws MessagingException {
//创建复杂邮件对象
MimeMessage mimeMessage = javaMailSender.createMimeMessage();
//发送复杂邮件的工具类
MimeMessageHelper helper = new MimeMessageHelper(mimeMessage,true,"utf-8");
helper.setFrom("1104829999@qq.com");
helper.setSubject("店铺激活邮件");
helper.setText("<h1>你的店铺已经注册!!!</h1><img src='http://dfs.java.itsource.cn/group1/M00/00/B9/rBE3kWD_fEuALou2AAB4rV4bI7c231.jpg' ><a href='http://localhost:8080/shop/active/22'>点击该链接激活</a>",true);
//添加附件
helper.addAttachment("p7.jpg",new File("C:\\Users\\Administrator\\Pictures\\photos\\p7.jpg"));
helper.addAttachment("g1.gif", new File("C:\\Users\\Administrator\\Pictures\\g1.gif"));
//收件人
helper.setTo("659769499@qq.com");
javaMailSender.send(mimeMessage);
}

五. Excel的导入与导出

导入：将文档中数据导入到内存中，后续可以添加到数据库

导出：将内存中的数据或数据库中查询的数据导出到文档中

注意：这里指的文档通常指的是基本的办公软件：word，excel，ppt

绝大多数公司都在使用word和excel，如果我们开发的系统支持导入导出，我们开发的软件就相对会有优势

1. 业务场景

案例1：
   公司举行活动时的签到表
       由系统运营人员将公司所有在职员工的信息导出为excel
       由公司后勤或行政人员对excel表进行修改，然后打印进行签到
案例2：
   采购清单
       后勤人员录入信息到excel
       系统维护人员将excel导入到数据库
   业务员线下推广收集用户数据，后面集中批量添加到数据库

2. Java操作办公软件

在开发中，我们经常需要写程序操作办公软件【其中操作得最多的就是Word与Excel】！因此我们使用代码生成，读取这些文件的数据也是很重要的一个功能

Java中提供了相应的操作办公软件的框架，其中，最常用的是下面两种：

jxl：只能对Excel进行操作，属于比较老的框架。

POI：是apache的项目，可对ms的word，Excel，PPT进行操作，包括office2003和2007。对两种版本的处理都比较好。具体操作请看官方的文档

3. POI的使用

咱们这里直接学习poi的使用,poi针对offices03（xls）与07(xlsx)是单独写了相应的实现api,我们这里直接使用07版的处理方案(注：网上是有相应的兼容方案，可判断)

学习poi，面向度娘编程，随便找一篇文章，一看就会。引用文章：EasyPOI 详细教程以及注解的使用_easypoi-annotation-CSDN博客

4. EasyPOI导出数据

为了提高开发效率，我们这里使用easyPOI进行数据的导入导出

easypoi导入/导出excel其实就是domain对象属性和excel列的映射，而easypoi是通过注解的方式来做映射的，我们学习easypoi其实就是学会使用工具类和掌握它的常用注解

常见的注解有：

@Excel 作用到filed上面,是对Excel一列的一个描述
@ExcelCollection 表示一个集合,主要针对一对多的导出,比如一个老师对应多个科目,科目就可以用集合表示
@ExcelEntity 表示一个继续深入导出的实体,但他没有太多的实际意义,只是告诉系统这个对象里面同样有导出的字段

@ExcelIgnore 和名字一样表示这个字段被忽略跳过这个导导出
@ExcelTarget 这个是作用于最外层的对象,描述这个对象的id,以便支持一个对象可以针对不同导出做出不同处理

4.1. 导包

<dependency>
<groupId>cn.afterturn</groupId>
<artifactId>easypoi-base</artifactId>
<version>4.2.0</version>
</dependency>
<dependency>
<groupId>cn.afterturn</groupId>
<artifactId>easypoi-web</artifactId>
<version>4.2.0</version>
</dependency>
<dependency>
<groupId>cn.afterturn</groupId>
<artifactId>easypoi-annotation</artifactId>
<version>4.2.0</version>
</dependency>

4.2. 添加工具类

package com.dw.utils;

import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.ExcelImportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.ImportParams;
import cn.afterturn.easypoi.excel.entity.enmus.ExcelType;
import org.apache.commons.lang3.StringUtils;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;
import java.util.NoSuchElementException;

/**
* Excel导入导出工具类
* @author hm
*/
public class ExcelUtil {

/**
* 导出工具类
* @param list
* @param title
* @param sheetName
* @param pojoClass
* @param fileName
* @param isCreateHeader
* @param response
*/
public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass,
String fileName, boolean isCreateHeader, HttpServletResponse response){
ExportParams exportParams = new ExportParams(title, sheetName);
exportParams.setCreateHeadRows(isCreateHeader);
defaultExport(list, pojoClass, fileName, response, exportParams);
}

/**
* 导出工具类
* @param list
* @param title
* @param sheetName
* @param pojoClass
* @param fileName
* @param response
*/
public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass,String fileName,
HttpServletResponse response){
defaultExport(list, pojoClass, fileName, response, new ExportParams(title, sheetName));
}

public static void exportExcel(List<Map<String, Object>> list, String fileName, HttpServletResponse response){
defaultExport(list, fileName, response);
}

private static void defaultExport(List<?> list, Class<?> pojoClass, String fileName,
HttpServletResponse response, ExportParams exportParams) {
Workbook workbook = ExcelExportUtil.exportExcel(exportParams,pojoClass,list);
if (workbook != null); downLoadExcel(fileName, response, workbook);
}

private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) {
try {
response.setCharacterEncoding("UTF-8");
response.setHeader("content-Type", "application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
workbook.write(response.getOutputStream());
} catch (IOException e) {
//throw new NormalException(e.getMessage());
}
}

private static void defaultExport(List<Map<String, Object>> list, String fileName, HttpServletResponse response) {
Workbook workbook = ExcelExportUtil.exportExcel(list, ExcelType.HSSF);
if (workbook != null);
downLoadExcel(fileName, response, workbook);
}

public static <T> List<T> importExcel(String filePath,Integer titleRows,Integer headerRows, Class<T> pojoClass){
if (StringUtils.isBlank(filePath)){
return null;
}
ImportParams params = new ImportParams();
params.setTitleRows(titleRows);
params.setHeadRows(headerRows);
List<T> list = null;
try {
list = ExcelImportUtil.importExcel(new File(filePath), pojoClass, params);
}catch (NoSuchElementException e){
//throw new NormalException("模板不能为空");
} catch (Exception e) {
e.printStackTrace();
//throw new NormalException(e.getMessage());
} return list;
}

public static <T> List<T> importExcel(MultipartFile file, Integer titleRows, Integer headerRows, Class<T> pojoClass){
if (file == null){ return null;
}
ImportParams params = new ImportParams();
params.setTitleRows(titleRows);
params.setHeadRows(headerRows);
List<T> list = null;
try {
list = ExcelImportUtil.importExcel(file.getInputStream(), pojoClass, params);
}catch (NoSuchElementException e){
// throw new NormalException("excel文件不能为空");
} catch (Exception e) {
//throw new NormalException(e.getMessage());
System.out.println(e.getMessage());
}
return list;
}
}

4.3. 前端请求导出数据

需求：将所有店铺的信息导出到Excel

exportData(){
//this.$router.push({ path: '/register' });
location.href="http://localhost:8080/shop/export";
}

4.4. 后台生成excel并下载

@GetMapping("/export")
public void export( HttpServletResponse response){
try {
List<Shop> shops = shopService.loadAll();
ExcelUtil.exportExcel(shops, null, "店铺信息", Shop.class, "shop.xlsx", response);
} catch (Exception e) {
e.printStackTrace();
}
}

4.5. domain加注解

public class Shop extends BaseDomain{
//店铺名称
@Excel(name = "店铺名称",orderNum = "1",width = 30)
private String name;
//电话座机
@Excel(name = "店铺电话",orderNum = "2",width = 30)
private String tel;
//入驻时间
@Excel(name = "入驻时间",orderNum = "3",width = 30,exportFormat="yyyy-MM-dd")
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
private Date registerTime = new Date();
//店铺状态：待审核【1】，审核通过，待激活【2】，激活成功【3】，审核失败->驳回【4】
@Excel(name = "店铺状态",orderNum = "4",width = 30)
private Integer state = 1;
//店铺地址
@Excel(name = "店铺地址",orderNum = "5",width = 30)
private String address;
//店铺logo
@Excel(name = "店铺logo",orderNum = "6",width = 30)
private String logo;
//店铺管理员ID
private Long admin_id;
//关联对象 - 店铺管理员对象
private Employee admin;
}

5. EasyPOI导入数据

5.1. 前端代码准备

对于excel导入，其实就是上传文件并解析内容，将excel里面的每一行数据解析为一个对象再保存数据就行

5.2. 后台代码

@PostMapping("/importExcel")
public void importExcel(@RequestPart("file") MultipartFile file){
//String file = "F:\\文件名.xls";
//解析excel，
List<Shop> list = ExcelUtil.importExcel(file,0,1,Shop.class);
//也可以使用MultipartFile,使用 FileUtil.importExcel(MultipartFile file, Integer titleRows, Integer headerRows, Class<T> pojoClass)导入
System.out.println("导入数据一共【"+list.size()+"】行");
for (Shop shop:list) {
System.out.println(shop);
}
//保存到数据库中[自己实现，提示：动态sql 批量插入]
}

六. Echarts报表

1. 什么是报表

简单的说就是对系统内的各种运营数据的统计，以图形的方式进行呈现。对于报表基本上任何系统必不可少的功能

实现技术：

1. echarts：别人写好的一些报表模板
       https://echarts.apache.org/zh/index.html
       丰富的图表类型
           折线图，柱状图
               数据的变化
           饼图
               数据的占比
2. highcharts

2. Echarts介绍

Apache ECharts - 现在访问不了

我们的后台自带报表，我们要做的事情就是看懂并替换为我们真是的数据

以柱状图举例：

drawColumnChart() {
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartColumn.setOption({
title: { text: 'Column Chart' },
tooltip: {},
xAxis: {
//这是数据的横坐标数据类型为数组
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]//
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//每一个数据对应的纵坐标
data: [5, 20, 36, 10, 10, 20]
}]
});
},

3. 替换为真实数据

需求：统计每种状态的店铺数量

3.1. 按照状态统计店铺数量

SELECT state,count(*) countNum FROM `t_shop` GROUP BY state ORDER BY state;

3.2. 后端代码

@Data
public class ShopDto {
//店铺状态
private Integer state;
//店铺数量
private Integer countNum;
}

@GetMapping("/echarts")
public List<ShopDto> echartsData(){
List<ShopDto> shopDtos = shopService.getCountByState();
return shopDtos;
}

<select id="getCountByState" resultType="ShopDto">
SELECT state,count(*) countNum FROM `t_shop` GROUP BY state ORDER BY state
</select>

3.3. 前端代码

drawColumnChart() {
this.$http.get("/shop/echarts").then(res=>{
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
var arr = res.data;
var states = arr.map(obj => {
return obj.state;
});
var countNums = arr.map(obj => {
return obj.countNum;
})
//将状态的1234 - 转成待审核,待激活,激活成功,驳回
for (let i = 0; i < states.length; i++) {
if(states[i] == 1){
states.splice(i,1,"待审核"); //替换 i表示下标 1 表示从下标往后替换多少个
}
if(states[i] == 2){
states.splice(i,1,"待激活");
}
if(states[i] == 3){
states.splice(i,1,"激活成功");
}
if(states[i] == 4){
states.splice(i,1,"驳回");
}
}
this.chartColumn.setOption({
title: { text: 'Column Chart' },
tooltip: {},
xAxis: {
data: states
},
yAxis: {}, //y轴数据会根据data集合中的数据自动平均分配
series: [{
name: '销量',
type: 'bar',
data: countNums //就一个一个集合按照状态升序的
}]
});
});
}