一、Echarts
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>