7.23 Echarts、数据库查询操作

最新推荐文章于 2023-04-03 14:28:14 发布

代码王者pyh

最新推荐文章于 2023-04-03 14:28:14 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/pyhkobe/article/details/96963609

版权

Echarts、数据库查询操作

一、Echarts
二、查询数据库
- 1.新建数据库表

一、Echarts

官网：https://echarts.baidu.com/

HTML引入echarts：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这样你的第一个图表就诞生了！
在这里插入图片描述

二、查询数据库

1.新建数据库表

在这里插入图片描述
bw_enterprise.sql内容如下：

/*
 Navicat Premium Data Transfer

 Source Server         : 11111
 Source Server Type    : MariaDB
 Source Server Version : 100313
 Source Host           : localhost:3306
 Source Schema         : guns

 Target Server Type    : MariaDB
 Target Server Version : 100313
 File Encoding         : 65001

 Date: 23/07/2019 13:13:22
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for bw_enterprise
-- ----------------------------
DROP TABLE IF EXISTS `bw_enterprise`;
CREATE TABLE `bw_enterprise`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `e_business_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '企业名称',
  `e_telephone` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '电话',
  `e_websiteurl` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '官网地址',
  `e_mailbox` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  `e_address` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '地址',
  `e_introduction` varchar(300) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '简介',
  `e_create_time` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '创建时间',
  `e_create_users` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '创建用户',
  `e_edit_time` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '修改时间',
  `e_edit_users` int(255) NULL DEFAULT NULL COMMENT '修改用户',
  `e_release_time` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '发布时间',
  `e_release_users` int(255) NULL DEFAULT NULL COMMENT '发布用户',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of bw_enterprise
-- ----------------------------
INSERT INTO `bw_enterprise` VALUES (1, '阿里巴巴（中国）网络技术有限公司', '0571-85028888', 'http://www.taobao.com', '邮箱：***@alibaba-inc.com', '浙江省杭州市滨江区网商路699号', '阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他', '2019-07-23 10:27:01', '1', '2019-07-23 10:27:06', 1, '2019-07-23 10:27:09', 1);
SET FOREIGN_KEY_CHECKS = 1;

在guns-admin\src\main\java\com\stylefeng\guns\modular目录下新建文件夹webSys,
webSys文件夹下的结构及文件如图：
在这里插入图片描述
首先在webSys/model/下建立 Enterprise 实体类，类中使用的名称与数据库列名不同，去掉底杠并将其之后字母大写（例：e_business_name写为eBusinessName）

Enterprise.java内容：

package com.stylefeng.guns.modular.webSys.model;

import com.baomidou.mybatisplus.activerecord.Model;
import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import org.springframework.format.annotation.DateTimeFormat;

import java.io.Serializable;
import java.util.Date;

/**
 * <p>
 * 企业表
 * </p>
 *
 * @author yfq
 * @since 2019-07-23
 */
@TableName("bw_enterprise")
public class Enterprise extends Model<Enterprise> {

    private static final long serialVersionUID = 1L;

    /**
     * 主键id
     */
	@TableId(value="id", type= IdType.AUTO)
	private Integer id;
    /**
     * 企业名称
     */
	@TableField("e_business_name")
	private String eBusinessName;
	/**
	 * 电话
	 */
	@TableField("e_telephone")
	private String eTelephone;
	/**
	 * 官网
	 */
	@TableField("e_websiteurl")
	private String eWebsiteurl;
	/**
	 * 邮箱
	 */
	@TableField("e_mailbox")
	private String eMailbox;
	/**
	 * 地址
	 */
	@TableField("e_address")
	private String eAddress;
	/**
	 * 简介
	 */
	@TableField("e_introduction")
	private String eIntroduction;
	/**
	 * 创建时间
	 */
	@TableField("e_creation_time")
	@DateTimeFormat(pattern = "yyyy-mm-dd HH:MM:SS")
	private Date eCreationTime;
	/**
	 * 创建用户
	 */
	@TableField("e_creating_users")
	private Integer eCreatingUsers;
	/**
	 * 修改时间
	 */
	@TableField("e_edit_time")
	@DateTimeFormat(pattern = "yyyy-mm-dd HH:MM:SS")
	private Date eEditTime;
	/**
	 * 修改用户
	 */
	@TableField("e_edit_users")
	private Integer eEditUsers;
	/**
	 * 发布时间
	 */
	@TableField("e_release_time")
	@DateTimeFormat(pattern = "yyyy-mm-dd HH:MM:SS")
	private Date eReleaseTime;
	/**
	 * 发布用户
	 */
	@TableField("e_release_users")
	private Integer eReleaseUsers;


	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String geteBusinessName() {
		return eBusinessName;
	}

	public void seteBusinessName(String eBusinessName) {
		this.eBusinessName = eBusinessName;
	}

	public String geteTelephone() {
		return eTelephone;
	}

	public void seteTelephone(String eTelephone) {
		this.eTelephone = eTelephone;
	}

	public String geteWebsiteurl() {
		return eWebsiteurl;
	}

	public void seteWebsiteurl(String eWebsiteurl) {
		this.eWebsiteurl = eWebsiteurl;
	}

	public String geteMailbox() {
		return eMailbox;
	}

	public void seteMailbox(String eMailbox) {
		this.eMailbox = eMailbox;
	}

	public String geteAddress() {
		return eAddress;
	}

	public void seteAddress(String eAddress) {
		this.eAddress = eAddress;
	}

	public String geteIntroduction() {
		return eIntroduction;
	}

	public void seteIntroduction(String eIntroduction) {
		this.eIntroduction = eIntroduction;
	}

	public Date geteCreationTime() {
		return eCreationTime;
	}

	public void seteCreationTime(Date eCreationTime) {
		this.eCreationTime = eCreationTime;
	}

	public Integer geteCreatingUsers() {
		return eCreatingUsers;
	}

	public void seteCreatingUsers(Integer eCreatingUsers) {
		this.eCreatingUsers = eCreatingUsers;
	}

	public Date geteEditTime() {
		return eEditTime;
	}

	public void seteEditTime(Date eEditTime) {
		this.eEditTime = eEditTime;
	}

	public Integer geteEditUsers() {
		return eEditUsers;
	}

	public void seteEditUsers(Integer eEditUsers) {
		this.eEditUsers = eEditUsers;
	}

	public Date geteReleaseTime() {
		return eReleaseTime;
	}

	public void seteReleaseTime(Date eReleaseTime) {
		this.eReleaseTime = eReleaseTime;
	}

	public Integer geteReleaseUsers() {
		return eReleaseUsers;
	}

	public void seteReleaseUsers(Integer eReleaseUsers) {
		this.eReleaseUsers = eReleaseUsers;
	}

	@Override
	protected Serializable pkVal() {
		return this.id;
	}

	@Override
	public String toString() {
		return "Enterprise{" +
			"id=" + id +
			", eBusinessName=" + eBusinessName +
			", eTelephone=" + eTelephone +
			", eWebsiteurl=" + eWebsiteurl +
			", eMailbox=" + eMailbox +
			", eAddress=" + eAddress +
			", eIntroduction=" + eIntroduction +
			", eCreationTime=" + eCreationTime +
			", eCreatingUsers=" + eCreatingUsers +
			", eEditTime=" + eEditTime +
			", eEditUsers=" + eEditUsers +
			", eReleaseTime=" + eReleaseTime +
			", eReleaseUsers=" + eReleaseUsers +
			"}";
	}
}

然后配置dao层
EnterpriseMapper.xml内容：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.stylefeng.guns.modular.webSys.dao.EnterpriseMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.stylefeng.guns.modular.webSys.model.Enterprise">
        <id column="id" property="id"/>
        <result column="e_business_name" property="eBusinessName"/>
        <result column="e_telephone" property="eTelephone"/>
        <result column="e_websiteurl" property="eWebsiteurl"/>
        <result column="e_mailbox" property="eMailbox"/>
        <result column="e_address" property="eAddress"/>
        <result column="e_introduction" property="eIntroduction"/>
        <result column="e_create_time" property="eCreateTime"/>
        <result column="e_create_users" property="eCreateUsers"/>
        <result column="e_edit_time" property="eEditTime"/>
        <result column="e_edit_users" property="eEditUsers"/>
        <result column="e_release_time" property="eReleaseTime"/>
        <result column="e_release_users" property="eReleaseUsers"/>
    </resultMap>
    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
id,
e_business_name as eBusinessName,
e_telephone as eTelephone,
e_websiteurl as eWebsiteurl,
e_mailbox as eMailbox,
e_address as eAddress,
e_introduction as eIntroduction,
e_create_time as eCreateTime,
e_create_users as eCreateUsers,
e_edit_time as eEditTime,
e_edit_users as eEditUsers,
e_release_time as eReleaseTime,
e_release_users as eReleaseUsers

    </sql>
</mapper>